Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
Button
button { background: #fbca1f; font-family: inherit; padding: 0.6em 1.3em; font-weight: 900; font-size: 18px; border: 3px solid black; border-radius: 0.4em; box-shadow: 0.1em 0.1em; cursor: pointer; } button:hover { transform: translate(-0.05em, -0.05em); box-shadow: 0.15em 0.15em; } button:active { transform: translate(0.05em, 0.05em); box-shadow: 0.05em 0.05em; }
406
Button
By:
pixeldev
* { box-sizing: border-box; } #overlay { background: #f0f0f0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; } .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { border-radius: 50%; } .bg { width: 300px; height: 300px; background: #000; border: solid 5px #0088ff; } .outermost { width: 255px; height: 255px; border: solid 10px rgba(0, 0, 0, 0); border-bottom: solid 10px #0088ff; border-left: solid 10px #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 5s linear infinite; } .outer { width: 250px; height: 250px; border: solid 5px #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .middle { width: 215px; height: 215px; border: solid 12px rgba(0, 0, 0, 0); border-bottom: solid 12px #005aa8; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin2 3.5s linear infinite reverse; } .middle2 { width: 215px; height: 215px; border: solid 6px rgba(0, 0, 0, 0); border-top: solid 6px #005aa8; border-right: solid 6px #005aa8; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 3.5s linear infinite reverse; } .middle3 { width: 205px; height: 205px; border: solid 30px rgba(0, 0, 0, 0); border-top: solid 30px #0088ff4b; border-right: solid 30px #0088ff4b; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 3.5s linear infinite reverse; } .inner { width: 140px; height: 140px; border: solid 5px #0088ff; border-bottom: solid 5px rgba(0, 0, 0, 0); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); animation: spin2 2s linear infinite; } .innermost3 { width: 35px; height: 35px; background: #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .innermost2 { width: 80px; height: 80px; border: solid 13px #0088ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .innermost { width: 115px; height: 115px; border: solid 13px #0088ff; border-top: solid 13px rgba(0, 0, 0, 0); border-bottom: solid 13px rgba(0, 0, 0, 0); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: spin 1s linear infinite reverse; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin2 { 0% { transform: translate(-50%, -50%) rotate(45deg); } 100% { transform: translate(-50%, -50%) rotate(405deg); } }
190
J.A.R.V.I.S Animation
By:
rald_dev
* { padding: 0; margin: 0; box-sizing: border-box; } .container { width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); justify-items: center; align-items: center; background-color: #111; } /* Style One */ .one { width: 100px; transform-origin: center; animation: rotate 4s linear infinite; } .one circle { fill: none; stroke: red; stroke-width: 10; stroke-dasharray: 1, 20; } @keyframes rotate { 100% { transform: rotate(360deg); } } .lines { width: 100px; height: 100px; position: relative; } /* Style Two */ .l2 { display: flex; justify-content: space-around; align-items: center; } .l2 .line { height: 20px; width: 4px; background-color: #fff; animation: topBottom 800ms linear infinite; } .l2 .line:nth-child(1) { animation-delay: 0s; } .l2 .line:nth-child(2) { animation-delay: 0.2s; } .l2 .line:nth-child(3) { animation-delay: 0.4s; } .l2 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes topBottom { 0% { transform: translateY(0px); } 25% { transform: translateY(40px); } 75% { transform: translateY(-40px); } 100% { transform: translateY(0px); } } /* Style Three*/ .l3 { display: flex; justify-content: space-around; align-items: center; } .l3 .line { height: 0px; width: 4px; left: 0px; background-color: #fff; animation: expand 900ms ease infinite; } .l3 .line:nth-child(1) { animation-delay: 0s; } .l3 .line:nth-child(2) { animation-delay: 0.2s; } .l3 .line:nth-child(3) { animation-delay: 0.4s; } .l3 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expand { 0%, 100% { height: 0px; } 50% { height: 40px; } } /* Style Four*/ .l4 { display: flex; justify-content: space-around; align-items: center; } .l4 .line { height: 2px; width: 4px; background-color: #fff; transform-origin: bottom; animation: expandTop 900ms ease infinite; } .l4 .line:nth-child(1) { animation-delay: 0s; } .l4 .line:nth-child(2) { animation-delay: 0.2s; } .l4 .line:nth-child(3) { animation-delay: 0.4s; } .l4 .line:nth-child(4) { animation-delay: 0.6s; } @keyframes expandTop { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(20); } } /* Style five*/ .l5 { display: flex; justify-content: space-around; align-items: center; } .l5 .line { height: 20px; width: 4px; background-color: orange; animation: blink 1s ease infinite; } .l5 .line:nth-child(1), .l5 .line:nth-child(10) { animation-delay: 0.8s; } .l5 .line:nth-child(2), .l5 .line:nth-child(9) { animation-delay: 0.6s; } .l5 .line:nth-child(3), .l5 .line:nth-child(8) { animation-delay: 0.4s; } .l5 .line:nth-child(4), .l5 .line:nth-child(7) { animation-delay: 0.2s; } .l5 .line:nth-child(6), .l5 .line:nth-child(5) { animation-delay: 0s; } @keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Style Six*/ .l6 { display: flex; justify-content: space-around; align-items: center; overflow: hidden; position: relative; height: 20px; background-color: blue; } .l6 .line:nth-child(1) { position: absolute; left: 0; bottom: 0; height: 10px; width: 100%; background-color: #fff; animation: expandRight 2s ease infinite; } .l6 .line:nth-child(2) { position: absolute; right: 0; top: 0; height: 10px; width: 100%; animation: expandLeft 2s ease infinite; background-color: #fff; } @keyframes expandRight { 0% { transform-origin: left; transform: translateX(0%); } 50% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes expandLeft { 0% { transform-origin: right; transform: translateX(100%); } 50% { transform: translateX(0%); transform-origin: left; } 100% { transform: translateX(100%); } } /* Style Seven */ .l7 { position: relative; width: 80px; height: 80px; animation: 900ms linear rotateMain infinite; } .l7 .line { position: absolute; background-color: #fff; } .l7 .line:nth-child(1) { left: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(2) { right: 0; top: 40px; animation: 600ms ease-in growWidth infinite; } .l7 .line:nth-child(3) { left: 40px; animation: 600ms ease-in growHeight infinite; } .l7 .line:nth-child(4) { left: 40px; bottom: 0px; animation: 600ms ease-in growHeight infinite; } @keyframes growHeight { 0%, 100% { height: 0px; width: 2px; } 50% { height: 40px; width: 2px; } } @keyframes growWidth { 0%, 100% { width: 0px; height: 2px; } 50% { width: 40px; height: 2px; } } @keyframes rotateMain { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Style Eight*/ .l8 { display: flex; justify-content: space-around; align-items: center; } .l8 .line { height: 20px; width: 4px; background-color: rgb(255, 0, 76); animation: growLine 1s ease infinite; } .l8 .line:nth-child(1), .l8 .line:nth-child(10) { animation-delay: 0.8s; } .l8 .line:nth-child(2), .l8 .line:nth-child(9) { animation-delay: 0.6s; } .l8 .line:nth-child(3), .l8 .line:nth-child(8) { animation-delay: 0.4s; } .l8 .line:nth-child(4), .l8 .line:nth-child(7) { animation-delay: 0.2s; } .l8 .line:nth-child(6), .l8 .line:nth-child(5) { animation-delay: 0s; } @keyframes growLine { 0%, 100% { transform: scale(0); } 50% { transform: scale(1.5); } } .circle-loader { width: 80px; height: 80px; border: 8px solid #333; border-top: 8px solid red; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
160
8 Pre loader animation using css
By:
rald_dev
.logos-slider { display: flex; flex-wrap: nowrap; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,0) 0,#000 15%,#000 85%,rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg,rgba(0,0,0,0) 0,#000 15%,#000 85%,rgba(0,0,0,0) 100%); } .logos-slider-container { display: flex; align-items: center; justify-content: center; gap: 5rem; animation: slide 30s linear infinite; } .logos-slider-container img { width:150px; max-width: 150px; } @keyframes slide { 0% { transform: translate3d(0,0,0) } 100% { transform: translate3d(-100%,0,0) } } h1 { text-align: center; font-family: 'Lato'; color: #3D4A54; } .card { background: white; padding: 2rem; border-radius: 1rem; max-width: 900px; margin: 0 auto; box-shadow: 0px 3px 8px rgb(61 74 84 / 10%), 0px 3px 12px rgb(61 74 84 / 6%) } body { padding-top: 4rem; background: #eef2f5; display:flex; align-items: center; flex-direction: column; justfiy-content: center; }
150
CodePen Home Pure CSS Logo Slider Responsive
By:
pixeldev
CSS-only Carousel
This carousel is created with HTML and CSS only.
Go to last slide
Go to next slide
Go to previous slide
Go to next slide
Go to previous slide
Go to next slide
Go to previous slide
Go to first slide
@keyframes tonext { 75% { left: 0; } 95% { left: 100%; } 98% { left: 100%; } 99% { left: 0; } } @keyframes tostart { 75% { left: 0; } 95% { left: -300%; } 98% { left: -300%; } 99% { left: 0; } } @keyframes snap { 96% { scroll-snap-align: center; } 97% { scroll-snap-align: none; } 99% { scroll-snap-align: none; } 100% { scroll-snap-align: center; } } body { max-width: 37.5rem; margin: 0 auto; padding: 0 1.25rem; font-family: 'Lato', sans-serif; } * { box-sizing: border-box; scrollbar-color: transparent transparent; /* thumb and track color */ scrollbar-width: 0px; } *::-webkit-scrollbar { width: 0; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: transparent; border: none; } * { -ms-overflow-style: none; } ol, li { list-style: none; margin: 0; padding: 0; } .carousel { position: relative; padding-top: 75%; filter: drop-shadow(0 0 10px #0003); perspective: 100px; } .carousel__viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .carousel__slide { position: relative; flex: 0 0 100%; width: 100%; background-color: #f99; counter-increment: item; } .carousel__slide:nth-child(even) { background-color: #99f; } .carousel__slide:before { content: counter(item); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-40%,70px); color: #fff; font-size: 2em; } .carousel__snapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center; } @media (hover: hover) { .carousel__snapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 4s; animation-iteration-count: infinite; } .carousel__slide:last-child .carousel__snapper { animation-name: tostart, snap; } } @media (prefers-reduced-motion: reduce) { .carousel__snapper { animation-name: none; } } .carousel:hover .carousel__snapper, .carousel:focus-within .carousel__snapper { animation-name: none; } .carousel__navigation { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; } .carousel__navigation-list, .carousel__navigation-item { display: inline-block; } .carousel__navigation-button { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: #333; background-clip: content-box; border: 0.25rem solid transparent; border-radius: 50%; font-size: 0; transition: transform 0.1s; } .carousel::before, .carousel::after, .carousel__prev, .carousel__next { position: absolute; top: 0; margin-top: 37.5%; width: 4rem; height: 4rem; transform: translateY(-50%); border-radius: 50%; font-size: 0; outline: 0; } .carousel::before, .carousel__prev { left: -1rem; } .carousel::after, .carousel__next { right: -1rem; } .carousel::before, .carousel::after { content: ''; z-index: 1; background-color: #333; background-size: 1.5rem 1.5rem; background-repeat: no-repeat; background-position: center center; color: #fff; font-size: 2.5rem; line-height: 4rem; text-align: center; pointer-events: none; } .carousel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); } .carousel::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); }
150
Pure css carousel
By:
pixeldev
Loading...
@keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .animate-flicker { -webkit-animation: flickerAnimation .5s infinite; -moz-animation: flickerAnimation .5s infinite; -o-animation: flickerAnimation .5s infinite; animation: flickerAnimation .5s infinite; }
141
Flickering Animation
By:
rald_dev
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
HOME
ARTICLES
PORTFOLIO
ABOUT
CONTACT
html, body { margin: 0px; } header, footer { font-family: Raleway; margin: 0 auto; padding: 5em 3em; text-align: center; background: #555; } header h1 { color: #AAA; font-size: 40px; font-weight: lighter; margin-bottom: 5px; } header span { color: #222; } footer span { color: #AAA; } div.container { font-family: Raleway; margin: 0 auto; padding: 10em 3em; text-align: center; } div.container a { color: #FFF; text-decoration: none; font: 20px Raleway; margin: 0px 10px; padding: 10px 10px; position: relative; z-index: 0; cursor: pointer; } .red { background: #f44336; } .purple { background: #673ab7; } .indigo { background: #3f51b5; } .blue { background: #2196f3; } .cyan { background: #00bcd4; } .teal { background: #009688; } .green { background: #4caf50; } .lightGreen { background: #8bc34a; } .lime { background: #c0ca33; } .yellow { background: #fdd835; } .amber { background: #ffc107; } .orange { background: #ff9800 } .deepOrange { background: #ff5722; } .brown { background: #795548; } .gray { background: #9e9e9e; } /* Top and Bottom borders go out */ div.topBotomBordersOut a:before, div.topBotomBordersOut a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersOut a:before { top: 0px; transform: translateY(10px); } div.topBotomBordersOut a:after { bottom: 0px; transform: translateY(-10px); } div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after { opacity: 1; transform: translateY(0px); } /* Top and Bottom borders come in */ div.topBotomBordersIn a:before, div.topBotomBordersIn a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; transition: all 0.3s; } div.topBotomBordersIn a:before { top: 0px; transform: translateY(-10px); } div.topBotomBordersIn a:after { bottom: 0px; transform: translateY(10px); } div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after { opacity: 1; transform: translateY(0px); } /* Top border go down and Left border appears */ div.topLeftBorders a:before { position: absolute; top: 0px; left: 0px; width: 2px; height: 0px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:after { position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 1; transition: all 0.3s; } div.topLeftBorders a:hover:before { height: 100%; } div.topLeftBorders a:hover:after { opacity: 0; top: 100%; } /* Circle behind */ div.circleBehind a:before, div.circleBehind a:after { position: absolute; top: 22px; left: 50%; width: 50px; height: 50px; border: 4px solid #0277bd; transform: translateX(-50%) translateY(-50%) scale(0.8); border-radius: 50%; background: transparent; content: ""; opacity: 0; transition: all 0.3s; z-index: -1; } div.circleBehind a:after { border-width: 2px; transition: all 0.4s; } div.circleBehind a:hover:before { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } div.circleBehind a:hover:after { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1.3); } /* Brackets go out */ div.brackets a:before, div.brackets a:after { position: absolute; opacity: 0; font-size: 35px; top: 0px; transition: all 0.3s; } div.brackets a:before { content: '('; left: 0px; transform: translateX(10px); } div.brackets a:after { content: ')'; right: 0px; transform: translateX(-10px); } div.brackets a:hover:before, div.brackets a:hover:after { opacity: 1; transform: translateX(0px); } /* Border from Y to X */ div.borderYtoX a:before, div.borderYtoX a:after { position: absolute; opacity: 0.5; height: 100%; width: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderYtoX a:before { left: 0px; top: 0px; } div.borderYtoX a:after { right: 0px; bottom: 0px; } div.borderYtoX a:hover:before, div.borderYtoX a:hover:after { opacity: 1; height: 2px; width: 100%; } /* Border X get width */ div.borderXwidth a:before, div.borderXwidth a:after { position: absolute; opacity: 0; width: 0%; height: 2px; content: ''; background: #FFF; transition: all 0.3s; } div.borderXwidth a:before { left: 0px; top: 0px; } div.borderXwidth a:after { right: 0px; bottom: 0px; } div.borderXwidth a:hover:before, div.borderXwidth a:hover:after { opacity: 1; width: 100%; } /* Pull down */ div.pullDown a:before { position: absolute; width: 100%; height: 2px; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullDown a:hover:before { height: 100%; } /* Pull up */ div.pullUp a:before { position: absolute; width: 100%; height: 2px; left: 0px; bottom: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUp a:hover:before { height: 100%; } /* Pull right */ div.pullRight a:before { position: absolute; width: 2px; height: 100%; left: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRight a:hover:before { width: 100%; } /* Pull left */ div.pullLeft a:before { position: absolute; width: 2px; height: 100%; right: 0px; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullLeft a:hover:before { width: 100%; } /* Pull up and down */ div.pullUpDown a:before, div.pullUpDown a:after { position: absolute; width: 100%; height: 2px; left: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullUpDown a:before { top: 0px; } div.pullUpDown a:after { bottom: 0px; } div.pullUpDown a:hover:before, div.pullUpDown a:hover:after { height: 100%; } /* Pull right and left */ div.pullRightLeft a:before, div.pullRightLeft a:after { position: absolute; width: 2px; height: 100%; top: 0px; content: ''; background: #FFF; opacity: 0.3; transition: all 0.3s; } div.pullRightLeft a:before { left: 0px; } div.pullRightLeft a:after { right: 0px; } div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after { width: 100%; } /* Highlight text out */ div.highlightTextOut a { color: rgba(255, 255, 255, 0.3); } div.highlightTextOut a:before, div.highlightTextIn a:before { position: absolute; color: #FFF; top: 0px; left: 0px; padding: 10px; overflow: hidden; content: attr(alt); transition: all 0.3s; transform: scale(0.8); opacity: 0; } div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before { transform: scale(1); opacity: 1; } /* Highlight text in */ div.highlightTextIn a { color: rgba(0, 0, 0, 0.4); } div.highlightTextIn a:before { transform: scale(1.2); }
138
Navigation Animation
By:
rald_dev
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1c1f2f; } .container{ position: relative; -webkit-box-reflect: below 1px linear-gradient(transparent,#0001); } .container .loader{ position: relative; width: 200px; height: 200px; border-radius: 50%; border: 20px solid transparent; border-bottom: 20px solid #06c8f0; border-right: 20px solid #06c8f0; transform: rotate(45deg); animation: animate 4s ease-in-out infinite; } @keyframes animate{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(90deg); } 100%{ transform: rotate(0deg); } } .container .loader .ball{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; animation: animateBell 4s ease-in-out infinite; } @keyframes animateBell{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(0deg); } } .container .loader .ball:before{ content: ''; position: absolute; bottom: 50%; right: 15px; width: 40px; height: 40px; background: #fff; border-radius: 50%; transform: translateY(-50%); }
136
Perpetual Animation
By:
rald_dev
.card { width: 190px; height: 254px; background: white; border-radius: 10px; transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .shadow { box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(190, 190, 190), 0.3em 0.3em 1em rgba(0,0,0,0.3); }
132
Card
By:
pixeldev
Hello World
Hello World
Hello World
Hello World
*{ box-sizing: border-box; margin: 0; padding: 0; } body{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background: #222; } .btn{ --light-color: rgb(69, 252, 151); margin: 1rem; position:relative; appearance: none; border: none; color: rgb(209, 208, 208); padding: 1rem 2rem; background-color: #3e3e3e; z-index: 2; overflow: hidden; border-radius: .4rem; box-shadow: .5rem .5rem .5rem #0005; transition: .3s; } .btn::before{ position: absolute; width: 10rem; height: 10rem; background: rgb(2,0,36); background: linear-gradient(90deg, transparent 0%, transparent 14%, transparent 35%, var(--light-color) 80%, var(--light-color) 100%); content: ''; top: 50%; left: 50%; transform-origin: bottom center ; transform: translate(-50%, -100%) ; z-index: -3; border-radius: 100%; animation: button_light_effect 5s linear infinite; } .btn_orange::before{animation-delay:.1s;} .btn_blue::before{animation-delay:.3s;} .btn_yellow::before{animation-delay:.6s;} .btn::after{ position: absolute; width: calc(100% - .3rem); height: calc(100% - .3rem); background-color: #3e3e3e; content: ''; top: 50%; left: 50%; border-radius: .4rem; transform: translate(-50%, -50%); z-index: -3; transition: 1s ; } .btn:hover{ transform:scale(1.2); } .btn:hover, .btn:hover::after { cursor: pointer; background: #55606a; } .btn:hover::before{ animation-duration: .5s; } .btn_orange{--light-color:rgb(255, 166, 0);} .btn_blue{--light-color:rgb(0, 183, 255);} .btn_yellow{--light-color:rgb(235, 255, 16);} .btn_pink{--light-color:rgb(255, 0, 200);} @keyframes button_light_effect { 0%{transform: translate(-50%, -100%) rotate(-180deg);} 100%{transform: translate(-50%, -100%) rotate(180deg);} }
131
Animated Button
By:
rald_dev
* { margin:0; padding:0; box-sizing:border-box; } body { background-color:#0dc5c1; } .line_height { width:10px; height:50px; background-color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:move 04s linear infinite; animation-delay:-0.16s; } .line_height:before, .line_height:after { content:""; position:absolute; width:10px; height:50px; background-color:#fff; animation:move 04s ease-in-out infinite; } .line_height:before { left:-25px; animation-delay:-0.32s; } .line_height:after { left:25px; } @keyframes move { 0%,80%,100% { height:48px; box-shadow:0 0; } 40% { height:60px; box-shadow:0 -24px; } }
127
Line Animation
By:
rald_dev
Read More
Anniversary celebration
Read More
ul { margin: 0; padding: 0; list-style: none; } .btn { display: inline-block; text-transform: uppercase; border: 2px solid #2c3e50; margin-top: 100px; font-size: 0.7em; font-weight: 700; padding: 0.1em 0.4em; text-align: center; text-decoration:none; transition: color 0.3s, border-color 0.3s; } .btn:hover { border-color: #c32b23; border-color: #c32b23; color: #c32b23; } .book-paging-animation{ text-align: center; max-width: 700px; margin: 0 auto; > li { width: 500px; min-height: 300px; display: inline-block; vertical-align: top; } } .book { position: relative; width: 160px; height: 220px; margin: 50px auto; perspective: 1000px; transform-style: preserve-3d; } .book-cover-front li:first-child { background-color: #eee; backface-visibility: hidden; } .book-cover-front li:last-child { background: #fffbec; } .book-cover-back li:first-child { background: #fffbec; } .book-cover-back li:last-child { background: #fffbec; } .book-line li:first-child { background: #eee; } .book-line li:last-child { background: #333; } .book-cover-front li:first-child:after, .book-cover-front li:first-child:before, .book-cover-front li:last-child:after, .book-cover-front li:last-child:before, .book-cover-back li:first-child:after, .book-cover-back li:first-child:before, .book-cover-back li:last-child:after, .book-cover-back li:last-child:before, .book-line li:first-child:after, .book-line li:first-child:before, .book-line li:last-child:after, .book-line li:last-child:before { background: #999; } .pages-inner > li { background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2); border-radius: 0px 5px 5px 0px; } .book-cover-front { transform: rotateY(-34deg) translateZ(8px); z-index: 100; } .book-cover-back { transform: rotateY(-15deg) translateZ(-8px); } .pages-inner li:nth-child(1) { transform: rotateY(-28deg); } .pages-inner li:nth-child(2) { transform: rotateY(-30deg); } .pages-inner li:nth-child(3) { transform: rotateY(-32deg); } .pages-inner li:nth-child(4) { transform: rotateY(-34deg); } .pages-inner li:nth-child(5) { transform: rotateY(-36deg); } .book-cover-front, .book-cover-back, .book-line, .book-cover-front li, .book-cover-back li, .book-line li { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; transform-style: preserve-3d; } .book-cover-front, .book-cover-back { transform-origin: 0% 100%; } .book-cover-front { transition: all 0.8s ease, z-index 0.6s; } .book-cover-front li:first-child { transform: translateZ(2px); } .book-cover-front li:last-child { transform: rotateY(180deg) translateZ(2px); } .book-cover-back li:first-child { -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .book-cover-back li:last-child { transform: translateZ(-2px); } .book-cover-front li:first-child:after, .book-cover-front li:first-child:before, .book-cover-front li:last-child:after, .book-cover-front li:last-child:before, .book-cover-back li:first-child:after, .book-cover-back li:first-child:before, .book-cover-back li:last-child:after, .book-cover-back li:last-child:before, .book-line li:first-child:after, .book-line li:first-child:before, .book-line li:last-child:after, .book-line li:last-child:before { position: absolute; top: 0; left: 0; } .book-cover-front li:first-child:after, .book-cover-front li:first-child:before { width: 4px; height: 100%; } .book-cover-front li:first-child:after { transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .book-cover-front li:first-child:before { transform: rotateY(90deg) translateZ(158px) translateX(2px); } .book-cover-front li:last-child:after, .book-cover-front li:last-child:before { width: 4px; height: 160px; } .book-cover-front li:last-child:after { transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); } .book-cover-front li:last-child:before { box-shadow: 0px 0px 30px 5px #333; transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); } .book-cover-back li:first-child:after, .book-cover-back li:first-child:before { width: 4px; height: 100%; } .book-cover-back li:first-child:after { transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .book-cover-back li:first-child:before { transform: rotateY(90deg) translateZ(158px) translateX(2px); } .book-cover-back li:last-child:after, .book-cover-back li:last-child:before { width: 4px; height: 160px; } .book-cover-back li:last-child:after { transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); } .book-cover-back li:last-child:before { box-shadow: 10px -1px 80px 20px #666; transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); } .book-line { transform: rotateY(60deg) translateX(-5px) translateZ(-12px); width: 16px; z-index: 0; } .book-line li:first-child { transform: translateZ(2px); } .book-line li:last-child { transform: translateZ(-2px); } .book-line li:first-child:after, .book-line li:first-child:before { width: 4px; height: 100%; } .book-line li:first-child:after { transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .book-line li:first-child:before { transform: rotateY(-90deg) translateZ(-12px); } .book-line li:last-child:after, .book-line li:last-child:before { width: 4px; height: 16px; } .book-line li:last-child:after { transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); } .book-line li:last-child:before { box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2); transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); } .pages-inner, .pages-inner > li { position: absolute; top: 0; left: 0; transform-style: preserve-3d; } .pages-inner { width: 100%; height: 98%; top: 1%; left: 3%; z-index: 10; } .pages-inner > li { width: 100%; height: 100%; transform-origin: left center; transition-property: transform; transition-timing-function: ease; } .pages-inner > li:nth-child(1) { transition-duration: 0.6s; } .pages-inner > li:nth-child(2) { transition-duration: 0.6s; } .pages-inner > li:nth-child(3) { transition-duration: 0.4s; } .pages-inner > li:nth-child(4) { transition-duration: 0.5s; } .pages-inner > li:nth-child(5) { transition-duration: 0.6s; } .book:hover > .book-cover-front { transform: rotateY(-145deg) translateZ(0); z-index: 0; } .book:hover > .pages-inner li:nth-child(1) { transform: rotateY(-30deg); transition-duration: 1.5s; } .book:hover > .pages-inner li:nth-child(2) { transform: rotateY(-35deg); transition-duration: 1.8s; } .book:hover > .pages-inner li:nth-child(3) { transform: rotateY(-118deg); transition-duration: 1.6s; } .book:hover > .pages-inner li:nth-child(4) { transform: rotateY(-130deg); transition-duration: 1.4s; } .book:hover > .pages-inner li:nth-child(5) { transform: rotateY(-140deg); transition-duration: 1.2s; }
126
Book page animation
By:
rald_dev
1
2
3
…
10
Next