Log in
Start Coding
All
Accordion
border
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } body { min-block-size: 100vh; display: grid; place-content: center; background: linear-gradient(to bottom, hsl(193 7 89), hsl(193 8 84)); } .wrapper { --bg-base: linear-gradient(180deg, #fffb, #fffa 30%, 70%, #0001, #0002 110%), radial-gradient(110% 50% at 50% 17%, #fffc 13%, 22%, #0003 60%), hsl(196 19 96); --bg-accent: linear-gradient(to bottom, #0000 60%, #fffa), radial-gradient(110% 40% at 50% 17%, hsl(196 29 96) 10%, 23%, #0002), hsl(196 19 96); --shadow-base: 0 0.4375em 0.3125em 0 #0005, 0 0 0.3125em 0.125em #1334, inset 0 -0.0625em 0.5em -0.125em #fffa; --shadow-accent: inset 0 0.25em 0.25em 0.125em #0005, inset 0 -0.25em 0.5em 0.0625em #0005, 0 0 0.1em 0.1em #111a; display: grid; position: relative; inline-size: 10rem; aspect-ratio: 1; border-radius: 50%; transform-style: preserve-3d; background: linear-gradient(to bottom, hsl(193 8 75), 38%, hsl(193 13 94)); box-shadow: inset 0 0px 3px 0px #fff7, inset 0 2px 3px 0px #0004; } button { place-self: center; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); border-radius: inherit; border: none; isolation: isolate; position: relative; } button:focus { transform: scale(0.96); } span { display: grid; place-self: center; width: 3rem; height: 3rem; border-radius: 50%; color: red; } svg { place-self: center; width: 100%; height: 100%; fill: hsl(203 89 52); stroke: hsl(203 89 50); stroke-width: 0.5; filter: drop-shadow(0 0 2px #fffb); mix-blend-mode: color-dodge; transition: all 230ms cubic-bezier(0.1, 0.29, 0.5, 1.26); } button::after, button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity 230ms cubic-bezier(0.1, 0.29, 0.5, 1.26); } button::after { background: var(--bg-base); box-shadow: var(--shadow-base); z-index: -1; } button::before { background: var(--bg-accent); box-shadow: var(--shadow-accent); opacity: 0; } button:focus::after { opacity: 0; } button:focus::before { opacity: 1; } button:where(:focus, :hover) svg { scale: 0.93; mix-blend-mode: unset; } button:active svg { cale: 0.86; }
11
Power on/off Button
By:
Nethan Pogi
:root { --gray: #e0e5ec; --size: 25vw; --scalingFactor: calc(100 / 25); /*related to size*/ } body { background: var(--gray); margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; } .dot, .trigger { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: var(--size); width: var(--size); margin: 10px; background: var(--gray); box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5); border-radius: 50%; } .trigger { z-index: 3; display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.5); letter-spacing: 0.05em; cursor: pointer; } .trigger:before { content:'click me' } #trigger:checked + .trigger:before { content: 'reset' } #trigger:checked + .trigger + .dots > .dot { animation-name: wave; animation-timing-function: ease-in-out; animation-duration: 2s; animation-fill-mode: forwards; } .dot { opacity: 1; transform: translate3d(-50%,-50%,0) scale3d(0,0,1); } .dot:nth-of-type(2) { z-index: 1; animation-delay: .5s; } .dot:nth-of-type(3) { z-index: 2; animation-delay: 1s; } @keyframes wave{ 0% { opacity: 1; transform: translate3d(-50%,-50%,0) scale3d(1,1,1); } 100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale3d(var(--scalingFactor),var(--scalingFactor),1); } }
10
On Click Ripple Effect
By:
Nethan Pogi
body { background-color: #3498DB; overflow: hidden; } div { margin: 175px auto; } .drop { position: relative; width: 20px; height: 20px; top: -30px; margin: 0 auto; background: #FFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-animation-name: drip; -webkit-animation-name: drip; animation-name: drip; -moz-animation-timing-function: cubic-bezier(1,0,.91,.19); -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19); animation-timing-function: cubic-bezier(1,0,.91,.19); -moz-animation-duration: 2s; -webkit-animation-duration: 2s; animation-duration: 2s; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .drop:before { content: ""; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid rgba(255,255,255,1); top: -22px; } .wave { position: relative; opacity: 0; top: 0; width: 2px; height: 1px; border: #FFF 7px solid; -moz-border-radius: 300px / 150px; -webkit-border-radius: 300px / 150px; border-radius: 300px / 150px; -moz-animation-name: ripple; -webkit-animation-name: ripple; animation-name: ripple; -moz-animation-delay: 2s; -webkit-animation-delay: 2s; animation-delay: 2s; -moz-animation-duration: 2s; -webkit-animation-duration: 2s; animation-duration: 2s; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .wave:after { content: ""; position: absolute; opacity: 0; top: -5px; left: -5px; width: 2px; height: 1px; border: #FFF 5px solid; -moz-border-radius: 300px / 150px; -webkit-border-radius: 300px / 150px; border-radius: 300px / 150px; -moz-animation-name: ripple-2; -webkit-animation-name: ripple-2; animation-name: ripple-2; -moz-animation-duration: 2s; -webkit-animation-duration: 2s; animation-duration: 2s; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes ripple { from { opacity: 1; } to { width: 600px; height: 300px; border-width: 1px; top: -100px; opacity: 0; } } @keyframes ripple-2 { 0% { opacity: 1; } 50% { opacity: 0; } 100% { width: 200px; height: 100px; border-width: 1px; top: 100px; left: 200px; } } @keyframes drip { to { top: 190px; } }
10
Drip Drop
By:
Nethan Pogi
Check Out My Other Pens
body{ padding: 0; margin: 0; background: #1E1E22; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; } .btn{ height: 50px; width: 50px; margin: 20px; border-radius: 50%; cursor: pointer; } .btn1{ background: #fac536; position: relative; overflow: hidden; } .btn1::before{ content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 10%; opacity: 0; background: #222; transition: 300ms; } .btn1:hover::before{ opacity: 1; top: 50%; } .btn2{ background: #39ea49; position: relative; overflow: hidden; } .btn2::before{ content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); width: 45%; height: 45%; opacity: 0; background: #222; transition: 300ms; } .btn2::after{ content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 15%; height: 80%; opacity: 0; background: #39ea49; transition: 300ms; } .btn2:hover::before, .btn2:hover::after{ opacity: 1; top: 50%; } .btn3{ background: #f25056; position: relative; overflow: hidden; } .btn3::before{ content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 15%; height: 50%; opacity: 0; background: #222; transition: 300ms; } .btn3::after{ content: ''; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 15%; opacity: 0; height: 50%; background: #222; transition: 300ms; } .btn3:hover::before, .btn3:hover::after{ opacity: 1; top: 50%; } a{ text-decoration: none; position: absolute; right: 20px; bottom: 20px; color: #fff; font-family: sans-serif; font-size: .9rem; } a:hover{ opacity: .8; border-bottom: 1px solid rgba(255, 255, 255, .8); }
10
Hover Icons
By:
Nethan Pogi
body { overflow:hidden; background-color:#000030; background-image:url("https://images.unsplash.com/photo-1536152470836-b943b246224c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1476&q=80"); background-size:100%; background-position:center; } @media only screen and (max-width: 600px) { body { background-size: auto; background-position: right; } } .starfall { position: absolute; height: 100%; width: 100%; top: 0; left: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px; z-index: 0; } .starfall .falling-star { width: 8px; height: 8px; background: #00d1b2; position: absolute; border-radius: 50%; opacity: 0.5; } .falling-star:nth-child(1) { -webkit-transform: translateX(68vw) translateY(-8px); transform: translateX(68vw) translateY(-8px); -webkit-animation: anim1 4s infinite; animation: anim1 4s infinite; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } @-webkit-keyframes anim1 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(88vw) translateY(100vh); transform: translateX(88vw) translateY(100vh); opacity: 0; } } @keyframes anim1 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(88vw) translateY(100vh); transform: translateX(88vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(2) { -webkit-transform: translateX(57vw) translateY(-8px); transform: translateX(57vw) translateY(-8px); -webkit-animation: anim2 4s infinite; animation: anim2 4s infinite; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes anim2 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(77vw) translateY(100vh); transform: translateX(77vw) translateY(100vh); opacity: 0; } } @keyframes anim2 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(77vw) translateY(100vh); transform: translateX(77vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(3) { -webkit-transform: translateX(70vw) translateY(-8px); transform: translateX(70vw) translateY(-8px); -webkit-animation: anim3 4s infinite; animation: anim3 4s infinite; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes anim3 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(90vw) translateY(100vh); transform: translateX(90vw) translateY(100vh); opacity: 0; } } @keyframes anim3 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(90vw) translateY(100vh); transform: translateX(90vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(4) { -webkit-transform: translateX(54vw) translateY(-8px); transform: translateX(54vw) translateY(-8px); -webkit-animation: anim4 4s infinite; animation: anim4 4s infinite; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes anim4 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } @keyframes anim4 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(5) { -webkit-transform: translateX(85vw) translateY(-8px); transform: translateX(85vw) translateY(-8px); -webkit-animation: anim5 4s infinite; animation: anim5 4s infinite; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } @-webkit-keyframes anim5 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(105vw) translateY(100vh); transform: translateX(105vw) translateY(100vh); opacity: 0; } } @keyframes anim5 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(105vw) translateY(100vh); transform: translateX(105vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(6) { -webkit-transform: translateX(59vw) translateY(-8px); transform: translateX(59vw) translateY(-8px); -webkit-animation: anim6 4s infinite; animation: anim6 4s infinite; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } @-webkit-keyframes anim6 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(79vw) translateY(100vh); transform: translateX(79vw) translateY(100vh); opacity: 0; } } @keyframes anim6 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(79vw) translateY(100vh); transform: translateX(79vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(7) { -webkit-transform: translateX(33vw) translateY(-8px); transform: translateX(33vw) translateY(-8px); -webkit-animation: anim7 4s infinite; animation: anim7 4s infinite; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } @-webkit-keyframes anim7 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(53vw) translateY(100vh); transform: translateX(53vw) translateY(100vh); opacity: 0; } } @keyframes anim7 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(53vw) translateY(100vh); transform: translateX(53vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(8) { -webkit-transform: translateX(82vw) translateY(-8px); transform: translateX(82vw) translateY(-8px); -webkit-animation: anim8 4s infinite; animation: anim8 4s infinite; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } @-webkit-keyframes anim8 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(102vw) translateY(100vh); transform: translateX(102vw) translateY(100vh); opacity: 0; } } @keyframes anim8 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(102vw) translateY(100vh); transform: translateX(102vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(9) { -webkit-transform: translateX(24vw) translateY(-8px); transform: translateX(24vw) translateY(-8px); -webkit-animation: anim9 4s infinite; animation: anim9 4s infinite; -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } @-webkit-keyframes anim9 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(44vw) translateY(100vh); transform: translateX(44vw) translateY(100vh); opacity: 0; } } @keyframes anim9 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(44vw) translateY(100vh); transform: translateX(44vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(10) { -webkit-transform: translateX(54vw) translateY(-8px); transform: translateX(54vw) translateY(-8px); -webkit-animation: anim10 4s infinite; animation: anim10 4s infinite; -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes anim10 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } @keyframes anim10 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(11) { -webkit-transform: translateX(11vw) translateY(-8px); transform: translateX(11vw) translateY(-8px); -webkit-animation: anim11 4s infinite; animation: anim11 4s infinite; -webkit-animation-delay: 3.3s; animation-delay: 3.3s; } @-webkit-keyframes anim11 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(31vw) translateY(100vh); transform: translateX(31vw) translateY(100vh); opacity: 0; } } @keyframes anim11 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(31vw) translateY(100vh); transform: translateX(31vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(12) { -webkit-transform: translateX(14vw) translateY(-8px); transform: translateX(14vw) translateY(-8px); -webkit-animation: anim12 4s infinite; animation: anim12 4s infinite; -webkit-animation-delay: 3.6s; animation-delay: 3.6s; } @-webkit-keyframes anim12 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(34vw) translateY(100vh); transform: translateX(34vw) translateY(100vh); opacity: 0; } } @keyframes anim12 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(34vw) translateY(100vh); transform: translateX(34vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(13) { -webkit-transform: translateX(66vw) translateY(-8px); transform: translateX(66vw) translateY(-8px); -webkit-animation: anim13 4s infinite; animation: anim13 4s infinite; -webkit-animation-delay: 3.9s; animation-delay: 3.9s; } @-webkit-keyframes anim13 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(86vw) translateY(100vh); transform: translateX(86vw) translateY(100vh); opacity: 0; } } @keyframes anim13 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(86vw) translateY(100vh); transform: translateX(86vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(14) { -webkit-transform: translateX(64vw) translateY(-8px); transform: translateX(64vw) translateY(-8px); -webkit-animation: anim14 4s infinite; animation: anim14 4s infinite; -webkit-animation-delay: 4.2s; animation-delay: 4.2s; } @-webkit-keyframes anim14 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(84vw) translateY(100vh); transform: translateX(84vw) translateY(100vh); opacity: 0; } } @keyframes anim14 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(84vw) translateY(100vh); transform: translateX(84vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(15) { -webkit-transform: translateX(3vw) translateY(-8px); transform: translateX(3vw) translateY(-8px); -webkit-animation: anim15 4s infinite; animation: anim15 4s infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } @-webkit-keyframes anim15 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(23vw) translateY(100vh); transform: translateX(23vw) translateY(100vh); opacity: 0; } } @keyframes anim15 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(23vw) translateY(100vh); transform: translateX(23vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(16) { -webkit-transform: translateX(78vw) translateY(-8px); transform: translateX(78vw) translateY(-8px); -webkit-animation: anim16 4s infinite; animation: anim16 4s infinite; -webkit-animation-delay: 4.8s; animation-delay: 4.8s; } @-webkit-keyframes anim16 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(98vw) translateY(100vh); transform: translateX(98vw) translateY(100vh); opacity: 0; } } @keyframes anim16 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(98vw) translateY(100vh); transform: translateX(98vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(17) { -webkit-transform: translateX(98vw) translateY(-8px); transform: translateX(98vw) translateY(-8px); -webkit-animation: anim17 4s infinite; animation: anim17 4s infinite; -webkit-animation-delay: 5.1s; animation-delay: 5.1s; } @-webkit-keyframes anim17 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(118vw) translateY(100vh); transform: translateX(118vw) translateY(100vh); opacity: 0; } } @keyframes anim17 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(118vw) translateY(100vh); transform: translateX(118vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(18) { -webkit-transform: translateX(34vw) translateY(-8px); transform: translateX(34vw) translateY(-8px); -webkit-animation: anim18 4s infinite; animation: anim18 4s infinite; -webkit-animation-delay: 5.4s; animation-delay: 5.4s; } @-webkit-keyframes anim18 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(54vw) translateY(100vh); transform: translateX(54vw) translateY(100vh); opacity: 0; } } @keyframes anim18 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(54vw) translateY(100vh); transform: translateX(54vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(19) { -webkit-transform: translateX(54vw) translateY(-8px); transform: translateX(54vw) translateY(-8px); -webkit-animation: anim19 4s infinite; animation: anim19 4s infinite; -webkit-animation-delay: 5.7s; animation-delay: 5.7s; } @-webkit-keyframes anim19 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } @keyframes anim19 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(20) { -webkit-transform: translateX(71vw) translateY(-8px); transform: translateX(71vw) translateY(-8px); -webkit-animation: anim20 4s infinite; animation: anim20 4s infinite; -webkit-animation-delay: 6s; animation-delay: 6s; } @-webkit-keyframes anim20 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(91vw) translateY(100vh); transform: translateX(91vw) translateY(100vh); opacity: 0; } } @keyframes anim20 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(91vw) translateY(100vh); transform: translateX(91vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(21) { -webkit-transform: translateX(100vw) translateY(-8px); transform: translateX(100vw) translateY(-8px); -webkit-animation: anim21 4s infinite; animation: anim21 4s infinite; -webkit-animation-delay: 6.3s; animation-delay: 6.3s; } @-webkit-keyframes anim21 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(120vw) translateY(100vh); transform: translateX(120vw) translateY(100vh); opacity: 0; } } @keyframes anim21 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(120vw) translateY(100vh); transform: translateX(120vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(22) { -webkit-transform: translateX(26vw) translateY(-8px); transform: translateX(26vw) translateY(-8px); -webkit-animation: anim22 4s infinite; animation: anim22 4s infinite; -webkit-animation-delay: 6.6s; animation-delay: 6.6s; } @-webkit-keyframes anim22 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(46vw) translateY(100vh); transform: translateX(46vw) translateY(100vh); opacity: 0; } } @keyframes anim22 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(46vw) translateY(100vh); transform: translateX(46vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(23) { -webkit-transform: translateX(89vw) translateY(-8px); transform: translateX(89vw) translateY(-8px); -webkit-animation: anim23 4s infinite; animation: anim23 4s infinite; -webkit-animation-delay: 6.9s; animation-delay: 6.9s; } @-webkit-keyframes anim23 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(109vw) translateY(100vh); transform: translateX(109vw) translateY(100vh); opacity: 0; } } @keyframes anim23 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(109vw) translateY(100vh); transform: translateX(109vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(24) { -webkit-transform: translateX(42vw) translateY(-8px); transform: translateX(42vw) translateY(-8px); -webkit-animation: anim24 4s infinite; animation: anim24 4s infinite; -webkit-animation-delay: 7.2s; animation-delay: 7.2s; } @-webkit-keyframes anim24 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(62vw) translateY(100vh); transform: translateX(62vw) translateY(100vh); opacity: 0; } } @keyframes anim24 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(62vw) translateY(100vh); transform: translateX(62vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(25) { -webkit-transform: translateX(3vw) translateY(-8px); transform: translateX(3vw) translateY(-8px); -webkit-animation: anim25 4s infinite; animation: anim25 4s infinite; -webkit-animation-delay: 7.5s; animation-delay: 7.5s; } @-webkit-keyframes anim25 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(23vw) translateY(100vh); transform: translateX(23vw) translateY(100vh); opacity: 0; } } @keyframes anim25 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(23vw) translateY(100vh); transform: translateX(23vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(26) { -webkit-transform: translateX(24vw) translateY(-8px); transform: translateX(24vw) translateY(-8px); -webkit-animation: anim26 4s infinite; animation: anim26 4s infinite; -webkit-animation-delay: 7.8s; animation-delay: 7.8s; } @-webkit-keyframes anim26 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(44vw) translateY(100vh); transform: translateX(44vw) translateY(100vh); opacity: 0; } } @keyframes anim26 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(44vw) translateY(100vh); transform: translateX(44vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(27) { -webkit-transform: translateX(19vw) translateY(-8px); transform: translateX(19vw) translateY(-8px); -webkit-animation: anim27 4s infinite; animation: anim27 4s infinite; -webkit-animation-delay: 8.1s; animation-delay: 8.1s; } @-webkit-keyframes anim27 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(39vw) translateY(100vh); transform: translateX(39vw) translateY(100vh); opacity: 0; } } @keyframes anim27 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(39vw) translateY(100vh); transform: translateX(39vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(28) { -webkit-transform: translateX(81vw) translateY(-8px); transform: translateX(81vw) translateY(-8px); -webkit-animation: anim28 4s infinite; animation: anim28 4s infinite; -webkit-animation-delay: 8.4s; animation-delay: 8.4s; } @-webkit-keyframes anim28 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(101vw) translateY(100vh); transform: translateX(101vw) translateY(100vh); opacity: 0; } } @keyframes anim28 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(101vw) translateY(100vh); transform: translateX(101vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(29) { -webkit-transform: translateX(40vw) translateY(-8px); transform: translateX(40vw) translateY(-8px); -webkit-animation: anim29 4s infinite; animation: anim29 4s infinite; -webkit-animation-delay: 8.7s; animation-delay: 8.7s; } @-webkit-keyframes anim29 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(60vw) translateY(100vh); transform: translateX(60vw) translateY(100vh); opacity: 0; } } @keyframes anim29 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(60vw) translateY(100vh); transform: translateX(60vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(30) { -webkit-transform: translateX(75vw) translateY(-8px); transform: translateX(75vw) translateY(-8px); -webkit-animation: anim30 4s infinite; animation: anim30 4s infinite; -webkit-animation-delay: 9s; animation-delay: 9s; } @-webkit-keyframes anim30 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(95vw) translateY(100vh); transform: translateX(95vw) translateY(100vh); opacity: 0; } } @keyframes anim30 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(95vw) translateY(100vh); transform: translateX(95vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(31) { -webkit-transform: translateX(73vw) translateY(-8px); transform: translateX(73vw) translateY(-8px); -webkit-animation: anim31 4s infinite; animation: anim31 4s infinite; -webkit-animation-delay: 9.3s; animation-delay: 9.3s; } @-webkit-keyframes anim31 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(93vw) translateY(100vh); transform: translateX(93vw) translateY(100vh); opacity: 0; } } @keyframes anim31 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(93vw) translateY(100vh); transform: translateX(93vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(32) { -webkit-transform: translateX(4vw) translateY(-8px); transform: translateX(4vw) translateY(-8px); -webkit-animation: anim32 4s infinite; animation: anim32 4s infinite; -webkit-animation-delay: 9.6s; animation-delay: 9.6s; } @-webkit-keyframes anim32 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(24vw) translateY(100vh); transform: translateX(24vw) translateY(100vh); opacity: 0; } } @keyframes anim32 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(24vw) translateY(100vh); transform: translateX(24vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(33) { -webkit-transform: translateX(97vw) translateY(-8px); transform: translateX(97vw) translateY(-8px); -webkit-animation: anim33 4s infinite; animation: anim33 4s infinite; -webkit-animation-delay: 9.9s; animation-delay: 9.9s; } @-webkit-keyframes anim33 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(117vw) translateY(100vh); transform: translateX(117vw) translateY(100vh); opacity: 0; } } @keyframes anim33 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(117vw) translateY(100vh); transform: translateX(117vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(34) { -webkit-transform: translateX(48vw) translateY(-8px); transform: translateX(48vw) translateY(-8px); -webkit-animation: anim34 4s infinite; animation: anim34 4s infinite; -webkit-animation-delay: 10.2s; animation-delay: 10.2s; } @-webkit-keyframes anim34 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(68vw) translateY(100vh); transform: translateX(68vw) translateY(100vh); opacity: 0; } } @keyframes anim34 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(68vw) translateY(100vh); transform: translateX(68vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(35) { -webkit-transform: translateX(44vw) translateY(-8px); transform: translateX(44vw) translateY(-8px); -webkit-animation: anim35 4s infinite; animation: anim35 4s infinite; -webkit-animation-delay: 10.5s; animation-delay: 10.5s; } @-webkit-keyframes anim35 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(64vw) translateY(100vh); transform: translateX(64vw) translateY(100vh); opacity: 0; } } @keyframes anim35 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(64vw) translateY(100vh); transform: translateX(64vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(36) { -webkit-transform: translateX(45vw) translateY(-8px); transform: translateX(45vw) translateY(-8px); -webkit-animation: anim36 4s infinite; animation: anim36 4s infinite; -webkit-animation-delay: 10.8s; animation-delay: 10.8s; } @-webkit-keyframes anim36 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(65vw) translateY(100vh); transform: translateX(65vw) translateY(100vh); opacity: 0; } } @keyframes anim36 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(65vw) translateY(100vh); transform: translateX(65vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(37) { -webkit-transform: translateX(69vw) translateY(-8px); transform: translateX(69vw) translateY(-8px); -webkit-animation: anim37 4s infinite; animation: anim37 4s infinite; -webkit-animation-delay: 11.1s; animation-delay: 11.1s; } @-webkit-keyframes anim37 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(89vw) translateY(100vh); transform: translateX(89vw) translateY(100vh); opacity: 0; } } @keyframes anim37 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(89vw) translateY(100vh); transform: translateX(89vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(38) { -webkit-transform: translateX(19vw) translateY(-8px); transform: translateX(19vw) translateY(-8px); -webkit-animation: anim38 4s infinite; animation: anim38 4s infinite; -webkit-animation-delay: 11.4s; animation-delay: 11.4s; } @-webkit-keyframes anim38 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(39vw) translateY(100vh); transform: translateX(39vw) translateY(100vh); opacity: 0; } } @keyframes anim38 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(39vw) translateY(100vh); transform: translateX(39vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(39) { -webkit-transform: translateX(71vw) translateY(-8px); transform: translateX(71vw) translateY(-8px); -webkit-animation: anim39 4s infinite; animation: anim39 4s infinite; -webkit-animation-delay: 11.7s; animation-delay: 11.7s; } @-webkit-keyframes anim39 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(91vw) translateY(100vh); transform: translateX(91vw) translateY(100vh); opacity: 0; } } @keyframes anim39 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(91vw) translateY(100vh); transform: translateX(91vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(40) { -webkit-transform: translateX(31vw) translateY(-8px); transform: translateX(31vw) translateY(-8px); -webkit-animation: anim40 4s infinite; animation: anim40 4s infinite; -webkit-animation-delay: 12s; animation-delay: 12s; } @-webkit-keyframes anim40 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(51vw) translateY(100vh); transform: translateX(51vw) translateY(100vh); opacity: 0; } } @keyframes anim40 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(51vw) translateY(100vh); transform: translateX(51vw) translateY(100vh); opacity: 0; } } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; z-index: 200; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; } @-webkit-keyframes move { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0; } 10%, 90% { opacity: 1; } 100% { -webkit-transform: translateY(45vw); transform: translateY(45vw); opacity: 0; } } @keyframes move { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0; } 10%, 90% { opacity: 1; } 100% { -webkit-transform: translateY(45vw); transform: translateY(45vw); opacity: 0; } }
10
Animated Starfall Background
By:
Nethan Pogi
P
I
X
E
L
D
E
V
C
O
D
E
C
S
S
i
s
a
w
e
s
o
m
e
P
I
X
E
L
D
E
V
C
O
D
E
C
S
S
i
s
a
w
e
s
o
m
e
@import url("https://fonts.googleapis.com/css?family=Roboto: 700"); *, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: Roboto, sans-serif; background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; overflow: hidden; perspective: 600px; * { transform-style: preserve-3d; } } .scene { position: relative; * { position: absolute; } } .texts { font-size: 6vmin; animation: texts 12s infinite linear; &::after { content: ''; position: absolute; inset: -7.5em -1.5em; background-image: linear-gradient(to right, transparent, 10%, black, 90%, transparent); } } .text { animation: text 8s calc(var(--text) * -2s) infinite linear; color: hsl(calc(var(--text) * 90) 75% 75%); span { inset: -1em; display: grid; place-items: center; font-weight: 700; user-select: none; transform: translateY(calc((var(--i) - 6) * 0.6em)) rotateY(calc(var(--i) * 20deg)) translateZ(1.5em) rotateZ(-40deg); } } @keyframes texts { from { transform: rotateZ(0deg) rotateX(20deg) rotateZ(360deg); } to { transform: rotateZ(360deg) rotateX(20deg) rotateZ(0deg); } } @keyframes text { to { rotate: y -1turn; } }
10
3D Text Spiral Animation
By:
Nethan Pogi
+ Add to cart
div { height: 100dvh; display: grid; place-items: center; padding: 0; margin: 0; } .btn-container { background-color: transparent; backdrop-filter: blur(10px); display: grid; place-items: center; position: relative; border: 1px solid; border-color: #ffff #ccc4; height: fit-content; padding: 0.9em; border-radius: 21px; &::after { content: ""; display: block; position: absolute; inset: 0; background-color: #fafafa80; border-radius: inherit; } &::before { content: ""; display: block; position: absolute; inset: -0.15em; background: conic-gradient( from var(--rotation), red, orange, yellow, green, blue, indigo, purple ); border-radius: inherit; filter: blur(1em) opacity(0.5); z-index: -1; animation: 2.5s linear infinite rotating; } &:has(:active) { &::before { filter: blur(0.25em) opacity(0.5); transform: scalex(0.9) scaley(0.8); } } } button { background-image: linear-gradient(0deg, #323232, #444); color: #fff; font-family: "VT323", monospace; font-size: 50px; padding: 0.25em 0.5em; border-radius: 15px; border: 1px solid #fff2; cursor: pointer; box-shadow: 0 0.1em 0.15em #3338; z-index: 1; & span { display: block; background-image: linear-gradient(0deg, #444, #323232); padding: 0.25em 0.5em; border-radius: 50px; border: 1px solid #3338; } &:active { transform: scalex(0.95) scaley(0.9); } } @keyframes rotating { from { --rotation: 0deg; } to { --rotation: 360deg; } }
10
Stylish Add to cart Button
By:
Nethan Pogi
body { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3rem; overflow: hidden; margin: 0; min-height: 100vh; box-sizing: border-box; background-image: linear-gradient(45deg, #223, #112); background: radial-gradient(at 100% 0, #fff2, #fff0 50%), radial-gradient(at 0% 100%, #0002, #0000 50%), #545153; } @property --x { syntax: '
'; inherits: true; initial-value: 1deg; } @property --c { syntax: '
'; inherits: true; initial-value: #0000; } .neon { --x: 1deg; --c: #0000; --color: #0ff; font-size: 3rem; appearance: none; position: relative; aspect-ratio: 2; border-radius: 100em; background: linear-gradient(to bottom right, #0001, #0000), #444143; width: 3em; box-shadow: inset 0 0 0.25em -0.25em #0008, inset 0.05em 0.05em 0.2em #000811, inset -0.05em -0.05em 0.15em 0.05em #ccc1, 0 0 0 0.11em #545153 ; transition: --x 0.5s, --c 0.5s, box-shadow 0.5s; filter: drop-shadow(0 0 0.2em var(--c)); &::before { content: ""; position: absolute; height: 80%; aspect-ratio: 1; top: 50%; left: 25%; transform: translate(-50%, -50%); background: radial-gradient(#0000 15%, #343133 16%, #545153 20%), repeating-linear-gradient(#0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat, repeating-linear-gradient(90deg, #0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat, radial-gradient(var(--c) 17%, #0000 0), #545153; box-shadow: inset -0.05em -0.05em 0.1em #0008, inset 0.05em 0.05em 0.1em #ffffff22, inset 0.05em 0em 0.1em -0.065em var(--c), 0.1em 0.1em 0.15em #000c; border-radius: 50%; transition: left 0.5s, box-shadow 0.1s; } &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 0.25em); height: calc(100% + 0.25em); border: 0.1em solid var(--color); border-radius: 100em; -webkit-mask: conic-gradient(from calc(270deg - var(--x)), #000 calc(2 * var(--x)), #0001 0); box-shadow: 0 0 0 2em #0000; /* hack for safari */ } &:hover { --x: 3deg; --c: #0ff5; --c: rgb(from var(--color) r g b / 25%); box-shadow: inset 0 0 0.25em -0.25em #0008, inset 0.05em 0.05em 0.2em #000811, inset -0.05em -0.05em 0.15em 0.05em #ccc1, 0 0 0.05em 0.075em #545153 ; } &:checked { --x: 180deg; --c: var(--color); box-shadow: inset 0 0 0.25em -0.25em #0008, inset 0.05em 0.05em 0.2em #000811, inset -0.05em -0.05em 0.15em 0.05em #ccc1, 0 0 0.1em 0.05em #545153 ; &::before { left: 75%; box-shadow: inset -0.05em -0.05em 0.1em #0008, inset 0.05em 0.05em 0.1em #ffffff22, inset -0.05em 0em 0.1em -0.035em var(--c), 0.1em 0.1em 0.15em #000c; } } &[disabled] { opacity: 0.25; } } @media print { .neon { background: none; &, &::before, &::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } } @media (prefers-reduced-motion) { .neon, .neon::before, .neon::after { transition: none !important; animation: none !important; } }
9
Neon Toggle Switch
By:
Nethan Pogi
WATER WORKS
body { overflow: hidden; background: rgb(25,35,125); } div.drop-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 200px; width: 200px; } div.drop { position: absolute; top: -25%; width: 100%; height: 100%; border-radius: 100% 5% 100% 100%; transform: rotate(-45deg); margin: 0px; background: deepskyblue; animation: drip 4s forwards; } h1 { color: white; position: absolute; font-size: 2.5em; height: 1em; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; margin: auto; text-align: center; opacity: 0; animation: appear 2s 2.5s forwards; } @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } } div.drop-container:before, div.drop-container:after { content: ''; position: absolute; z-index: -1; top: 55%; right: 50%; transform: translate(50%) rotateX(75deg); border-radius: 100%; opacity: 0; width: 75%; height: 75%; border: 5px solid skyblue; animation: dripple 2s ease-out 1s; } div.drop-container:after { animation: dripple 2s ease-out 1.7s; } @keyframes drip { 45% { top: 0; border-radius: 100% 5% 100% 100%; transform: rotate(-45deg); } 100% { top: 0; transform: rotate(0deg); border-radius: 100%; } } @keyframes dripple { 0% { width: 150px; height: 150px; } 25% { opacity: 1; } 100% { width: 500px; height: 500px; top: -20%; opacity: 0; } }
8
Water Drop
By:
Nethan Pogi
Animated Weather Icons
html { box-sizing: border-box; } html *, html *:before, html *:after { box-sizing: inherit; } body { max-width: 42em; padding: 2em; margin: 0 auto; color: #161616; font-family: 'Roboto', sans-serif; text-align: center; background-color: currentColor; } h1 { margin-bottom: 1.375em; color: #fff; font-weight: 100; font-size: 2em; text-transform: uppercase; } p, a { color: rgba(255,255,255,0.3); font-size: small; } p { margin: 1.375rem 0; } .icon { position: relative; display: inline-block; width: 12em; height: 10em; font-size: 1em; /* control icon size here */ } .cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor; border-radius: 50%; box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; } .cloud:after { content: ''; position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff; } .cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; transform: scale(0.5) translate(6em, -3em); animation: cloud 4s linear infinite; } .cloud:nth-child(2):after { background: #fff; } .sun { position: absolute; top: 50%; left: 50%; width: 2.5em; height: 2.5em; margin: -1.25em; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 0.375em #fff; animation: spin 12s infinite linear; } .rays { position: absolute; top: -2em; left: 50%; display: block; width: 0.375em; height: 1.125em; margin-left: -0.1875em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff; } .rays:before, .rays:after { content: ''; position: absolute; top: 0em; left: 0em; display: block; width: 0.375em; height: 1.125em; transform: rotate(60deg); transform-origin: 50% 3.25em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff; } .rays:before { transform: rotate(120deg); } .cloud + .sun { margin: -2em 1em; } .rain, .lightning, .snow { position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75em; height: 3.75em; margin: 0.375em 0 0 -2em; background: currentColor; } .rain:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite; } .bolt { position: absolute; top: 50%; left: 50%; margin: -0.25em 0 0 -0.125em; color: #fff; opacity: 0.3; animation: lightning 2s linear infinite; } .bolt:nth-child(2) { width: 0.5em; height: 0.25em; margin: -1.75em 0 0 -1.875em; transform: translate(2.5em, 2.25em); opacity: 0.2; animation: lightning 1.5s linear infinite; } .bolt:before, .bolt:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -1.625em 0 0 -1.0125em; border-top: 1.25em solid transparent; border-right: 0.75em solid; border-bottom: 0.75em solid; border-left: 0.5em solid transparent; transform: skewX(-10deg); } .bolt:after { margin: -0.25em 0 0 -0.25em; border-top: 0.75em solid; border-right: 0.5em solid transparent; border-bottom: 1.25em solid transparent; border-left: 0.75em solid; transform: skewX(-10deg); } .bolt:nth-child(2):before { margin: -0.75em 0 0 -0.5em; border-top: 0.625em solid transparent; border-right: 0.375em solid; border-bottom: 0.375em solid; border-left: 0.25em solid transparent; } .bolt:nth-child(2):after { margin: -0.125em 0 0 -0.125em; border-top: 0.375em solid; border-right: 0.25em solid transparent; border-bottom: 0.625em solid transparent; border-left: 0.375em solid; } .flake:before, .flake:after { content: '\2744'; position: absolute; top: 50%; left: 50%; margin: -1.025em 0 0 -1.0125em; color: #fff; list-height: 1em; opacity: 0.2; animation: spin 8s linear infinite reverse; } .flake:after { margin: 0.125em 0 0 -1em; font-size: 1.5em; opacity: 0.4; animation: spin 14s linear infinite; } .flake:nth-child(2):before { margin: -0.5em 0 0 0.25em; font-size: 1.25em; opacity: 0.2; animation: spin 10s linear infinite; } .flake:nth-child(2):after { margin: 0.375em 0 0 0.125em; font-size: 2em; opacity: 0.4; animation: spin 16s linear infinite reverse; } /* Animations */ @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes cloud { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; transform: scale(0.5) translate(-200%, -3em); } } @keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } } @keyframes lightning { 45% { color: #fff; background: #fff; opacity: 0.2; } 50% { color: #0cf; background: #0cf; opacity: 1; } 55% { color: #fff; background: #fff; opacity: 0.2; } }
7
Animated Weather Icons
By:
Nethan Pogi
System Diagnostics
Memory Test
Disk Integrity Check
Network Analysis
body { background: #222; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; padding: 0; } /* From Uiverse.io by chase2k25 */ .main-container-styles { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #3c3b3a; font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace; } .flipdisc-list-wrapper { max-width: 333px; max-height: 444px; width: 100%; background-color: #2a2827; border-radius: 12px; padding: 24px; box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.5), inset -2px -6px 8px rgba(0, 0, 0, 0.155), inset -4px -4px 4px rgba(199, 199, 199, 0.064), inset -0px -2px 1px rgba(255, 255, 255, 0.269); overflow-y: auto; border: 1px solid #403d3b; } .list-title { font-size: 20px; font-weight: 600; color: #e0ddd7; margin-bottom: 24px; } .hidden-checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; } .flipdisc-item-label { display: flex; align-items: center; cursor: pointer; padding: 12px; border-radius: 8px; margin-bottom: 12px; -webkit-tap-highlight-color: transparent; transition: background-color 0.3s ease; } .flipdisc-item-label:hover { background-color: #3a3836; } .visual-flipdisc-container { position: relative; width: 28px; height: 28px; flex-shrink: 0; margin-right: 16px; perspective: 800px; } .flipdisc-flipper { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1); } .flipdisc-front, .flipdisc-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .flipdisc-front { background-color: #1c1b1a; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); } .front-icon { width: 16px; height: 16px; stroke: #52504d; stroke-width: 2; } .flipdisc-back { background-image: radial-gradient(circle, #ffc857, #fb923c); box-shadow: 0 0 15px rgba(251, 146, 60, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.3); transform: rotateX(180deg); } .back-icon { width: 18px; height: 18px; stroke: #4d2d00; stroke-width: 2.5; } .flipdisc-text-content { font-weight: 500; color: #9e9a94; transition: color 0.5s ease; } .hidden-checkbox-input:checked ~ .visual-flipdisc-container .flipdisc-flipper { transform: rotateX(-180deg); } .hidden-checkbox-input:checked ~ .flipdisc-text-content { color: #ffc857; text-shadow: 0 0 5px rgba(251, 146, 60, 0.5); } .hidden-checkbox-input:focus-visible ~ .visual-flipdisc-container .flipdisc-flipper .flipdisc-front { outline: 2px solid #fb923c; outline-offset: 2px; }
7
Flip-Disc Checkbox
By:
Nethan Pogi
Notifications
Off
On
Enjoy your day.
Spam on the way.
@layer notification { .notification { display: grid; grid-template-columns: 32px 10rem 4rem; align-items: center; gap: 1rem; } .label-text > span:first-of-type { display: block; font-size: .875rem; font-weight: 600; } :where(.msg-on, .msg-off) { font-size: .75rem; color: var(--text-muted); } :where(.on, .msg-on, .icon-on) { display: none; } .notification:has(input:checked) :is(.on, .msg-on, .icon-on) { display: inline-block; } .notification:has(input:checked) :is(.off, .msg-off, .icon-off) { display: none; } .notification:has(input:checked) svg { animation: buzz .25s cubic-bezier(.9, 0, .1, 1); } @keyframes buzz { 0%, 100% { transform: translateX(0%) } 20% { transform: translateX(-5%) } 40% { transform: translateX(5%) } 60% { transform: translateX(-5%) } 80% { transform: translateX(5%) } } } @layer notification.demo { :root { --bg: #fff; --bg-muted: #f8f8f8; --text: #555; --text-muted: #888; --focus: #ff5449; } html { font-family: system-ui, sans-serif; font-size: 100%; block-size: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; text-rendering: optimizeSpeed; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; font-size: inherit; font-weight: inherit; line-height: 1; } :where(svg) { max-block-size: 100%; pointer-events: none; } :where(body) { min-block-size: 100dvh; font-weight: 400; display: grid; place-content: center; padding: 5vmin; background-color: var(--bg-muted); color: var(--text); } input[type="checkbox"] { -webkit-appearance: none; appearance: none; font: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; inline-size: 3.5rem; display: flex; align-items: center; justify-content: flex-start; padding: .25rem; border: 1px solid currentColor; border-radius: 1rem; transition: 120ms background-color ease-in-out; } input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } input[type="checkbox"]::before { content: ""; display: block; clip-path: revert; inline-size: 1.25rem; block-size: 1.25rem; background-color: currentColor; border-radius: 1rem; transform: translateX(0); transition: 120ms transform ease-in-out; } input[type="checkbox"]:checked { background-color: currentColor; } input[type="checkbox"]:checked::before { transform: translateX(1.65rem); background-color: white; } }
7
Notification Toggle
By:
Nethan Pogi
Previous
1
…
20
21
22
23
24
Next