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; }
377
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); } }
134
J.A.R.V.I.S Animation
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; }
130
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"); }
118
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; }
114
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); }
108
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);} }
102
Animated Button
By:
rald_dev
Happy birthday
Wilbertgwapo
.body{ display: flex; justify-content: center; height: 100vh; background: #240229; } .loader{ margin-top:8%; position: relative; width: 70%; height: 70%; border-radius: 5% ; background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0); animation: animate 0.5s linear infinite; } .loader span{ position: absolute; width: 100%; height: 100%; border-radius: 5% ; background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0); animation: animate 0.5s linear infinite; } .loader span:nth-child(1){ filter: blur(5px); } .loader span:nth-child(2){ filter: blur(10px); } .loader span:nth-child(3){ filter: blur(25px); } .loader span:nth-child(4){ filter: blur(50px); } .loader:after{ content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background: #240229; border-radius: 5%; } h1{ position: absolute; margin: 0%; padding: 0%; margin-top: 12%; letter-spacing: 5px; color: rgb(196, 146, 230); font-family: "Comic Sans MS", cursive, sans-serif; } q{ position: absolute; margin: 0%; padding: 0%; margin-top: 20%; color: rgb(196, 146, 230); font-family: "Comic Sans MS", cursive, sans-serif; } .glow { -webkit-animation-duration: 1s; -webkit-animation-name: glow; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-duration: 1s; animation-name: glow; animation-direction: alternate; animation-iteration-count: infinite; } @-webkit-keyframes glow { from { text-shadow: 0 0 0px rgb(196, 146, 230); } to { text-shadow: 0 0 20px rgb(196, 146, 230); } }
99
Happy birthday banner
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%); }
98
Perpetual 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; } }
98
Line 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);}; }
97
Box dots 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; }
97
Book page animation
By:
rald_dev
1
2
3
…
10
Next