Blackout

Developer
Ee Venn Soh
Size
23,023 Kb
Views
36,432
  1. Blackout Previews
  2. Blackout HTML Codes
  3. Blackout CSS Codes
  4. Blackout JS Codes

How do I make an blackout?

"Blackout is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights" . What is a blackout? How do you make a blackout? This script and codes were developed by Ee Venn Soh on 07 September 2022, Wednesday.

Blackout Previews
IQ Test

Blackout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blackout</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { display: flex; height: 100%; width: 100%; margin: 0; padding: 0; background-color: black; overflow: hidden;
}
a { text-decoration: none; color: white;
}
h1, p { margin: 0;
}
@keyframes btn_noise { 0% { clip: rect(16rem, 50rem, 1rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0); } 2.5% { clip: rect(23rem, 50rem, 5rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.025); } 5% { clip: rect(8rem, 50rem, 8rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.05); } 7.5% { clip: rect(17rem, 50rem, 1rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.075); } 10% { clip: rect(13rem, 50rem, 4rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); } 12.5% { clip: rect(9rem, 50rem, 14rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.125); } 15% { clip: rect(11rem, 50rem, 18rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); } 17.5% { clip: rect(23rem, 50rem, 11rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.175); } 20% { clip: rect(6rem, 50rem, 9rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); } 22.5% { clip: rect(11rem, 50rem, 10rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.225); } 25% { clip: rect(15rem, 50rem, 10rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.25); } 27.5% { clip: rect(13rem, 50rem, 14rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.275); } 30% { clip: rect(20rem, 50rem, 16rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.3); } 32.5% { clip: rect(13rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.325); } 35% { clip: rect(18rem, 50rem, 19rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.35); } 37.5% { clip: rect(9rem, 50rem, 12rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.375); } 40% { clip: rect(10rem, 50rem, 25rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.4); } 42.5% { clip: rect(21rem, 50rem, 6rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.425); } 45% { clip: rect(6rem, 50rem, 3rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.45); } 47.5% { clip: rect(11rem, 50rem, 15rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.475); } 50% { clip: rect(22rem, 50rem, 7rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); } 52.5% { clip: rect(11rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.525); } 55% { clip: rect(19rem, 50rem, 2rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.55); } 57.5% { clip: rect(4rem, 50rem, 13rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.575); } 60% { clip: rect(18rem, 50rem, 15rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); } 62.5% { clip: rect(1rem, 50rem, 18rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.625); } 65% { clip: rect(3rem, 50rem, 21rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.65); } 67.5% { clip: rect(19rem, 50rem, 8rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.675); } 70% { clip: rect(18rem, 50rem, 19rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.7); } 72.5% { clip: rect(10rem, 50rem, 12rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.725); } 75% { clip: rect(17rem, 50rem, 10rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.75); } 77.5% { clip: rect(2rem, 50rem, 3rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.775); } 80% { clip: rect(25rem, 50rem, 6rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); } 82.5% { clip: rect(18rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.825); } 85% { clip: rect(4rem, 50rem, 18rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.85); } 87.5% { clip: rect(11rem, 50rem, 13rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.875); } 90% { clip: rect(16rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.9); } 92.5% { clip: rect(20rem, 50rem, 1rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.925); } 95% { clip: rect(22rem, 50rem, 2rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.95); } 97.5% { clip: rect(14rem, 50rem, 12rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.975); } 100% { clip: rect(2rem, 50rem, 15rem, -25rem); box-shadow: 0 0 30px white; }
}
@keyframes btn_noise2 { 0% { clip: rect(1rem, 50rem, 6rem, -25rem); } 2.5% { clip: rect(19rem, 50rem, 19rem, -25rem); } 5% { clip: rect(7rem, 50rem, 21rem, -25rem); } 7.5% { clip: rect(16rem, 50rem, 9rem, -25rem); } 10% { clip: rect(21rem, 50rem, 13rem, -25rem); } 12.5% { clip: rect(6rem, 50rem, 6rem, -25rem); } 15% { clip: rect(14rem, 50rem, 16rem, -25rem); } 17.5% { clip: rect(12rem, 50rem, 10rem, -25rem); } 20% { clip: rect(19rem, 50rem, 20rem, -25rem); } 22.5% { clip: rect(23rem, 50rem, 5rem, -25rem); } 25% { clip: rect(21rem, 50rem, 16rem, -25rem); } 27.5% { clip: rect(5rem, 50rem, 13rem, -25rem); } 30% { clip: rect(2rem, 50rem, 17rem, -25rem); } 32.5% { clip: rect(23rem, 50rem, 16rem, -25rem); } 35% { clip: rect(16rem, 50rem, 16rem, -25rem); } 37.5% { clip: rect(14rem, 50rem, 17rem, -25rem); } 40% { clip: rect(15rem, 50rem, 17rem, -25rem); } 42.5% { clip: rect(10rem, 50rem, 19rem, -25rem); } 45% { clip: rect(2rem, 50rem, 17rem, -25rem); } 47.5% { clip: rect(20rem, 50rem, 2rem, -25rem); } 50% { clip: rect(17rem, 50rem, 18rem, -25rem); } 52.5% { clip: rect(20rem, 50rem, 10rem, -25rem); } 55% { clip: rect(11rem, 50rem, 23rem, -25rem); } 57.5% { clip: rect(21rem, 50rem, 15rem, -25rem); } 60% { clip: rect(7rem, 50rem, 20rem, -25rem); } 62.5% { clip: rect(15rem, 50rem, 17rem, -25rem); } 65% { clip: rect(11rem, 50rem, 21rem, -25rem); } 67.5% { clip: rect(25rem, 50rem, 19rem, -25rem); } 70% { clip: rect(15rem, 50rem, 21rem, -25rem); } 72.5% { clip: rect(2rem, 50rem, 23rem, -25rem); } 75% { clip: rect(9rem, 50rem, 25rem, -25rem); } 77.5% { clip: rect(6rem, 50rem, 23rem, -25rem); } 80% { clip: rect(18rem, 50rem, 4rem, -25rem); } 82.5% { clip: rect(3rem, 50rem, 3rem, -25rem); } 85% { clip: rect(17rem, 50rem, 17rem, -25rem); } 87.5% { clip: rect(2rem, 50rem, 23rem, -25rem); } 90% { clip: rect(4rem, 50rem, 22rem, -25rem); } 92.5% { clip: rect(24rem, 50rem, 20rem, -25rem); } 95% { clip: rect(12rem, 50rem, 2rem, -25rem); } 97.5% { clip: rect(7rem, 50rem, 9rem, -25rem); } 100% { clip: rect(3rem, 50rem, 2rem, -25rem); }
}
@keyframes btn_ring { 0% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 30px white; } 100% { box-shadow: inset 0 0 0 20px white, 0 0 30px white; }
}
.btn { border-radius: 50%; transition: transform 0.5s cubic-bezier(1, 0, 0.5, -1) 0.25s, box-shadow 0.5s cubic-bezier(1, -5, 0.5, 5) 0.25s; transform: scale(0.5); animation: btn_noise 3s ease-in-out 1, btn_ring 1s ease-in-out 3s 1; box-shadow: inset 0 0 0 20px white, 0 0 30px white; left: 50%; top: 50%; margin: -12.5rem; width: 25rem; height: 25rem; position: absolute; cursor: pointer;
}
.btn::before, .btn::after { opacity: 0; content: ""; position: absolute; width: 31rem; height: 29rem; margin: -2rem -3rem -2rem -3rem; border-radius: 50%; z-index: -10;
}
.btn::before { box-shadow: 0 -15px 30px -15px rgba(255, 255, 255, 0.8), -25px 15px 50px -25px rgba(255, 255, 255, 0.2), 0 -25px 15px -20px rgba(255, 255, 255, 0.3);
}
.btn::after { box-shadow: 0 -25px 20px -15px rgba(255, 255, 255, 0.2), 10px 25px 15px -30px white, -10px 30px 20px -30px rgba(255, 255, 255, 0.3);
}
.btn-info { border-radius: 50%; transform: scale(0); transition: all 0.3s ease-in-out; background-image: repeating-radial-gradient(rgba(255, 255, 255, 0.2) 0, black 2px, black 50px); overflow: hidden; opacity: 0; background-size: 12.5rem 12.5rem; position: absolute; width: inherit; height: inherit;
}
.btn-h1, .btn-button, .btn-button::after, .btn-button:active::after { font-family: "Oswald", sans-serif; font-weight: 400; font-style: italic; text-align: center; text-transform: uppercase; letter-spacing: 2px;
}
.btn-h1 { text-shadow: 0 0 0 white, 0 0 1px white, 0 1px 2px rgba(255, 255, 255, 0.5); position: absolute; clip: rect(0, 20rem, 20rem, 0); font-size: 2em; padding-top: 3.5rem; left: 23%; color: transparent;
}
.btn-h1 span { font-size: 1.1em;
}
.btn-h1_thin { font-size: 2em; font-family: "Oswald", sans-serif; font-weight: 300; font-style: italic;
}
.btn-line { transition: all 1s ease-in-out; margin: 10.5rem 3rem 2.5rem; border-top: 1px solid white; width: 0;
}
.btn-copy { font-size: 1rem; font-family: "Oswald", sans-serif; font-weight: 300; color: white; text-align: center;
}
.btn-author { transition: all 1s ease-in-out; text-shadow: 0 0 1px white; font-size: 1.8rem; font-family: 'Mrs Saint Delafield', cursive; opacity: 0; color: white; text-align: center;
}
.btn-copy { padding: 0 5rem; margin-bottom: 1.5rem;
}
.btn-button { transition: all 0.1s ease-in-out; font-style: normal; font-size: 0.8rem; color: white; border: 1px solid white; width: 5rem; padding: 0.5rem; margin: 0 auto; display: block; position: relative;
}
.btn-button::before { transition: all 0.1s ease-in-out; content: ""; opacity: 0; position: absolute; width: 5rem; padding: 0.5rem; top: 0%; left: 0%; height: 56%;
}
.btn-button::after { text-shadow: 0 0 1px white, 0 1px 2px rgba(255, 255, 255, 0.5); transition: all 0.1s ease-in-out; font-size: 1.5rem; content: "GO!"; color: black; position: absolute; opacity: 0; top: 0%; left: 35%;
}
.btn-button:hover { width: 7rem;
}
.btn-button:hover::before { opacity: 1; animation: btn_stripe 0.5s infinite linear; background: linear-gradient(45deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000); background-size: 30px 30px; width: 7rem;
}
.btn-button:hover::after { opacity: 1;
}
.btn-button:active { background-color: white;
}
.btn-button:active::before { opacity: 0;
}
.btn-button:active::after { text-shadow: 0 0 1px white, 0 1px 2px rgba(255, 255, 255, 0.5); transition: all 0.1s ease-in-out; font-size: 1.5rem; content: "SWEET"; color: black; position: absolute; top: 0%; left: 20%;
}
@keyframes btn_stripe { 0% { background-position: 0 0; } 100% { background-position: 100% 0; }
}
.btn:hover { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 30px white; transform: scale(1); transition-delay: 1.5s;
}
.btn:hover::before { animation: btn_spin 0.5s cubic-bezier(0.6, 0.2, 0, 0.8) infinite alternate, btn_fade 1.5s cubic-bezier(0.4, 0.2, 0.1, 0.7);
}
.btn:hover::after { animation: btn_spin 1s cubic-bezier(0.4, 0.2, 0.1, 0.7) 0.25s infinite alternate, btn_fade 1.5s cubic-bezier(0.4, 0.2, 0.1, 0.7);
}
.btn:hover .btn-info { transform: scale(1); transition-delay: 1.75s; animation: btn-bg_size 4s cubic-bezier(0.2, 0, 1, 0.5) infinite alternate, btn-bg_positon 3s ease-in-out infinite alternate; opacity: 1;
}
.btn:hover .btn-h1 { animation: btn_noise2 4s 1 linear alternate-reverse; left: 23%;
}
.btn:hover .btn-author { transition-delay: 2.25s; opacity: 1;
}
.btn:hover .btn-line { transition-delay: 1.75s; width: 19rem; margin: 10.5rem 3rem 1rem;
}
@keyframes btn_spin { 100% { transform: rotate(360deg) scale(1.5); }
}
@keyframes btn_fade { 0% { opacity: 1; } 40% { opacity: .2; } 80% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes btn-bg_size { 100% { background-size: 2.5rem 2.5rem; }
}
@keyframes btn-bg_positon { 0% { background-position: left top; } 25% { background-position: right top; } 50% { background-position: right bottom; } 75% { background-position: left bottom; }
}
.btn_ghost { animation: btn_ghost 0.3s ease-in-out 2 alternate; transition: all 0.3s ease-in-out; transition-delay: 0.8s; opacity: 0;
}
.btn-h1 span { animation-delay: 0.05s;
}
.btn-h1 span > span { animation-delay: 0.1s;
}
.btn-h1 span > span > span { animation-delay: 0.15s;
}
.btn-h1 span > span > span > span { animation-delay: 0.2s;
}
.btn-h1 span > span > span > span > span { animation-delay: 0.25s;
}
.btn-h1 span > span > span > span > span > span { animation-delay: 0.3s;
}
.btn-h1 span > span > span > span > span > span > span { animation-delay: 0.35s;
}
.btn-h1 span > span > span > span > span > span > span > span { animation-delay: 0.4s;
}
@keyframes btn_ghost { 100% { text-shadow: 5rem 0 20rem black; }
}
.btn_gone { transition: all 0.2s ease-in-out; transition-delay: 0s !important; transform: translateY(1rem) rotateX(90deg); opacity: 0 !important;
}
.btn_white { transition-delay: 0s !important; background: white !important;
}
.btn_shrink { transition: all 0.4s ease-in-out; transition-delay: 0.4s !important; background: white !important; transform: scale(0) !important; opacity: 0 !important;
}
.scene-spinner { margin: auto; height: 100%; display: none;
}
.spn-wrap { position: absolute; left: 50%; top: 50%;
}
.spn-spinner { position: relative;
}
.spn-a { display: block; position: absolute; opacity: 0;
}
.spn-a .spn-b { display: block; width: 0.25rem; height: 0.25rem; background: white; border-radius: 50%; box-shadow: 0 0 1rem white; animation: spn_spin 1s infinite ease-in-out;
}
@keyframes spn_out1 { 30%, 100% { transform: rotateZ(3.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(1) { animation: spn_out1 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(1) .spn-b { animation-delay: 0.01s;
}
@keyframes spn_out2 { 30%, 100% { transform: rotateZ(7.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(2) { animation: spn_out2 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(2) .spn-b { animation-delay: 0.02s;
}
@keyframes spn_out3 { 30%, 100% { transform: rotateZ(10.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(3) { animation: spn_out3 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(3) .spn-b { animation-delay: 0.03s;
}
@keyframes spn_out4 { 30%, 100% { transform: rotateZ(14.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(4) { animation: spn_out4 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(4) .spn-b { animation-delay: 0.04s;
}
@keyframes spn_out5 { 30%, 100% { transform: rotateZ(18deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(5) { animation: spn_out5 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(5) .spn-b { animation-delay: 0.05s;
}
@keyframes spn_out6 { 30%, 100% { transform: rotateZ(21.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(6) { animation: spn_out6 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(6) .spn-b { animation-delay: 0.06s;
}
@keyframes spn_out7 { 30%, 100% { transform: rotateZ(25.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(7) { animation: spn_out7 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(7) .spn-b { animation-delay: 0.07s;
}
@keyframes spn_out8 { 30%, 100% { transform: rotateZ(28.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(8) { animation: spn_out8 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(8) .spn-b { animation-delay: 0.08s;
}
@keyframes spn_out9 { 30%, 100% { transform: rotateZ(32.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(9) { animation: spn_out9 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(9) .spn-b { animation-delay: 0.09s;
}
@keyframes spn_out10 { 30%, 100% { transform: rotateZ(36deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(10) { animation: spn_out10 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(10) .spn-b { animation-delay: 0.1s;
}
@keyframes spn_out11 { 30%, 100% { transform: rotateZ(39.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(11) { animation: spn_out11 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(11) .spn-b { animation-delay: 0.11s;
}
@keyframes spn_out12 { 30%, 100% { transform: rotateZ(43.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(12) { animation: spn_out12 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(12) .spn-b { animation-delay: 0.12s;
}
@keyframes spn_out13 { 30%, 100% { transform: rotateZ(46.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(13) { animation: spn_out13 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(13) .spn-b { animation-delay: 0.13s;
}
@keyframes spn_out14 { 30%, 100% { transform: rotateZ(50.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(14) { animation: spn_out14 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(14) .spn-b { animation-delay: 0.14s;
}
@keyframes spn_out15 { 30%, 100% { transform: rotateZ(54deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(15) { animation: spn_out15 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(15) .spn-b { animation-delay: 0.15s;
}
@keyframes spn_out16 { 30%, 100% { transform: rotateZ(57.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(16) { animation: spn_out16 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(16) .spn-b { animation-delay: 0.16s;
}
@keyframes spn_out17 { 30%, 100% { transform: rotateZ(61.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(17) { animation: spn_out17 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(17) .spn-b { animation-delay: 0.17s;
}
@keyframes spn_out18 { 30%, 100% { transform: rotateZ(64.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(18) { animation: spn_out18 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(18) .spn-b { animation-delay: 0.18s;
}
@keyframes spn_out19 { 30%, 100% { transform: rotateZ(68.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(19) { animation: spn_out19 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(19) .spn-b { animation-delay: 0.19s;
}
@keyframes spn_out20 { 30%, 100% { transform: rotateZ(72deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(20) { animation: spn_out20 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(20) .spn-b { animation-delay: 0.2s;
}
@keyframes spn_out21 { 30%, 100% { transform: rotateZ(75.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(21) { animation: spn_out21 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(21) .spn-b { animation-delay: 0.21s;
}
@keyframes spn_out22 { 30%, 100% { transform: rotateZ(79.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(22) { animation: spn_out22 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(22) .spn-b { animation-delay: 0.22s;
}
@keyframes spn_out23 { 30%, 100% { transform: rotateZ(82.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(23) { animation: spn_out23 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(23) .spn-b { animation-delay: 0.23s;
}
@keyframes spn_out24 { 30%, 100% { transform: rotateZ(86.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(24) { animation: spn_out24 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(24) .spn-b { animation-delay: 0.24s;
}
@keyframes spn_out25 { 30%, 100% { transform: rotateZ(90deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(25) { animation: spn_out25 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(25) .spn-b { animation-delay: 0.25s;
}
@keyframes spn_out26 { 30%, 100% { transform: rotateZ(93.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(26) { animation: spn_out26 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(26) .spn-b { animation-delay: 0.26s;
}
@keyframes spn_out27 { 30%, 100% { transform: rotateZ(97.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(27) { animation: spn_out27 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(27) .spn-b { animation-delay: 0.27s;
}
@keyframes spn_out28 { 30%, 100% { transform: rotateZ(100.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(28) { animation: spn_out28 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(28) .spn-b { animation-delay: 0.28s;
}
@keyframes spn_out29 { 30%, 100% { transform: rotateZ(104.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(29) { animation: spn_out29 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(29) .spn-b { animation-delay: 0.29s;
}
@keyframes spn_out30 { 30%, 100% { transform: rotateZ(108deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(30) { animation: spn_out30 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(30) .spn-b { animation-delay: 0.3s;
}
@keyframes spn_out31 { 30%, 100% { transform: rotateZ(111.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(31) { animation: spn_out31 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(31) .spn-b { animation-delay: 0.31s;
}
@keyframes spn_out32 { 30%, 100% { transform: rotateZ(115.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(32) { animation: spn_out32 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(32) .spn-b { animation-delay: 0.32s;
}
@keyframes spn_out33 { 30%, 100% { transform: rotateZ(118.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(33) { animation: spn_out33 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(33) .spn-b { animation-delay: 0.33s;
}
@keyframes spn_out34 { 30%, 100% { transform: rotateZ(122.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(34) { animation: spn_out34 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(34) .spn-b { animation-delay: 0.34s;
}
@keyframes spn_out35 { 30%, 100% { transform: rotateZ(126deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(35) { animation: spn_out35 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(35) .spn-b { animation-delay: 0.35s;
}
@keyframes spn_out36 { 30%, 100% { transform: rotateZ(129.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(36) { animation: spn_out36 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(36) .spn-b { animation-delay: 0.36s;
}
@keyframes spn_out37 { 30%, 100% { transform: rotateZ(133.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(37) { animation: spn_out37 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(37) .spn-b { animation-delay: 0.37s;
}
@keyframes spn_out38 { 30%, 100% { transform: rotateZ(136.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(38) { animation: spn_out38 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(38) .spn-b { animation-delay: 0.38s;
}
@keyframes spn_out39 { 30%, 100% { transform: rotateZ(140.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(39) { animation: spn_out39 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(39) .spn-b { animation-delay: 0.39s;
}
@keyframes spn_out40 { 30%, 100% { transform: rotateZ(144deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(40) { animation: spn_out40 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(40) .spn-b { animation-delay: 0.4s;
}
@keyframes spn_out41 { 30%, 100% { transform: rotateZ(147.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(41) { animation: spn_out41 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(41) .spn-b { animation-delay: 0.41s;
}
@keyframes spn_out42 { 30%, 100% { transform: rotateZ(151.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(42) { animation: spn_out42 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(42) .spn-b { animation-delay: 0.42s;
}
@keyframes spn_out43 { 30%, 100% { transform: rotateZ(154.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(43) { animation: spn_out43 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(43) .spn-b { animation-delay: 0.43s;
}
@keyframes spn_out44 { 30%, 100% { transform: rotateZ(158.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(44) { animation: spn_out44 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(44) .spn-b { animation-delay: 0.44s;
}
@keyframes spn_out45 { 30%, 100% { transform: rotateZ(162deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(45) { animation: spn_out45 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(45) .spn-b { animation-delay: 0.45s;
}
@keyframes spn_out46 { 30%, 100% { transform: rotateZ(165.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(46) { animation: spn_out46 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(46) .spn-b { animation-delay: 0.46s;
}
@keyframes spn_out47 { 30%, 100% { transform: rotateZ(169.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(47) { animation: spn_out47 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(47) .spn-b { animation-delay: 0.47s;
}
@keyframes spn_out48 { 30%, 100% { transform: rotateZ(172.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(48) { animation: spn_out48 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(48) .spn-b { animation-delay: 0.48s;
}
@keyframes spn_out49 { 30%, 100% { transform: rotateZ(176.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(49) { animation: spn_out49 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(49) .spn-b { animation-delay: 0.49s;
}
@keyframes spn_out50 { 30%, 100% { transform: rotateZ(180deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(50) { animation: spn_out50 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(50) .spn-b { animation-delay: 0.5s;
}
@keyframes spn_out51 { 30%, 100% { transform: rotateZ(183.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(51) { animation: spn_out51 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(51) .spn-b { animation-delay: 0.51s;
}
@keyframes spn_out52 { 30%, 100% { transform: rotateZ(187.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(52) { animation: spn_out52 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(52) .spn-b { animation-delay: 0.52s;
}
@keyframes spn_out53 { 30%, 100% { transform: rotateZ(190.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(53) { animation: spn_out53 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(53) .spn-b { animation-delay: 0.53s;
}
@keyframes spn_out54 { 30%, 100% { transform: rotateZ(194.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(54) { animation: spn_out54 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(54) .spn-b { animation-delay: 0.54s;
}
@keyframes spn_out55 { 30%, 100% { transform: rotateZ(198deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(55) { animation: spn_out55 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(55) .spn-b { animation-delay: 0.55s;
}
@keyframes spn_out56 { 30%, 100% { transform: rotateZ(201.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(56) { animation: spn_out56 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(56) .spn-b { animation-delay: 0.56s;
}
@keyframes spn_out57 { 30%, 100% { transform: rotateZ(205.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(57) { animation: spn_out57 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(57) .spn-b { animation-delay: 0.57s;
}
@keyframes spn_out58 { 30%, 100% { transform: rotateZ(208.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(58) { animation: spn_out58 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(58) .spn-b { animation-delay: 0.58s;
}
@keyframes spn_out59 { 30%, 100% { transform: rotateZ(212.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(59) { animation: spn_out59 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(59) .spn-b { animation-delay: 0.59s;
}
@keyframes spn_out60 { 30%, 100% { transform: rotateZ(216deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(60) { animation: spn_out60 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(60) .spn-b { animation-delay: 0.6s;
}
@keyframes spn_out61 { 30%, 100% { transform: rotateZ(219.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(61) { animation: spn_out61 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(61) .spn-b { animation-delay: 0.61s;
}
@keyframes spn_out62 { 30%, 100% { transform: rotateZ(223.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(62) { animation: spn_out62 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(62) .spn-b { animation-delay: 0.62s;
}
@keyframes spn_out63 { 30%, 100% { transform: rotateZ(226.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(63) { animation: spn_out63 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(63) .spn-b { animation-delay: 0.63s;
}
@keyframes spn_out64 { 30%, 100% { transform: rotateZ(230.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(64) { animation: spn_out64 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(64) .spn-b { animation-delay: 0.64s;
}
@keyframes spn_out65 { 30%, 100% { transform: rotateZ(234deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(65) { animation: spn_out65 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(65) .spn-b { animation-delay: 0.65s;
}
@keyframes spn_out66 { 30%, 100% { transform: rotateZ(237.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(66) { animation: spn_out66 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(66) .spn-b { animation-delay: 0.66s;
}
@keyframes spn_out67 { 30%, 100% { transform: rotateZ(241.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(67) { animation: spn_out67 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(67) .spn-b { animation-delay: 0.67s;
}
@keyframes spn_out68 { 30%, 100% { transform: rotateZ(244.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(68) { animation: spn_out68 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(68) .spn-b { animation-delay: 0.68s;
}
@keyframes spn_out69 { 30%, 100% { transform: rotateZ(248.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(69) { animation: spn_out69 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(69) .spn-b { animation-delay: 0.69s;
}
@keyframes spn_out70 { 30%, 100% { transform: rotateZ(252deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(70) { animation: spn_out70 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(70) .spn-b { animation-delay: 0.7s;
}
@keyframes spn_out71 { 30%, 100% { transform: rotateZ(255.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(71) { animation: spn_out71 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(71) .spn-b { animation-delay: 0.71s;
}
@keyframes spn_out72 { 30%, 100% { transform: rotateZ(259.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(72) { animation: spn_out72 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(72) .spn-b { animation-delay: 0.72s;
}
@keyframes spn_out73 { 30%, 100% { transform: rotateZ(262.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(73) { animation: spn_out73 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(73) .spn-b { animation-delay: 0.73s;
}
@keyframes spn_out74 { 30%, 100% { transform: rotateZ(266.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(74) { animation: spn_out74 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(74) .spn-b { animation-delay: 0.74s;
}
@keyframes spn_out75 { 30%, 100% { transform: rotateZ(270deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(75) { animation: spn_out75 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(75) .spn-b { animation-delay: 0.75s;
}
@keyframes spn_out76 { 30%, 100% { transform: rotateZ(273.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(76) { animation: spn_out76 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(76) .spn-b { animation-delay: 0.76s;
}
@keyframes spn_out77 { 30%, 100% { transform: rotateZ(277.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(77) { animation: spn_out77 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(77) .spn-b { animation-delay: 0.77s;
}
@keyframes spn_out78 { 30%, 100% { transform: rotateZ(280.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(78) { animation: spn_out78 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(78) .spn-b { animation-delay: 0.78s;
}
@keyframes spn_out79 { 30%, 100% { transform: rotateZ(284.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(79) { animation: spn_out79 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(79) .spn-b { animation-delay: 0.79s;
}
@keyframes spn_out80 { 30%, 100% { transform: rotateZ(288deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(80) { animation: spn_out80 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(80) .spn-b { animation-delay: 0.8s;
}
@keyframes spn_out81 { 30%, 100% { transform: rotateZ(291.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(81) { animation: spn_out81 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(81) .spn-b { animation-delay: 0.81s;
}
@keyframes spn_out82 { 30%, 100% { transform: rotateZ(295.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(82) { animation: spn_out82 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(82) .spn-b { animation-delay: 0.82s;
}
@keyframes spn_out83 { 30%, 100% { transform: rotateZ(298.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(83) { animation: spn_out83 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(83) .spn-b { animation-delay: 0.83s;
}
@keyframes spn_out84 { 30%, 100% { transform: rotateZ(302.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(84) { animation: spn_out84 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(84) .spn-b { animation-delay: 0.84s;
}
@keyframes spn_out85 { 30%, 100% { transform: rotateZ(306deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(85) { animation: spn_out85 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(85) .spn-b { animation-delay: 0.85s;
}
@keyframes spn_out86 { 30%, 100% { transform: rotateZ(309.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(86) { animation: spn_out86 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(86) .spn-b { animation-delay: 0.86s;
}
@keyframes spn_out87 { 30%, 100% { transform: rotateZ(313.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(87) { animation: spn_out87 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(87) .spn-b { animation-delay: 0.87s;
}
@keyframes spn_out88 { 30%, 100% { transform: rotateZ(316.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(88) { animation: spn_out88 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(88) .spn-b { animation-delay: 0.88s;
}
@keyframes spn_out89 { 30%, 100% { transform: rotateZ(320.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(89) { animation: spn_out89 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(89) .spn-b { animation-delay: 0.89s;
}
@keyframes spn_out90 { 30%, 100% { transform: rotateZ(324deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(90) { animation: spn_out90 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(90) .spn-b { animation-delay: 0.9s;
}
@keyframes spn_out91 { 30%, 100% { transform: rotateZ(327.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(91) { animation: spn_out91 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(91) .spn-b { animation-delay: 0.91s;
}
@keyframes spn_out92 { 30%, 100% { transform: rotateZ(331.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(92) { animation: spn_out92 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(92) .spn-b { animation-delay: 0.92s;
}
@keyframes spn_out93 { 30%, 100% { transform: rotateZ(334.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(93) { animation: spn_out93 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(93) .spn-b { animation-delay: 0.93s;
}
@keyframes spn_out94 { 30%, 100% { transform: rotateZ(338.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(94) { animation: spn_out94 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(94) .spn-b { animation-delay: 0.94s;
}
@keyframes spn_out95 { 30%, 100% { transform: rotateZ(342deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(95) { animation: spn_out95 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(95) .spn-b { animation-delay: 0.95s;
}
@keyframes spn_out96 { 30%, 100% { transform: rotateZ(345.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(96) { animation: spn_out96 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(96) .spn-b { animation-delay: 0.96s;
}
@keyframes spn_out97 { 30%, 100% { transform: rotateZ(349.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(97) { animation: spn_out97 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(97) .spn-b { animation-delay: 0.97s;
}
@keyframes spn_out98 { 30%, 100% { transform: rotateZ(352.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(98) { animation: spn_out98 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(98) .spn-b { animation-delay: 0.98s;
}
@keyframes spn_out99 { 30%, 100% { transform: rotateZ(356.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(99) { animation: spn_out99 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(99) .spn-b { animation-delay: 0.99s;
}
@keyframes spn_out100 { 30%, 100% { transform: rotateZ(360deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(100) { animation: spn_out100 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(100) .spn-b { animation-delay: 1s;
}
@keyframes spn_spin { 15% { transform: scale(3); } 50% { transform: scale(1); }
}
.scene-torus { margin: auto; height: 100%; display: none;
}
.tor-wrap { position: absolute; left: 50%; top: 50%;
}
.tor-field { position: relative; transform: rotateX(-30deg) rotateY(0deg); animation: tor_rotateY 10s ease-in-out 1; opacity: 1;
}
.tor-field * { position: absolute;
}
.tor-field, .tor-field * { transform-style: preserve-3d;
}
.tor-circle:nth-child(1) { transform: rotateY(12deg) translateZ(8rem);
}
.tor-circle:nth-child(1) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.2s;
}
.tor-circle:nth-child(2) { transform: rotateY(24deg) translateZ(8rem);
}
.tor-circle:nth-child(2) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.4s;
}
.tor-circle:nth-child(3) { transform: rotateY(36deg) translateZ(8rem);
}
.tor-circle:nth-child(3) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.6s;
}
.tor-circle:nth-child(4) { transform: rotateY(48deg) translateZ(8rem);
}
.tor-circle:nth-child(4) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.8s;
}
.tor-circle:nth-child(5) { transform: rotateY(60deg) translateZ(8rem);
}
.tor-circle:nth-child(5) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1s;
}
.tor-circle:nth-child(6) { transform: rotateY(72deg) translateZ(8rem);
}
.tor-circle:nth-child(6) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.2s;
}
.tor-circle:nth-child(7) { transform: rotateY(84deg) translateZ(8rem);
}
.tor-circle:nth-child(7) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.4s;
}
.tor-circle:nth-child(8) { transform: rotateY(96deg) translateZ(8rem);
}
.tor-circle:nth-child(8) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.6s;
}
.tor-circle:nth-child(9) { transform: rotateY(108deg) translateZ(8rem);
}
.tor-circle:nth-child(9) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.8s;
}
.tor-circle:nth-child(10) { transform: rotateY(120deg) translateZ(8rem);
}
.tor-circle:nth-child(10) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2s;
}
.tor-circle:nth-child(11) { transform: rotateY(132deg) translateZ(8rem);
}
.tor-circle:nth-child(11) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.2s;
}
.tor-circle:nth-child(12) { transform: rotateY(144deg) translateZ(8rem);
}
.tor-circle:nth-child(12) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.4s;
}
.tor-circle:nth-child(13) { transform: rotateY(156deg) translateZ(8rem);
}
.tor-circle:nth-child(13) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.6s;
}
.tor-circle:nth-child(14) { transform: rotateY(168deg) translateZ(8rem);
}
.tor-circle:nth-child(14) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.8s;
}
.tor-circle:nth-child(15) { transform: rotateY(180deg) translateZ(8rem);
}
.tor-circle:nth-child(15) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3s;
}
.tor-circle:nth-child(16) { transform: rotateY(192deg) translateZ(8rem);
}
.tor-circle:nth-child(16) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.2s;
}
.tor-circle:nth-child(17) { transform: rotateY(204deg) translateZ(8rem);
}
.tor-circle:nth-child(17) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.4s;
}
.tor-circle:nth-child(18) { transform: rotateY(216deg) translateZ(8rem);
}
.tor-circle:nth-child(18) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.6s;
}
.tor-circle:nth-child(19) { transform: rotateY(228deg) translateZ(8rem);
}
.tor-circle:nth-child(19) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.8s;
}
.tor-circle:nth-child(20) { transform: rotateY(240deg) translateZ(8rem);
}
.tor-circle:nth-child(20) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4s;
}
.tor-circle:nth-child(21) { transform: rotateY(252deg) translateZ(8rem);
}
.tor-circle:nth-child(21) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.2s;
}
.tor-circle:nth-child(22) { transform: rotateY(264deg) translateZ(8rem);
}
.tor-circle:nth-child(22) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.4s;
}
.tor-circle:nth-child(23) { transform: rotateY(276deg) translateZ(8rem);
}
.tor-circle:nth-child(23) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.6s;
}
.tor-circle:nth-child(24) { transform: rotateY(288deg) translateZ(8rem);
}
.tor-circle:nth-child(24) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.8s;
}
.tor-circle:nth-child(25) { transform: rotateY(300deg) translateZ(8rem);
}
.tor-circle:nth-child(25) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5s;
}
.tor-circle:nth-child(26) { transform: rotateY(312deg) translateZ(8rem);
}
.tor-circle:nth-child(26) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.2s;
}
.tor-circle:nth-child(27) { transform: rotateY(324deg) translateZ(8rem);
}
.tor-circle:nth-child(27) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.4s;
}
.tor-circle:nth-child(28) { transform: rotateY(336deg) translateZ(8rem);
}
.tor-circle:nth-child(28) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.6s;
}
.tor-circle:nth-child(29) { transform: rotateY(348deg) translateZ(8rem);
}
.tor-circle:nth-child(29) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.8s;
}
.tor-circle:nth-child(30) { transform: rotateY(360deg) translateZ(8rem);
}
.tor-circle:nth-child(30) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 6s;
}
.tor-dot { width: 0.25rem; height: 0.25rem; border-radius: 50%; backface-visibility: hidden;
}
.tor-dot:nth-child(1) { transform: rotateX(18deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(2) { transform: rotateX(36deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(3) { transform: rotateX(54deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(4) { transform: rotateX(72deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(5) { transform: rotateX(90deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(6) { transform: rotateX(108deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(7) { transform: rotateX(126deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(8) { transform: rotateX(144deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(9) { transform: rotateX(162deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(10) { transform: rotateX(180deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(11) { transform: rotateX(198deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(12) { transform: rotateX(216deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(13) { transform: rotateX(234deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(14) { transform: rotateX(252deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(15) { transform: rotateX(270deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(16) { transform: rotateX(288deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(17) { transform: rotateX(306deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(18) { transform: rotateX(324deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(19) { transform: rotateX(342deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(20) { transform: rotateX(360deg) translateZ(3rem); background-color: white;
}
@keyframes tor_rotateX { 100% { transform: rotateX(360deg); }
}
@keyframes tor_rotateY { 20%, 30% { transform: rotateX(90deg) rotateY(360deg); } 40%, 50% { transform: rotateX(-30deg) rotateZ(30deg) scale(0.6); } 60%, 80% { transform: rotateX(60deg) rotateZ(40deg); } 90%, 100% { transform: rotateX(-90deg) rotateY(1440deg) scale(2); }
}
.scene-hole { margin: auto; height: 100%; display: none;
}
.hol-hole { top: 50%; left: 50%; position: absolute;
}
.hol-a { display: block; position: absolute; width: 20rem; height: 20rem; margin: -10rem; border-radius: 50%; opacity: 0; animation: hol_scale 2s 2 linear;
}
i:nth-child(1) { animation-delay: 0.25s;
}
i:nth-child(2) { animation-delay: 0.5s;
}
i:nth-child(3) { animation-delay: 0.75s;
}
i:nth-child(4) { animation-delay: 1s;
}
i:nth-child(5) { animation-delay: 1.25s;
}
i:nth-child(6) { animation-delay: 1.5s;
}
i:nth-child(7) { animation-delay: 1.75s;
}
i:nth-child(8) { animation-delay: 2s;
}
@keyframes hol_scale { 0% { transform: scale(2); opacity: 0; box-shadow: 0 0 50px rgba(255, 255, 255, 0.5); } 50% { transform: scale(1) translate(0, -1rem); opacity: 1; box-shadow: 0 -10px 20px rgba(255, 255, 255, 0.5); } 100% { transform: scale(0.1) translate(0, 1rem); opacity: 0; box-shadow: 0 50px 20px rgba(255, 255, 255, 0.5); }
}
.scene-polygon { margin: auto; height: 100%; display: none;
}
.pol-wrap { height: inherit; perspective: 35rem; perspective-origin: 50% 50%; position: absolute; left: 50%; animation: up 4s 1 ease-in-out;
}
.pol-dodecahedron { position: relative; transform-style: preserve-3d; animation: spin 50s infinite alternate cubic-bezier(0, -5, 1, 10);
}
.pol-dodecahedron, .pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { top: 50%; left: 50%; margin: -10em; width: 20em; height: 20em;
}
.pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { position: absolute; overflow: hidden;
}
.pol-pentagon:nth-child(1) { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(1) .pol-pentagon-inner::before { animation: color1 3s infinite alternate linear;
}
.pol-pentagon:nth-child(2) { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(2) .pol-pentagon-inner::before { animation: color2 3s infinite alternate linear;
}
.pol-pentagon:nth-child(3) { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(3) .pol-pentagon-inner::before { animation: color3 3s infinite alternate linear;
}
.pol-pentagon:nth-child(4) { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(4) .pol-pentagon-inner::before { animation: color4 3s infinite alternate linear;
}
.pol-pentagon:nth-child(5) { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(5) .pol-pentagon-inner::before { animation: color5 3s infinite alternate linear;
}
.pol-pentagon:nth-child(6) { transform: scaleY(-1) translateY(8.50651em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(6) .pol-pentagon-inner::before { animation: color6 3s infinite alternate linear;
}
.pol-pentagon:nth-child(7) { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(7) .pol-pentagon-inner::before { animation: color7 3s infinite alternate linear;
}
.pol-pentagon:nth-child(8) { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(8) .pol-pentagon-inner::before { animation: color8 3s infinite alternate linear;
}
.pol-pentagon:nth-child(9) { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(9) .pol-pentagon-inner::before { animation: color9 3s infinite alternate linear;
}
.pol-pentagon:nth-child(10) { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(10) .pol-pentagon-inner::before { animation: color10 3s infinite alternate linear;
}
.pol-pentagon:nth-child(11) { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(11) .pol-pentagon-inner::before { animation: color11 3s infinite alternate linear;
}
.pol-pentagon:nth-child(12) { transform: translateY(8.50651em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(12) .pol-pentagon-inner::before { animation: color12 3s infinite alternate linear;
}
.pol-pentagon-inner { transform: scaleY(1.05146) skewX(-0.31416rad) rotate(0.62832rad) translateY(-7.26543em) rotate(0.31416rad) skewY(0.94248rad) scaleX(0.58779);
}
.pol-pentagon-inner:before { content: ""; transform: scaleX(1.7013) skewY(-0.94248rad) rotate(-0.31416rad) translateY(-2.73457em);
}
@keyframes color1 { 0% { background: rgba(41, 41, 41, 0.5); } 20% { background: rgba(59, 59, 59, 0.5); } 40% { background: rgba(255, 255, 255, 0.4); } 60% { background: rgba(23, 23, 23, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color2 { 0% { background: rgba(82, 82, 82, 0.5); } 20% { background: rgba(201, 201, 201, 0.5); } 40% { background: rgba(156, 156, 156, 0.4); } 60% { background: rgba(3, 3, 3, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color3 { 0% { background: rgba(161, 161, 161, 0.5); } 20% { background: rgba(224, 224, 224, 0.5); } 40% { background: rgba(240, 240, 240, 0.4); } 60% { background: rgba(36, 36, 36, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color4 { 0% { background: rgba(166, 166, 166, 0.5); } 20% { background: rgba(207, 207, 207, 0.5); } 40% { background: rgba(125, 125, 125, 0.4); } 60% { background: rgba(173, 173, 173, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color5 { 0% { background: rgba(28, 28, 28, 0.5); } 20% { background: rgba(150, 150, 150, 0.5); } 40% { background: rgba(219, 219, 219, 0.4); } 60% { background: rgba(64, 64, 64, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color6 { 0% { background: rgba(217, 217, 217, 0.5); } 20% { background: rgba(179, 179, 179, 0.5); } 40% { background: rgba(156, 156, 156, 0.4); } 60% { background: rgba(245, 245, 245, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color7 { 0% { background: rgba(235, 235, 235, 0.5); } 20% { background: rgba(64, 64, 64, 0.5); } 40% { background: rgba(41, 41, 41, 0); } 60% { background: rgba(242, 242, 242, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color8 { 0% { background: rgba(94, 94, 94, 0.5); } 20% { background: rgba(5, 5, 5, 0.5); } 40% { background: rgba(242, 242, 242, 0); } 60% { background: rgba(247, 247, 247, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color9 { 0% { background: rgba(217, 217, 217, 0.5); } 20% { background: rgba(112, 112, 112, 0.5); } 40% { background: rgba(107, 107, 107, 0); } 60% { background: rgba(168, 168, 168, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color10 { 0% { background: rgba(66, 66, 66, 0.5); } 20% { background: rgba(46, 46, 46, 0.5); } 40% { background: rgba(82, 82, 82, 0); } 60% { background: rgba(66, 66, 66, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color11 { 0% { background: rgba(235, 235, 235, 0.5); } 20% { background: rgba(38, 38, 38, 0.5); } 40% { background: rgba(179, 179, 179, 0); } 60% { background: rgba(212, 212, 212, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color12 { 0% { background: rgba(176, 176, 176, 0.5); } 20% { background: rgba(51, 51, 51, 0.5); } 40% { background: rgba(242, 242, 242, 0); } 60% { background: rgba(59, 59, 59, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
.pol-pentagon:nth-child(1) { animation: translate1 6s infinite 1s alternate ease-in-out;
}
@keyframes translate1 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-6.28319rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-10.0531rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(2) { animation: translate2 6s infinite 1s alternate ease-in-out;
}
@keyframes translate2 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-8.79646rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-12.56637rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(3) { animation: translate3 6s infinite 1s alternate ease-in-out;
}
@keyframes translate3 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-11.30973rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-15.07964rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(4) { animation: translate4 6s infinite 1s alternate ease-in-out;
}
@keyframes translate4 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-13.82301rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-17.59292rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(5) { animation: translate5 6s infinite 1s alternate ease-in-out;
}
@keyframes translate5 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-16.33628rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-20.10619rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(6) { animation: translate6 6s infinite 1s alternate ease-in-out;
}
@keyframes translate6 { 100% { transform: scaleY(-1) translateY(17.01302em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
.pol-pentagon:nth-child(7) { animation: translate7 6s infinite 1s alternate ease-in-out;
}
@keyframes translate7 { 0%, 20% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(9.42478rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-21.36283rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-25.13274rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(8) { animation: translate8 6s infinite 1s alternate ease-in-out;
}
@keyframes translate8 { 0%, 20% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(10.68142rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-23.8761rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-27.64602rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(9) { animation: translate9 6s infinite 1s alternate ease-in-out;
}
@keyframes translate9 { 0%, 20% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(11.93805rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-26.38938rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-30.15929rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(10) { animation: translate10 6s infinite 1s alternate ease-in-out;
}
@keyframes translate10 { 0%, 20% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(13.19469rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-28.90265rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-32.67256rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(11) { animation: translate11 6s infinite 1s alternate ease-in-out;
}
@keyframes translate11 { 0%, 20% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(14.45133rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-31.41593rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-35.18584rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(12) { animation: translate12 6s infinite 1s alternate ease-in-out;
}
@keyframes translate12 { 100% { transform: translateY(17.01302em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
@keyframes spin { 100% { transform: rotateX(360deg) rotateY(360deg) translateX(3.81966em) rotateZ(-360deg); }
}
@keyframes up { 0% { transform: translateY(30rem); } 100% { transform: translateY(0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <head> <link href='https://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Mrs+Saint+Delafield' rel='stylesheet' type='text/css'>
</head>
<body> <div class='scene-button'> <div class='btn'> <div class='btn-info'> <h1 class='btn-h1'> <span>B<!-- --><span>L<!-- --><span>A<!-- --><span>C<!-- --><span>K<!-- --><span class="btn-h1_thin">O<!-- --><span class="btn-h1_thin">U<!-- --><span class="btn-h1_thin">T</span> </span> </span> </span> </span> </span> </span> </span> </h1> <div class='btn-line'></div> <p class='btn-author'>by Ee Venn Soh</p> <p class='btn-copy'>"Blackout" is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights.</p> <a class='btn-button' id='btn_click'>BEGIN</a> </div> </div> </div> <div class='scene-spinner'> <div class='spn-wrap'> <div class='spn-spinner'> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> <i class='spn-a'> <b class='spn-b'></b> </i> </div> </div> </div> <div class='scene-torus'> <div class='tor-wrap'> <div class='tor-field'> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> <div class='tor-circle'> <div class='tor-rotor'> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> <div class='tor-dot'></div> </div> </div> </div> </div> </div> <div class='scene-hole'> <div class='hol-hole'> <i class='hol-a'></i> <i class='hol-a'></i> <i class='hol-a'></i> <i class='hol-a'></i> <i class='hol-a'></i> <i class='hol-a'></i> <i class='hol-a'></i> <i class='hol-a'></i> </div> </div> <div class='scene-polygon'> <div class='pol-wrap'> <div class='pol-dodecahedron'> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> </div> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> <script> $(document).ready(function(){ $("#btn_click").on("click", function(){ $(".btn-h1 span").addClass("btn_ghost").delay(1000).queue(function(){ $(".btn-line").addClass("btn_gone"); $(".btn-author").addClass("btn_gone"); $(".btn-copy").addClass("btn_gone"); $(".btn-button").addClass("btn_gone").delay(500).queue(function(){ $(".btn-info").addClass("btn_white"); $(".btn").addClass("btn_shrink").delay(1000).queue(function(){ $(".scene-button").css("display", "none"); $(".scene-spinner").css("display", "flex").delay(4500).queue(function(){ $(".scene-spinner").css("display", "none"); $(".scene-torus").css("display", "flex").delay(9000).queue(function(){ $(".scene-torus").css("display", "none"); $(".scene-hole").css("display", "flex").delay(6500).queue(function(){ $(".scene-hole").css("display", "none"); $(".scene-polygon").css("display", "flex"); }) }) }) }); }); }); }); }); </script>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blackout - Script Codes CSS Codes

body { display: flex; height: 100%; width: 100%; margin: 0; padding: 0; background-color: black; overflow: hidden;
}
a { text-decoration: none; color: white;
}
h1, p { margin: 0;
}
@keyframes btn_noise { 0% { clip: rect(16rem, 50rem, 1rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0); } 2.5% { clip: rect(23rem, 50rem, 5rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.025); } 5% { clip: rect(8rem, 50rem, 8rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.05); } 7.5% { clip: rect(17rem, 50rem, 1rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.075); } 10% { clip: rect(13rem, 50rem, 4rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); } 12.5% { clip: rect(9rem, 50rem, 14rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.125); } 15% { clip: rect(11rem, 50rem, 18rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); } 17.5% { clip: rect(23rem, 50rem, 11rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.175); } 20% { clip: rect(6rem, 50rem, 9rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); } 22.5% { clip: rect(11rem, 50rem, 10rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.225); } 25% { clip: rect(15rem, 50rem, 10rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.25); } 27.5% { clip: rect(13rem, 50rem, 14rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.275); } 30% { clip: rect(20rem, 50rem, 16rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.3); } 32.5% { clip: rect(13rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.325); } 35% { clip: rect(18rem, 50rem, 19rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.35); } 37.5% { clip: rect(9rem, 50rem, 12rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.375); } 40% { clip: rect(10rem, 50rem, 25rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.4); } 42.5% { clip: rect(21rem, 50rem, 6rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.425); } 45% { clip: rect(6rem, 50rem, 3rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.45); } 47.5% { clip: rect(11rem, 50rem, 15rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.475); } 50% { clip: rect(22rem, 50rem, 7rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); } 52.5% { clip: rect(11rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.525); } 55% { clip: rect(19rem, 50rem, 2rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.55); } 57.5% { clip: rect(4rem, 50rem, 13rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.575); } 60% { clip: rect(18rem, 50rem, 15rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); } 62.5% { clip: rect(1rem, 50rem, 18rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.625); } 65% { clip: rect(3rem, 50rem, 21rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.65); } 67.5% { clip: rect(19rem, 50rem, 8rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.675); } 70% { clip: rect(18rem, 50rem, 19rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.7); } 72.5% { clip: rect(10rem, 50rem, 12rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.725); } 75% { clip: rect(17rem, 50rem, 10rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.75); } 77.5% { clip: rect(2rem, 50rem, 3rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.775); } 80% { clip: rect(25rem, 50rem, 6rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); } 82.5% { clip: rect(18rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.825); } 85% { clip: rect(4rem, 50rem, 18rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.85); } 87.5% { clip: rect(11rem, 50rem, 13rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.875); } 90% { clip: rect(16rem, 50rem, 24rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.9); } 92.5% { clip: rect(20rem, 50rem, 1rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.925); } 95% { clip: rect(22rem, 50rem, 2rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.95); } 97.5% { clip: rect(14rem, 50rem, 12rem, -25rem); box-shadow: 0 0 30px rgba(255, 255, 255, 0.975); } 100% { clip: rect(2rem, 50rem, 15rem, -25rem); box-shadow: 0 0 30px white; }
}
@keyframes btn_noise2 { 0% { clip: rect(1rem, 50rem, 6rem, -25rem); } 2.5% { clip: rect(19rem, 50rem, 19rem, -25rem); } 5% { clip: rect(7rem, 50rem, 21rem, -25rem); } 7.5% { clip: rect(16rem, 50rem, 9rem, -25rem); } 10% { clip: rect(21rem, 50rem, 13rem, -25rem); } 12.5% { clip: rect(6rem, 50rem, 6rem, -25rem); } 15% { clip: rect(14rem, 50rem, 16rem, -25rem); } 17.5% { clip: rect(12rem, 50rem, 10rem, -25rem); } 20% { clip: rect(19rem, 50rem, 20rem, -25rem); } 22.5% { clip: rect(23rem, 50rem, 5rem, -25rem); } 25% { clip: rect(21rem, 50rem, 16rem, -25rem); } 27.5% { clip: rect(5rem, 50rem, 13rem, -25rem); } 30% { clip: rect(2rem, 50rem, 17rem, -25rem); } 32.5% { clip: rect(23rem, 50rem, 16rem, -25rem); } 35% { clip: rect(16rem, 50rem, 16rem, -25rem); } 37.5% { clip: rect(14rem, 50rem, 17rem, -25rem); } 40% { clip: rect(15rem, 50rem, 17rem, -25rem); } 42.5% { clip: rect(10rem, 50rem, 19rem, -25rem); } 45% { clip: rect(2rem, 50rem, 17rem, -25rem); } 47.5% { clip: rect(20rem, 50rem, 2rem, -25rem); } 50% { clip: rect(17rem, 50rem, 18rem, -25rem); } 52.5% { clip: rect(20rem, 50rem, 10rem, -25rem); } 55% { clip: rect(11rem, 50rem, 23rem, -25rem); } 57.5% { clip: rect(21rem, 50rem, 15rem, -25rem); } 60% { clip: rect(7rem, 50rem, 20rem, -25rem); } 62.5% { clip: rect(15rem, 50rem, 17rem, -25rem); } 65% { clip: rect(11rem, 50rem, 21rem, -25rem); } 67.5% { clip: rect(25rem, 50rem, 19rem, -25rem); } 70% { clip: rect(15rem, 50rem, 21rem, -25rem); } 72.5% { clip: rect(2rem, 50rem, 23rem, -25rem); } 75% { clip: rect(9rem, 50rem, 25rem, -25rem); } 77.5% { clip: rect(6rem, 50rem, 23rem, -25rem); } 80% { clip: rect(18rem, 50rem, 4rem, -25rem); } 82.5% { clip: rect(3rem, 50rem, 3rem, -25rem); } 85% { clip: rect(17rem, 50rem, 17rem, -25rem); } 87.5% { clip: rect(2rem, 50rem, 23rem, -25rem); } 90% { clip: rect(4rem, 50rem, 22rem, -25rem); } 92.5% { clip: rect(24rem, 50rem, 20rem, -25rem); } 95% { clip: rect(12rem, 50rem, 2rem, -25rem); } 97.5% { clip: rect(7rem, 50rem, 9rem, -25rem); } 100% { clip: rect(3rem, 50rem, 2rem, -25rem); }
}
@keyframes btn_ring { 0% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 30px white; } 100% { box-shadow: inset 0 0 0 20px white, 0 0 30px white; }
}
.btn { border-radius: 50%; transition: transform 0.5s cubic-bezier(1, 0, 0.5, -1) 0.25s, box-shadow 0.5s cubic-bezier(1, -5, 0.5, 5) 0.25s; transform: scale(0.5); animation: btn_noise 3s ease-in-out 1, btn_ring 1s ease-in-out 3s 1; box-shadow: inset 0 0 0 20px white, 0 0 30px white; left: 50%; top: 50%; margin: -12.5rem; width: 25rem; height: 25rem; position: absolute; cursor: pointer;
}
.btn::before, .btn::after { opacity: 0; content: ""; position: absolute; width: 31rem; height: 29rem; margin: -2rem -3rem -2rem -3rem; border-radius: 50%; z-index: -10;
}
.btn::before { box-shadow: 0 -15px 30px -15px rgba(255, 255, 255, 0.8), -25px 15px 50px -25px rgba(255, 255, 255, 0.2), 0 -25px 15px -20px rgba(255, 255, 255, 0.3);
}
.btn::after { box-shadow: 0 -25px 20px -15px rgba(255, 255, 255, 0.2), 10px 25px 15px -30px white, -10px 30px 20px -30px rgba(255, 255, 255, 0.3);
}
.btn-info { border-radius: 50%; transform: scale(0); transition: all 0.3s ease-in-out; background-image: repeating-radial-gradient(rgba(255, 255, 255, 0.2) 0, black 2px, black 50px); overflow: hidden; opacity: 0; background-size: 12.5rem 12.5rem; position: absolute; width: inherit; height: inherit;
}
.btn-h1, .btn-button, .btn-button::after, .btn-button:active::after { font-family: "Oswald", sans-serif; font-weight: 400; font-style: italic; text-align: center; text-transform: uppercase; letter-spacing: 2px;
}
.btn-h1 { text-shadow: 0 0 0 white, 0 0 1px white, 0 1px 2px rgba(255, 255, 255, 0.5); position: absolute; clip: rect(0, 20rem, 20rem, 0); font-size: 2em; padding-top: 3.5rem; left: 23%; color: transparent;
}
.btn-h1 span { font-size: 1.1em;
}
.btn-h1_thin { font-size: 2em; font-family: "Oswald", sans-serif; font-weight: 300; font-style: italic;
}
.btn-line { transition: all 1s ease-in-out; margin: 10.5rem 3rem 2.5rem; border-top: 1px solid white; width: 0;
}
.btn-copy { font-size: 1rem; font-family: "Oswald", sans-serif; font-weight: 300; color: white; text-align: center;
}
.btn-author { transition: all 1s ease-in-out; text-shadow: 0 0 1px white; font-size: 1.8rem; font-family: 'Mrs Saint Delafield', cursive; opacity: 0; color: white; text-align: center;
}
.btn-copy { padding: 0 5rem; margin-bottom: 1.5rem;
}
.btn-button { transition: all 0.1s ease-in-out; font-style: normal; font-size: 0.8rem; color: white; border: 1px solid white; width: 5rem; padding: 0.5rem; margin: 0 auto; display: block; position: relative;
}
.btn-button::before { transition: all 0.1s ease-in-out; content: ""; opacity: 0; position: absolute; width: 5rem; padding: 0.5rem; top: 0%; left: 0%; height: 56%;
}
.btn-button::after { text-shadow: 0 0 1px white, 0 1px 2px rgba(255, 255, 255, 0.5); transition: all 0.1s ease-in-out; font-size: 1.5rem; content: "GO!"; color: black; position: absolute; opacity: 0; top: 0%; left: 35%;
}
.btn-button:hover { width: 7rem;
}
.btn-button:hover::before { opacity: 1; animation: btn_stripe 0.5s infinite linear; background: linear-gradient(45deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000); background-size: 30px 30px; width: 7rem;
}
.btn-button:hover::after { opacity: 1;
}
.btn-button:active { background-color: white;
}
.btn-button:active::before { opacity: 0;
}
.btn-button:active::after { text-shadow: 0 0 1px white, 0 1px 2px rgba(255, 255, 255, 0.5); transition: all 0.1s ease-in-out; font-size: 1.5rem; content: "SWEET"; color: black; position: absolute; top: 0%; left: 20%;
}
@keyframes btn_stripe { 0% { background-position: 0 0; } 100% { background-position: 100% 0; }
}
.btn:hover { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0), 0 0 30px white; transform: scale(1); transition-delay: 1.5s;
}
.btn:hover::before { animation: btn_spin 0.5s cubic-bezier(0.6, 0.2, 0, 0.8) infinite alternate, btn_fade 1.5s cubic-bezier(0.4, 0.2, 0.1, 0.7);
}
.btn:hover::after { animation: btn_spin 1s cubic-bezier(0.4, 0.2, 0.1, 0.7) 0.25s infinite alternate, btn_fade 1.5s cubic-bezier(0.4, 0.2, 0.1, 0.7);
}
.btn:hover .btn-info { transform: scale(1); transition-delay: 1.75s; animation: btn-bg_size 4s cubic-bezier(0.2, 0, 1, 0.5) infinite alternate, btn-bg_positon 3s ease-in-out infinite alternate; opacity: 1;
}
.btn:hover .btn-h1 { animation: btn_noise2 4s 1 linear alternate-reverse; left: 23%;
}
.btn:hover .btn-author { transition-delay: 2.25s; opacity: 1;
}
.btn:hover .btn-line { transition-delay: 1.75s; width: 19rem; margin: 10.5rem 3rem 1rem;
}
@keyframes btn_spin { 100% { transform: rotate(360deg) scale(1.5); }
}
@keyframes btn_fade { 0% { opacity: 1; } 40% { opacity: .2; } 80% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes btn-bg_size { 100% { background-size: 2.5rem 2.5rem; }
}
@keyframes btn-bg_positon { 0% { background-position: left top; } 25% { background-position: right top; } 50% { background-position: right bottom; } 75% { background-position: left bottom; }
}
.btn_ghost { animation: btn_ghost 0.3s ease-in-out 2 alternate; transition: all 0.3s ease-in-out; transition-delay: 0.8s; opacity: 0;
}
.btn-h1 span { animation-delay: 0.05s;
}
.btn-h1 span > span { animation-delay: 0.1s;
}
.btn-h1 span > span > span { animation-delay: 0.15s;
}
.btn-h1 span > span > span > span { animation-delay: 0.2s;
}
.btn-h1 span > span > span > span > span { animation-delay: 0.25s;
}
.btn-h1 span > span > span > span > span > span { animation-delay: 0.3s;
}
.btn-h1 span > span > span > span > span > span > span { animation-delay: 0.35s;
}
.btn-h1 span > span > span > span > span > span > span > span { animation-delay: 0.4s;
}
@keyframes btn_ghost { 100% { text-shadow: 5rem 0 20rem black; }
}
.btn_gone { transition: all 0.2s ease-in-out; transition-delay: 0s !important; transform: translateY(1rem) rotateX(90deg); opacity: 0 !important;
}
.btn_white { transition-delay: 0s !important; background: white !important;
}
.btn_shrink { transition: all 0.4s ease-in-out; transition-delay: 0.4s !important; background: white !important; transform: scale(0) !important; opacity: 0 !important;
}
.scene-spinner { margin: auto; height: 100%; display: none;
}
.spn-wrap { position: absolute; left: 50%; top: 50%;
}
.spn-spinner { position: relative;
}
.spn-a { display: block; position: absolute; opacity: 0;
}
.spn-a .spn-b { display: block; width: 0.25rem; height: 0.25rem; background: white; border-radius: 50%; box-shadow: 0 0 1rem white; animation: spn_spin 1s infinite ease-in-out;
}
@keyframes spn_out1 { 30%, 100% { transform: rotateZ(3.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(1) { animation: spn_out1 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(1) .spn-b { animation-delay: 0.01s;
}
@keyframes spn_out2 { 30%, 100% { transform: rotateZ(7.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(2) { animation: spn_out2 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(2) .spn-b { animation-delay: 0.02s;
}
@keyframes spn_out3 { 30%, 100% { transform: rotateZ(10.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(3) { animation: spn_out3 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(3) .spn-b { animation-delay: 0.03s;
}
@keyframes spn_out4 { 30%, 100% { transform: rotateZ(14.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(4) { animation: spn_out4 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(4) .spn-b { animation-delay: 0.04s;
}
@keyframes spn_out5 { 30%, 100% { transform: rotateZ(18deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(5) { animation: spn_out5 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(5) .spn-b { animation-delay: 0.05s;
}
@keyframes spn_out6 { 30%, 100% { transform: rotateZ(21.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(6) { animation: spn_out6 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(6) .spn-b { animation-delay: 0.06s;
}
@keyframes spn_out7 { 30%, 100% { transform: rotateZ(25.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(7) { animation: spn_out7 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(7) .spn-b { animation-delay: 0.07s;
}
@keyframes spn_out8 { 30%, 100% { transform: rotateZ(28.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(8) { animation: spn_out8 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(8) .spn-b { animation-delay: 0.08s;
}
@keyframes spn_out9 { 30%, 100% { transform: rotateZ(32.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(9) { animation: spn_out9 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(9) .spn-b { animation-delay: 0.09s;
}
@keyframes spn_out10 { 30%, 100% { transform: rotateZ(36deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(10) { animation: spn_out10 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(10) .spn-b { animation-delay: 0.1s;
}
@keyframes spn_out11 { 30%, 100% { transform: rotateZ(39.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(11) { animation: spn_out11 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(11) .spn-b { animation-delay: 0.11s;
}
@keyframes spn_out12 { 30%, 100% { transform: rotateZ(43.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(12) { animation: spn_out12 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(12) .spn-b { animation-delay: 0.12s;
}
@keyframes spn_out13 { 30%, 100% { transform: rotateZ(46.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(13) { animation: spn_out13 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(13) .spn-b { animation-delay: 0.13s;
}
@keyframes spn_out14 { 30%, 100% { transform: rotateZ(50.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(14) { animation: spn_out14 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(14) .spn-b { animation-delay: 0.14s;
}
@keyframes spn_out15 { 30%, 100% { transform: rotateZ(54deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(15) { animation: spn_out15 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(15) .spn-b { animation-delay: 0.15s;
}
@keyframes spn_out16 { 30%, 100% { transform: rotateZ(57.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(16) { animation: spn_out16 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(16) .spn-b { animation-delay: 0.16s;
}
@keyframes spn_out17 { 30%, 100% { transform: rotateZ(61.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(17) { animation: spn_out17 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(17) .spn-b { animation-delay: 0.17s;
}
@keyframes spn_out18 { 30%, 100% { transform: rotateZ(64.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(18) { animation: spn_out18 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(18) .spn-b { animation-delay: 0.18s;
}
@keyframes spn_out19 { 30%, 100% { transform: rotateZ(68.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(19) { animation: spn_out19 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(19) .spn-b { animation-delay: 0.19s;
}
@keyframes spn_out20 { 30%, 100% { transform: rotateZ(72deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(20) { animation: spn_out20 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(20) .spn-b { animation-delay: 0.2s;
}
@keyframes spn_out21 { 30%, 100% { transform: rotateZ(75.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(21) { animation: spn_out21 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(21) .spn-b { animation-delay: 0.21s;
}
@keyframes spn_out22 { 30%, 100% { transform: rotateZ(79.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(22) { animation: spn_out22 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(22) .spn-b { animation-delay: 0.22s;
}
@keyframes spn_out23 { 30%, 100% { transform: rotateZ(82.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(23) { animation: spn_out23 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(23) .spn-b { animation-delay: 0.23s;
}
@keyframes spn_out24 { 30%, 100% { transform: rotateZ(86.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(24) { animation: spn_out24 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(24) .spn-b { animation-delay: 0.24s;
}
@keyframes spn_out25 { 30%, 100% { transform: rotateZ(90deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(25) { animation: spn_out25 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(25) .spn-b { animation-delay: 0.25s;
}
@keyframes spn_out26 { 30%, 100% { transform: rotateZ(93.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(26) { animation: spn_out26 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(26) .spn-b { animation-delay: 0.26s;
}
@keyframes spn_out27 { 30%, 100% { transform: rotateZ(97.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(27) { animation: spn_out27 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(27) .spn-b { animation-delay: 0.27s;
}
@keyframes spn_out28 { 30%, 100% { transform: rotateZ(100.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(28) { animation: spn_out28 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(28) .spn-b { animation-delay: 0.28s;
}
@keyframes spn_out29 { 30%, 100% { transform: rotateZ(104.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(29) { animation: spn_out29 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(29) .spn-b { animation-delay: 0.29s;
}
@keyframes spn_out30 { 30%, 100% { transform: rotateZ(108deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(30) { animation: spn_out30 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(30) .spn-b { animation-delay: 0.3s;
}
@keyframes spn_out31 { 30%, 100% { transform: rotateZ(111.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(31) { animation: spn_out31 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(31) .spn-b { animation-delay: 0.31s;
}
@keyframes spn_out32 { 30%, 100% { transform: rotateZ(115.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(32) { animation: spn_out32 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(32) .spn-b { animation-delay: 0.32s;
}
@keyframes spn_out33 { 30%, 100% { transform: rotateZ(118.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(33) { animation: spn_out33 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(33) .spn-b { animation-delay: 0.33s;
}
@keyframes spn_out34 { 30%, 100% { transform: rotateZ(122.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(34) { animation: spn_out34 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(34) .spn-b { animation-delay: 0.34s;
}
@keyframes spn_out35 { 30%, 100% { transform: rotateZ(126deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(35) { animation: spn_out35 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(35) .spn-b { animation-delay: 0.35s;
}
@keyframes spn_out36 { 30%, 100% { transform: rotateZ(129.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(36) { animation: spn_out36 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(36) .spn-b { animation-delay: 0.36s;
}
@keyframes spn_out37 { 30%, 100% { transform: rotateZ(133.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(37) { animation: spn_out37 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(37) .spn-b { animation-delay: 0.37s;
}
@keyframes spn_out38 { 30%, 100% { transform: rotateZ(136.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(38) { animation: spn_out38 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(38) .spn-b { animation-delay: 0.38s;
}
@keyframes spn_out39 { 30%, 100% { transform: rotateZ(140.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(39) { animation: spn_out39 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(39) .spn-b { animation-delay: 0.39s;
}
@keyframes spn_out40 { 30%, 100% { transform: rotateZ(144deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(40) { animation: spn_out40 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(40) .spn-b { animation-delay: 0.4s;
}
@keyframes spn_out41 { 30%, 100% { transform: rotateZ(147.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(41) { animation: spn_out41 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(41) .spn-b { animation-delay: 0.41s;
}
@keyframes spn_out42 { 30%, 100% { transform: rotateZ(151.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(42) { animation: spn_out42 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(42) .spn-b { animation-delay: 0.42s;
}
@keyframes spn_out43 { 30%, 100% { transform: rotateZ(154.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(43) { animation: spn_out43 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(43) .spn-b { animation-delay: 0.43s;
}
@keyframes spn_out44 { 30%, 100% { transform: rotateZ(158.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(44) { animation: spn_out44 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(44) .spn-b { animation-delay: 0.44s;
}
@keyframes spn_out45 { 30%, 100% { transform: rotateZ(162deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(45) { animation: spn_out45 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(45) .spn-b { animation-delay: 0.45s;
}
@keyframes spn_out46 { 30%, 100% { transform: rotateZ(165.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(46) { animation: spn_out46 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(46) .spn-b { animation-delay: 0.46s;
}
@keyframes spn_out47 { 30%, 100% { transform: rotateZ(169.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(47) { animation: spn_out47 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(47) .spn-b { animation-delay: 0.47s;
}
@keyframes spn_out48 { 30%, 100% { transform: rotateZ(172.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(48) { animation: spn_out48 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(48) .spn-b { animation-delay: 0.48s;
}
@keyframes spn_out49 { 30%, 100% { transform: rotateZ(176.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(49) { animation: spn_out49 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(49) .spn-b { animation-delay: 0.49s;
}
@keyframes spn_out50 { 30%, 100% { transform: rotateZ(180deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(50) { animation: spn_out50 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(50) .spn-b { animation-delay: 0.5s;
}
@keyframes spn_out51 { 30%, 100% { transform: rotateZ(183.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(51) { animation: spn_out51 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(51) .spn-b { animation-delay: 0.51s;
}
@keyframes spn_out52 { 30%, 100% { transform: rotateZ(187.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(52) { animation: spn_out52 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(52) .spn-b { animation-delay: 0.52s;
}
@keyframes spn_out53 { 30%, 100% { transform: rotateZ(190.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(53) { animation: spn_out53 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(53) .spn-b { animation-delay: 0.53s;
}
@keyframes spn_out54 { 30%, 100% { transform: rotateZ(194.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(54) { animation: spn_out54 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(54) .spn-b { animation-delay: 0.54s;
}
@keyframes spn_out55 { 30%, 100% { transform: rotateZ(198deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(55) { animation: spn_out55 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(55) .spn-b { animation-delay: 0.55s;
}
@keyframes spn_out56 { 30%, 100% { transform: rotateZ(201.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(56) { animation: spn_out56 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(56) .spn-b { animation-delay: 0.56s;
}
@keyframes spn_out57 { 30%, 100% { transform: rotateZ(205.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(57) { animation: spn_out57 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(57) .spn-b { animation-delay: 0.57s;
}
@keyframes spn_out58 { 30%, 100% { transform: rotateZ(208.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(58) { animation: spn_out58 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(58) .spn-b { animation-delay: 0.58s;
}
@keyframes spn_out59 { 30%, 100% { transform: rotateZ(212.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(59) { animation: spn_out59 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(59) .spn-b { animation-delay: 0.59s;
}
@keyframes spn_out60 { 30%, 100% { transform: rotateZ(216deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(60) { animation: spn_out60 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(60) .spn-b { animation-delay: 0.6s;
}
@keyframes spn_out61 { 30%, 100% { transform: rotateZ(219.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(61) { animation: spn_out61 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(61) .spn-b { animation-delay: 0.61s;
}
@keyframes spn_out62 { 30%, 100% { transform: rotateZ(223.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(62) { animation: spn_out62 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(62) .spn-b { animation-delay: 0.62s;
}
@keyframes spn_out63 { 30%, 100% { transform: rotateZ(226.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(63) { animation: spn_out63 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(63) .spn-b { animation-delay: 0.63s;
}
@keyframes spn_out64 { 30%, 100% { transform: rotateZ(230.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(64) { animation: spn_out64 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(64) .spn-b { animation-delay: 0.64s;
}
@keyframes spn_out65 { 30%, 100% { transform: rotateZ(234deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(65) { animation: spn_out65 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(65) .spn-b { animation-delay: 0.65s;
}
@keyframes spn_out66 { 30%, 100% { transform: rotateZ(237.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(66) { animation: spn_out66 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(66) .spn-b { animation-delay: 0.66s;
}
@keyframes spn_out67 { 30%, 100% { transform: rotateZ(241.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(67) { animation: spn_out67 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(67) .spn-b { animation-delay: 0.67s;
}
@keyframes spn_out68 { 30%, 100% { transform: rotateZ(244.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(68) { animation: spn_out68 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(68) .spn-b { animation-delay: 0.68s;
}
@keyframes spn_out69 { 30%, 100% { transform: rotateZ(248.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(69) { animation: spn_out69 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(69) .spn-b { animation-delay: 0.69s;
}
@keyframes spn_out70 { 30%, 100% { transform: rotateZ(252deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(70) { animation: spn_out70 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(70) .spn-b { animation-delay: 0.7s;
}
@keyframes spn_out71 { 30%, 100% { transform: rotateZ(255.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(71) { animation: spn_out71 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(71) .spn-b { animation-delay: 0.71s;
}
@keyframes spn_out72 { 30%, 100% { transform: rotateZ(259.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(72) { animation: spn_out72 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(72) .spn-b { animation-delay: 0.72s;
}
@keyframes spn_out73 { 30%, 100% { transform: rotateZ(262.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(73) { animation: spn_out73 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(73) .spn-b { animation-delay: 0.73s;
}
@keyframes spn_out74 { 30%, 100% { transform: rotateZ(266.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(74) { animation: spn_out74 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(74) .spn-b { animation-delay: 0.74s;
}
@keyframes spn_out75 { 30%, 100% { transform: rotateZ(270deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(75) { animation: spn_out75 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(75) .spn-b { animation-delay: 0.75s;
}
@keyframes spn_out76 { 30%, 100% { transform: rotateZ(273.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(76) { animation: spn_out76 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(76) .spn-b { animation-delay: 0.76s;
}
@keyframes spn_out77 { 30%, 100% { transform: rotateZ(277.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(77) { animation: spn_out77 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(77) .spn-b { animation-delay: 0.77s;
}
@keyframes spn_out78 { 30%, 100% { transform: rotateZ(280.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(78) { animation: spn_out78 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(78) .spn-b { animation-delay: 0.78s;
}
@keyframes spn_out79 { 30%, 100% { transform: rotateZ(284.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(79) { animation: spn_out79 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(79) .spn-b { animation-delay: 0.79s;
}
@keyframes spn_out80 { 30%, 100% { transform: rotateZ(288deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(80) { animation: spn_out80 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(80) .spn-b { animation-delay: 0.8s;
}
@keyframes spn_out81 { 30%, 100% { transform: rotateZ(291.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(81) { animation: spn_out81 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(81) .spn-b { animation-delay: 0.81s;
}
@keyframes spn_out82 { 30%, 100% { transform: rotateZ(295.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(82) { animation: spn_out82 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(82) .spn-b { animation-delay: 0.82s;
}
@keyframes spn_out83 { 30%, 100% { transform: rotateZ(298.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(83) { animation: spn_out83 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(83) .spn-b { animation-delay: 0.83s;
}
@keyframes spn_out84 { 30%, 100% { transform: rotateZ(302.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(84) { animation: spn_out84 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(84) .spn-b { animation-delay: 0.84s;
}
@keyframes spn_out85 { 30%, 100% { transform: rotateZ(306deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(85) { animation: spn_out85 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(85) .spn-b { animation-delay: 0.85s;
}
@keyframes spn_out86 { 30%, 100% { transform: rotateZ(309.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(86) { animation: spn_out86 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(86) .spn-b { animation-delay: 0.86s;
}
@keyframes spn_out87 { 30%, 100% { transform: rotateZ(313.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(87) { animation: spn_out87 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(87) .spn-b { animation-delay: 0.87s;
}
@keyframes spn_out88 { 30%, 100% { transform: rotateZ(316.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(88) { animation: spn_out88 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(88) .spn-b { animation-delay: 0.88s;
}
@keyframes spn_out89 { 30%, 100% { transform: rotateZ(320.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(89) { animation: spn_out89 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(89) .spn-b { animation-delay: 0.89s;
}
@keyframes spn_out90 { 30%, 100% { transform: rotateZ(324deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(90) { animation: spn_out90 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(90) .spn-b { animation-delay: 0.9s;
}
@keyframes spn_out91 { 30%, 100% { transform: rotateZ(327.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(91) { animation: spn_out91 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(91) .spn-b { animation-delay: 0.91s;
}
@keyframes spn_out92 { 30%, 100% { transform: rotateZ(331.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(92) { animation: spn_out92 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(92) .spn-b { animation-delay: 0.92s;
}
@keyframes spn_out93 { 30%, 100% { transform: rotateZ(334.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(93) { animation: spn_out93 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(93) .spn-b { animation-delay: 0.93s;
}
@keyframes spn_out94 { 30%, 100% { transform: rotateZ(338.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(94) { animation: spn_out94 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(94) .spn-b { animation-delay: 0.94s;
}
@keyframes spn_out95 { 30%, 100% { transform: rotateZ(342deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(95) { animation: spn_out95 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(95) .spn-b { animation-delay: 0.95s;
}
@keyframes spn_out96 { 30%, 100% { transform: rotateZ(345.6deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(96) { animation: spn_out96 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(96) .spn-b { animation-delay: 0.96s;
}
@keyframes spn_out97 { 30%, 100% { transform: rotateZ(349.2deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(97) { animation: spn_out97 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(97) .spn-b { animation-delay: 0.97s;
}
@keyframes spn_out98 { 30%, 100% { transform: rotateZ(352.8deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(98) { animation: spn_out98 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(98) .spn-b { animation-delay: 0.98s;
}
@keyframes spn_out99 { 30%, 100% { transform: rotateZ(356.4deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(99) { animation: spn_out99 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(99) .spn-b { animation-delay: 0.99s;
}
@keyframes spn_out100 { 30%, 100% { transform: rotateZ(360deg) translateX(5em); opacity: 1; }
}
.spn-a:nth-child(100) { animation: spn_out100 2s 2 alternate ease-in-out;
}
.spn-a:nth-child(100) .spn-b { animation-delay: 1s;
}
@keyframes spn_spin { 15% { transform: scale(3); } 50% { transform: scale(1); }
}
.scene-torus { margin: auto; height: 100%; display: none;
}
.tor-wrap { position: absolute; left: 50%; top: 50%;
}
.tor-field { position: relative; transform: rotateX(-30deg) rotateY(0deg); animation: tor_rotateY 10s ease-in-out 1; opacity: 1;
}
.tor-field * { position: absolute;
}
.tor-field, .tor-field * { transform-style: preserve-3d;
}
.tor-circle:nth-child(1) { transform: rotateY(12deg) translateZ(8rem);
}
.tor-circle:nth-child(1) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.2s;
}
.tor-circle:nth-child(2) { transform: rotateY(24deg) translateZ(8rem);
}
.tor-circle:nth-child(2) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.4s;
}
.tor-circle:nth-child(3) { transform: rotateY(36deg) translateZ(8rem);
}
.tor-circle:nth-child(3) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.6s;
}
.tor-circle:nth-child(4) { transform: rotateY(48deg) translateZ(8rem);
}
.tor-circle:nth-child(4) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 0.8s;
}
.tor-circle:nth-child(5) { transform: rotateY(60deg) translateZ(8rem);
}
.tor-circle:nth-child(5) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1s;
}
.tor-circle:nth-child(6) { transform: rotateY(72deg) translateZ(8rem);
}
.tor-circle:nth-child(6) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.2s;
}
.tor-circle:nth-child(7) { transform: rotateY(84deg) translateZ(8rem);
}
.tor-circle:nth-child(7) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.4s;
}
.tor-circle:nth-child(8) { transform: rotateY(96deg) translateZ(8rem);
}
.tor-circle:nth-child(8) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.6s;
}
.tor-circle:nth-child(9) { transform: rotateY(108deg) translateZ(8rem);
}
.tor-circle:nth-child(9) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 1.8s;
}
.tor-circle:nth-child(10) { transform: rotateY(120deg) translateZ(8rem);
}
.tor-circle:nth-child(10) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2s;
}
.tor-circle:nth-child(11) { transform: rotateY(132deg) translateZ(8rem);
}
.tor-circle:nth-child(11) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.2s;
}
.tor-circle:nth-child(12) { transform: rotateY(144deg) translateZ(8rem);
}
.tor-circle:nth-child(12) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.4s;
}
.tor-circle:nth-child(13) { transform: rotateY(156deg) translateZ(8rem);
}
.tor-circle:nth-child(13) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.6s;
}
.tor-circle:nth-child(14) { transform: rotateY(168deg) translateZ(8rem);
}
.tor-circle:nth-child(14) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 2.8s;
}
.tor-circle:nth-child(15) { transform: rotateY(180deg) translateZ(8rem);
}
.tor-circle:nth-child(15) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3s;
}
.tor-circle:nth-child(16) { transform: rotateY(192deg) translateZ(8rem);
}
.tor-circle:nth-child(16) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.2s;
}
.tor-circle:nth-child(17) { transform: rotateY(204deg) translateZ(8rem);
}
.tor-circle:nth-child(17) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.4s;
}
.tor-circle:nth-child(18) { transform: rotateY(216deg) translateZ(8rem);
}
.tor-circle:nth-child(18) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.6s;
}
.tor-circle:nth-child(19) { transform: rotateY(228deg) translateZ(8rem);
}
.tor-circle:nth-child(19) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 3.8s;
}
.tor-circle:nth-child(20) { transform: rotateY(240deg) translateZ(8rem);
}
.tor-circle:nth-child(20) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4s;
}
.tor-circle:nth-child(21) { transform: rotateY(252deg) translateZ(8rem);
}
.tor-circle:nth-child(21) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.2s;
}
.tor-circle:nth-child(22) { transform: rotateY(264deg) translateZ(8rem);
}
.tor-circle:nth-child(22) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.4s;
}
.tor-circle:nth-child(23) { transform: rotateY(276deg) translateZ(8rem);
}
.tor-circle:nth-child(23) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.6s;
}
.tor-circle:nth-child(24) { transform: rotateY(288deg) translateZ(8rem);
}
.tor-circle:nth-child(24) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 4.8s;
}
.tor-circle:nth-child(25) { transform: rotateY(300deg) translateZ(8rem);
}
.tor-circle:nth-child(25) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5s;
}
.tor-circle:nth-child(26) { transform: rotateY(312deg) translateZ(8rem);
}
.tor-circle:nth-child(26) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.2s;
}
.tor-circle:nth-child(27) { transform: rotateY(324deg) translateZ(8rem);
}
.tor-circle:nth-child(27) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.4s;
}
.tor-circle:nth-child(28) { transform: rotateY(336deg) translateZ(8rem);
}
.tor-circle:nth-child(28) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.6s;
}
.tor-circle:nth-child(29) { transform: rotateY(348deg) translateZ(8rem);
}
.tor-circle:nth-child(29) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 5.8s;
}
.tor-circle:nth-child(30) { transform: rotateY(360deg) translateZ(8rem);
}
.tor-circle:nth-child(30) .tor-rotor { animation: tor_rotateX 3s linear infinite; animation-delay: 6s;
}
.tor-dot { width: 0.25rem; height: 0.25rem; border-radius: 50%; backface-visibility: hidden;
}
.tor-dot:nth-child(1) { transform: rotateX(18deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(2) { transform: rotateX(36deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(3) { transform: rotateX(54deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(4) { transform: rotateX(72deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(5) { transform: rotateX(90deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(6) { transform: rotateX(108deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(7) { transform: rotateX(126deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(8) { transform: rotateX(144deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(9) { transform: rotateX(162deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(10) { transform: rotateX(180deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(11) { transform: rotateX(198deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(12) { transform: rotateX(216deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(13) { transform: rotateX(234deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(14) { transform: rotateX(252deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(15) { transform: rotateX(270deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(16) { transform: rotateX(288deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(17) { transform: rotateX(306deg) translateZ(3rem); background-color: white;
}
.tor-dot:nth-child(18) { transform: rotateX(324deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.2);
}
.tor-dot:nth-child(19) { transform: rotateX(342deg) translateZ(3rem); background-color: rgba(255, 255, 255, 0.5);
}
.tor-dot:nth-child(20) { transform: rotateX(360deg) translateZ(3rem); background-color: white;
}
@keyframes tor_rotateX { 100% { transform: rotateX(360deg); }
}
@keyframes tor_rotateY { 20%, 30% { transform: rotateX(90deg) rotateY(360deg); } 40%, 50% { transform: rotateX(-30deg) rotateZ(30deg) scale(0.6); } 60%, 80% { transform: rotateX(60deg) rotateZ(40deg); } 90%, 100% { transform: rotateX(-90deg) rotateY(1440deg) scale(2); }
}
.scene-hole { margin: auto; height: 100%; display: none;
}
.hol-hole { top: 50%; left: 50%; position: absolute;
}
.hol-a { display: block; position: absolute; width: 20rem; height: 20rem; margin: -10rem; border-radius: 50%; opacity: 0; animation: hol_scale 2s 2 linear;
}
i:nth-child(1) { animation-delay: 0.25s;
}
i:nth-child(2) { animation-delay: 0.5s;
}
i:nth-child(3) { animation-delay: 0.75s;
}
i:nth-child(4) { animation-delay: 1s;
}
i:nth-child(5) { animation-delay: 1.25s;
}
i:nth-child(6) { animation-delay: 1.5s;
}
i:nth-child(7) { animation-delay: 1.75s;
}
i:nth-child(8) { animation-delay: 2s;
}
@keyframes hol_scale { 0% { transform: scale(2); opacity: 0; box-shadow: 0 0 50px rgba(255, 255, 255, 0.5); } 50% { transform: scale(1) translate(0, -1rem); opacity: 1; box-shadow: 0 -10px 20px rgba(255, 255, 255, 0.5); } 100% { transform: scale(0.1) translate(0, 1rem); opacity: 0; box-shadow: 0 50px 20px rgba(255, 255, 255, 0.5); }
}
.scene-polygon { margin: auto; height: 100%; display: none;
}
.pol-wrap { height: inherit; perspective: 35rem; perspective-origin: 50% 50%; position: absolute; left: 50%; animation: up 4s 1 ease-in-out;
}
.pol-dodecahedron { position: relative; transform-style: preserve-3d; animation: spin 50s infinite alternate cubic-bezier(0, -5, 1, 10);
}
.pol-dodecahedron, .pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { top: 50%; left: 50%; margin: -10em; width: 20em; height: 20em;
}
.pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { position: absolute; overflow: hidden;
}
.pol-pentagon:nth-child(1) { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(1) .pol-pentagon-inner::before { animation: color1 3s infinite alternate linear;
}
.pol-pentagon:nth-child(2) { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(2) .pol-pentagon-inner::before { animation: color2 3s infinite alternate linear;
}
.pol-pentagon:nth-child(3) { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(3) .pol-pentagon-inner::before { animation: color3 3s infinite alternate linear;
}
.pol-pentagon:nth-child(4) { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(4) .pol-pentagon-inner::before { animation: color4 3s infinite alternate linear;
}
.pol-pentagon:nth-child(5) { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(5) .pol-pentagon-inner::before { animation: color5 3s infinite alternate linear;
}
.pol-pentagon:nth-child(6) { transform: scaleY(-1) translateY(8.50651em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(6) .pol-pentagon-inner::before { animation: color6 3s infinite alternate linear;
}
.pol-pentagon:nth-child(7) { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(7) .pol-pentagon-inner::before { animation: color7 3s infinite alternate linear;
}
.pol-pentagon:nth-child(8) { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(8) .pol-pentagon-inner::before { animation: color8 3s infinite alternate linear;
}
.pol-pentagon:nth-child(9) { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(9) .pol-pentagon-inner::before { animation: color9 3s infinite alternate linear;
}
.pol-pentagon:nth-child(10) { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(10) .pol-pentagon-inner::before { animation: color10 3s infinite alternate linear;
}
.pol-pentagon:nth-child(11) { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(11) .pol-pentagon-inner::before { animation: color11 3s infinite alternate linear;
}
.pol-pentagon:nth-child(12) { transform: translateY(8.50651em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(12) .pol-pentagon-inner::before { animation: color12 3s infinite alternate linear;
}
.pol-pentagon-inner { transform: scaleY(1.05146) skewX(-0.31416rad) rotate(0.62832rad) translateY(-7.26543em) rotate(0.31416rad) skewY(0.94248rad) scaleX(0.58779);
}
.pol-pentagon-inner:before { content: ""; transform: scaleX(1.7013) skewY(-0.94248rad) rotate(-0.31416rad) translateY(-2.73457em);
}
@keyframes color1 { 0% { background: rgba(41, 41, 41, 0.5); } 20% { background: rgba(59, 59, 59, 0.5); } 40% { background: rgba(255, 255, 255, 0.4); } 60% { background: rgba(23, 23, 23, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color2 { 0% { background: rgba(82, 82, 82, 0.5); } 20% { background: rgba(201, 201, 201, 0.5); } 40% { background: rgba(156, 156, 156, 0.4); } 60% { background: rgba(3, 3, 3, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color3 { 0% { background: rgba(161, 161, 161, 0.5); } 20% { background: rgba(224, 224, 224, 0.5); } 40% { background: rgba(240, 240, 240, 0.4); } 60% { background: rgba(36, 36, 36, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color4 { 0% { background: rgba(166, 166, 166, 0.5); } 20% { background: rgba(207, 207, 207, 0.5); } 40% { background: rgba(125, 125, 125, 0.4); } 60% { background: rgba(173, 173, 173, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color5 { 0% { background: rgba(28, 28, 28, 0.5); } 20% { background: rgba(150, 150, 150, 0.5); } 40% { background: rgba(219, 219, 219, 0.4); } 60% { background: rgba(64, 64, 64, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color6 { 0% { background: rgba(217, 217, 217, 0.5); } 20% { background: rgba(179, 179, 179, 0.5); } 40% { background: rgba(156, 156, 156, 0.4); } 60% { background: rgba(245, 245, 245, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color7 { 0% { background: rgba(235, 235, 235, 0.5); } 20% { background: rgba(64, 64, 64, 0.5); } 40% { background: rgba(41, 41, 41, 0); } 60% { background: rgba(242, 242, 242, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color8 { 0% { background: rgba(94, 94, 94, 0.5); } 20% { background: rgba(5, 5, 5, 0.5); } 40% { background: rgba(242, 242, 242, 0); } 60% { background: rgba(247, 247, 247, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color9 { 0% { background: rgba(217, 217, 217, 0.5); } 20% { background: rgba(112, 112, 112, 0.5); } 40% { background: rgba(107, 107, 107, 0); } 60% { background: rgba(168, 168, 168, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color10 { 0% { background: rgba(66, 66, 66, 0.5); } 20% { background: rgba(46, 46, 46, 0.5); } 40% { background: rgba(82, 82, 82, 0); } 60% { background: rgba(66, 66, 66, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color11 { 0% { background: rgba(235, 235, 235, 0.5); } 20% { background: rgba(38, 38, 38, 0.5); } 40% { background: rgba(179, 179, 179, 0); } 60% { background: rgba(212, 212, 212, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color12 { 0% { background: rgba(176, 176, 176, 0.5); } 20% { background: rgba(51, 51, 51, 0.5); } 40% { background: rgba(242, 242, 242, 0); } 60% { background: rgba(59, 59, 59, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
.pol-pentagon:nth-child(1) { animation: translate1 6s infinite 1s alternate ease-in-out;
}
@keyframes translate1 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-6.28319rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-10.0531rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(2) { animation: translate2 6s infinite 1s alternate ease-in-out;
}
@keyframes translate2 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-8.79646rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-12.56637rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(3) { animation: translate3 6s infinite 1s alternate ease-in-out;
}
@keyframes translate3 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-11.30973rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-15.07964rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(4) { animation: translate4 6s infinite 1s alternate ease-in-out;
}
@keyframes translate4 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-13.82301rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-17.59292rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(5) { animation: translate5 6s infinite 1s alternate ease-in-out;
}
@keyframes translate5 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-16.33628rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-20.10619rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(6) { animation: translate6 6s infinite 1s alternate ease-in-out;
}
@keyframes translate6 { 100% { transform: scaleY(-1) translateY(17.01302em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
.pol-pentagon:nth-child(7) { animation: translate7 6s infinite 1s alternate ease-in-out;
}
@keyframes translate7 { 0%, 20% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(9.42478rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-21.36283rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-25.13274rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(8) { animation: translate8 6s infinite 1s alternate ease-in-out;
}
@keyframes translate8 { 0%, 20% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(10.68142rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-23.8761rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-27.64602rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(9) { animation: translate9 6s infinite 1s alternate ease-in-out;
}
@keyframes translate9 { 0%, 20% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(11.93805rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-26.38938rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-30.15929rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(10) { animation: translate10 6s infinite 1s alternate ease-in-out;
}
@keyframes translate10 { 0%, 20% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(13.19469rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-28.90265rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-32.67256rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(11) { animation: translate11 6s infinite 1s alternate ease-in-out;
}
@keyframes translate11 { 0%, 20% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(14.45133rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-31.41593rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-35.18584rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(12) { animation: translate12 6s infinite 1s alternate ease-in-out;
}
@keyframes translate12 { 100% { transform: translateY(17.01302em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
@keyframes spin { 100% { transform: rotateX(360deg) rotateY(360deg) translateX(3.81966em) rotateZ(-360deg); }
}
@keyframes up { 0% { transform: translateY(30rem); } 100% { transform: translateY(0); }
}

Blackout - Script Codes JS Codes

/*
Case Study
"Blackout is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights"
https://www.behance.net/gallery/20910707/Blackout
(Note: This is a just-for-fun project and it is not feasible for actual deployment as there are many performance issues. There are better technologies for similar output)
*/
Blackout - Script Codes
Blackout - Script Codes
Home Page Home
Developer Ee Venn Soh
Username vennsoh
Uploaded September 07, 2022
Rating 4.5
Size 23,023 Kb
Views 36,432
Do you need developer help for Blackout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ee Venn Soh (vennsoh) Script Codes
Name
UI
CSS Pattern
Meteor Rain
A Pen by Ee Venn Soh
Crazy Ball
Polygon Dodecahedron in CSS
Folding
Smiley Egg
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!