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; }
368
Button
By:
pixeldev
.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; }
119
CodePen Home Pure CSS Logo Slider Responsive
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); } }
109
J.A.R.V.I.S Animation
By:
rald_dev
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"); }
101
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; }
100
Flickering 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); }
98
Card
By:
pixeldev
*{ 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%); }
89
Perpetual Animation
By:
rald_dev
.spinnerContainer { height:40px; width:40px; position:relative; margin:100px auto 0 auto; } .spinnerContainer div { height: 20px; width: 20px; border-radius: 50%; background: #c1bebe; position: absolute; top: 0; left: 0; } .spinnerContainer .ball1 { background:red; z-index:1; -moz-animation: spinner1 4s infinite ease-in-out; -webkit-animation: spinner1 4s infinite ease-in-out; } .spinnerContainer .ball2 { transform: translate(30px,0); -moz-animation: spinner2 4s infinite ease-in-out; -webkit-animation: spinner2 4s infinite ease-in-out; } .spinnerContainer .ball3 { transform: translate(30px, 30px); -moz-animation: spinner3 4s infinite ease-in-out; -webkit-animation: spinner3 4s infinite ease-in-out; } .spinnerContainer .ball4 { transform: translate(0,30px); -moz-animation: spinner4 4s infinite ease-in-out; -webkit-animation: spinner4 4s infinite ease-in-out; } .spinnerContainer .ball5 { -moz-animation: spinner5 4s infinite ease-in-out; -webkit-animation: spinner5 4s infinite ease-in-out; } @-moz-keyframes spinner1 { 0% {-moz-transform: translate(0,0);} 12.5% {-moz-transform: translate(30px,0);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(30px,0);} 75% {-moz-transform: translate(30px,30px);} 87.5% {-moz-transform: translate(0,30px);} 100% {-moz-transform: translate(0,0);}; } @-webkit-keyframes spinner1 { 0% {-webkit-transform: translate(0,0);} 12.5% {-webkit-transform: translate(30px,0);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,30px);} 87.5% {-webkit-transform: translate(0,30px);} 100% {-webkit-transform: translate(0,0);}; } @-moz-keyframes spinner2 { 0% {-moz-transform: translate(30px,0);} 12.5% {-moz-transform: translate(30px,0);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(30px,0);} 75% {-moz-transform: translate(30px,0);} 87.5% {-moz-transform: translate(30px,0);} 100% {-moz-transform: translate(30px,0);}; } @-webkit-keyframes spinner2 { 0% {-webkit-transform: translate(30px,0);} 12.5% {-webkit-transform: translate(30px,0);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,0);} 87.5% {-webkit-transform: translate(30px,0);} 100% {-webkit-transform: translate(30px,0);}; } @-moz-keyframes spinner3 { 0% {-moz-transform: translate(30px,30px);} 12.5% {-moz-transform: translate(30px,30px);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(30px,0);} 75% {-moz-transform: translate(30px,30px);} 87.5% {-moz-transform: translate(30px,30px);} 100% {-moz-transform: translate(30px,30px);}; } @-webkit-keyframes spinner3 { 0% {-webkit-transform: translate(30px,30px);} 12.5% {-webkit-transform: translate(30px,30px);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,30px);} 87.5% {-webkit-transform: translate(30px,30px);} 100% {-webkit-transform: translate(30px,30px);}; } @-moz-keyframes spinner4 { 0% {-moz-transform: translate(0,50px);} 12.5% {-moz-transform: translate(0,50px);} 25% {-moz-transform: translate(0,50px);} 37.5% {-moz-transform: translate(0,50px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(50px,0);} 75% {-moz-transform: translate(50px,50px);} 87.5% {-moz-transform: translate(0,50px);} 100% {-moz-transform: translate(0,50px);}; } @-webkit-keyframes spinner4 { 0% {-webkit-transform: translate(0,30px);} 12.5% {-webkit-transform: translate(0,30px);} 25% {-webkit-transform: translate(0,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(30px,0);} 75% {-webkit-transform: translate(30px,30px);} 87.5% {-webkit-transform: translate(0,30px);} 100% {-webkit-transform: translate(0,30px);}; } @-moz-keyframes spinner5 { 0% {-moz-transform: translate(0,0);} 12.5% {-moz-transform: translate(30px,0);} 25% {-moz-transform: translate(30px,30px);} 37.5% {-moz-transform: translate(0,30px);} 50% {-moz-transform: translate(0,0);} 62.5% {-moz-transform: translate(0,0);} 75% {-moz-transform: translate(0,0);} 87.5% {-moz-transform: translate(0,0);} 100% {-moz-transform: translate(0,0);}; } @-webkit-keyframes spinner5 { 0% {-webkit-transform: translate(0,0);} 12.5% {-webkit-transform: translate(30px,0);} 25% {-webkit-transform: translate(30px,30px);} 37.5% {-webkit-transform: translate(0,30px);} 50% {-webkit-transform: translate(0,0);} 62.5% {-webkit-transform: translate(0,0);} 75% {-webkit-transform: translate(0,0);} 87.5% {-webkit-transform: translate(0,0);} 100% {-webkit-transform: translate(0,0);}; }
87
Box dots animation
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; } }
84
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; }
84
Book page animation
By:
rald_dev
body { background: #0a3f63; margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .container { height: 250px; width: 250px; position: relative; } .circle { position: absolute; height: 100%; width: 100%; border-radius: 50%; animation: rotate 3s linear infinite; } .circle::before { content: ""; position: absolute; height: 10px; width: 50px; background-color: #fff; border-radius: 5px; top: -6px; left: 50%; transform: translateX(-50%); } .ball { position: absolute; height: 35px; width: 35px; border-radius: 50%; background-color: #fe95ff; top: 20px; left: 50%; transform: translateX(-50%); animation: move 1.5s ease-in alternate infinite; } @keyframes rotate { from { } to { transform: rotate(360deg); } } @keyframes move { from { box-shadow: 0 10px 0 -1px #fe95ffaa, 0 20px 0 -2px #fe95ffaa; } to { top: 220px; box-shadow: 0 -10px 0 -1px #fe95ffaa, 0 -20px 0 -2px #fe95ff55; } }
80
Bouncing ball v2
By:
rald_dev
body { background: #ddd; } #ball { width: 150px; height: 150px; border-radius: 50%; position: fixed; top: 100px; left: 50%; transform: translate(-50%, -50%); background: #0075c9; background: linear-gradient(to top, #0075c9 0%,#0060a5 10%,#005089 25%,#0060a5 42%,#007fe0 73%,#2f9fef 100%); box-shadow: 0px 100px 100px 0px rgba(0,0,0,0.1); animation-name: bounce; animation-duration: 1.25s; animation-iteration-count: infinite; } @keyframes bounce { 50% { top: 60%; animation-timing-function: ease-out; height: 120px; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75); } }
80
Bouncing ball
By:
rald_dev
1
2
3
…
10
Next