<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:. | | | Filename : LA_falling-letters.html | | Label : Playground | | Author : Leonard Anders | | Size : 3.944 bytes | | Created : 12. February 2024 at 12:20 | | | ::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>shuffle</title> <style> @font-face { font-family: Konsole; src: url(../_fonts/Konsolev1.1-VF.ttf); } body{ font-family: Konsole; font-size: 10vh; text-align: center; align-items: center; justify-content: center; height: 100vh; } /* the parent class for the whole page */ .parent-class { /* defines the position of the parent class */ position: relative; top: 50vh; Left: 50vw; } .class { /* defines the position of the child class */ position: absolute; /* defines the duration and the repeats for animation */ animation: change-class 10s linear infinite; } /* defines the position of all the child classes */ .div-class-1{ position: absolute; top: 0%; left: -3em;} .div-class-2{ position: absolute; top: 0%; left: -2.3em;} .div-class-3{ position: absolute; top: 0%; left: -1.5em;} .div-class-4{ position: absolute; top: 0%; left: -0.7em;} .div-class-5{ position: absolute; top: 0%; left: -0.1em;} .div-class-6{ position: absolute; top: 0%; left: 0.6em;} .div-class-7{ position: absolute; top: 0%; left: 1.2em;} /* defines the animation changes for the first letter/ child class */ @keyframes change-class { 0%, 20% { opacity: 0; } 20.05%, 21.2% { opacity: 1; } 21.25%, 100% { opacity: 0; } } @keyframes change-class1 { 0%, 20% { opacity: 0; } 20.01%, 90.5% { opacity: 1; } 90.51%, 100% { opacity: 0; } } @keyframes change-class2 { 0%, 20% { opacity: 0; } 20.01%, 81.2% { opacity: 1; } 81.21%, 100% { opacity: 0; } } @keyframes change-class3 { 0%, 20% { opacity: 0; } 20.01%, 72% { opacity: 1; } 72.01%, 100% { opacity: 0; } } @keyframes change-class4 { 0%, 20% { opacity: 0; } 20.01%, 63% { opacity: 1; } 63.01%, 100% { opacity: 0; } } @keyframes change-class5 { 0%, 20% { opacity: 0; } 20.01%, 53% { opacity: 1; } 53.01%, 100% { opacity: 0; } } @keyframes change-class6 { 0%, 20% { opacity: 0; } 20.01%, 43% { opacity: 1; } 43.01%, 100% { opacity: 0; } } @keyframes change-class7 { 0%, 20% { opacity: 0; } 20.01%, 33% { opacity: 1; } 33.01%, 100% { opacity: 0; } } /* defines the animation duration and repeats for the letters */ .a10{animation: change-class1 10s linear infinite;} .b18 {animation: change-class2 10s linear infinite;} .c26 {animation: change-class3 10s linear infinite;} .d34 {animation: change-class4 10s linear infinite;} .e42 {animation: change-class5 10s linear infinite;} .f50 {animation: change-class6 10s linear infinite;} .g58 {animation: change-class7 10s linear infinite;} /* defines the animation delay and shuffle mode for the letters, so it looks random */ .a1 {opacity: 0; animation-delay: 0s;} .a2 {opacity: 0; animation-delay: 0.12s;} .a3 {opacity: 0; animation-delay: 0.24s;} .a4 {opacity: 0; animation-delay: 0.36s;} .a5 {opacity: 0; animation-delay: 0.48s;} .a6 {opacity: 0; animation-delay: 0.6s;} .a7 {opacity: 0; animation-delay: 0.72s;} .a8 {opacity: 0; animation-delay: 0.84s;} .a9 {opacity: 0; animation-delay: 0.96s;} .a10 {opacity: 0; animation-delay: 1.08s;} .b2 {opacity: 0; animation-delay: 0.12s;} .b3 {opacity: 0; animation-delay: 0.24s;} .b4 {opacity: 0; animation-delay: 0.36s;} .b5 {opacity: 0; animation-delay: 0.48s;} .b6 {opacity: 0; animation-delay: 0.6s;} .b7 {opacity: 0; animation-delay: 0.72s;} .b8 {opacity: 0; animation-delay: 0.84s;} .b9 {opacity: 0; animation-delay: 0.96s;} .b10 {opacity: 0; animation-delay: 1.08s;} .b11 {opacity: 0; animation-delay: 1.2s;} .b12 {opacity: 0; animation-delay: 1.32s;} .b13 {opacity: 0; animation-delay: 1.44s;} .b14 {opacity: 0; animation-delay: 1.56s;} .b15 {opacity: 0; animation-delay: 1.68s;} .b16 {opacity: 0; animation-delay: 1.8s;} .b17 {opacity: 0; animation-delay: 1.92s;} .b18 {opacity: 0; animation-delay: 2.04s;} .c3 {opacity: 0; animation-delay: 0.24s;} .c4 {opacity: 0; animation-delay: 0.36s;} .c5 {opacity: 0; animation-delay: 0.48s;} .c6 {opacity: 0; animation-delay: 0.6s;} .c7 {opacity: 0; animation-delay: 0.72s;} .c8 {opacity: 0; animation-delay: 0.84s;} .c9 {opacity: 0; animation-delay: 0.96s;} .c10 {opacity: 0; animation-delay: 1.08s;} .c11 {opacity: 0; animation-delay: 1.2s;} .c12 {opacity: 0; animation-delay: 1.32s;} .c13 {opacity: 0; animation-delay: 1.44s;} .c14 {opacity: 0; animation-delay: 1.56s;} .c15 {opacity: 0; animation-delay: 1.68s;} .c16 {opacity: 0; animation-delay: 1.8s;} .c17 {opacity: 0; animation-delay: 1.92s;} .c18 {opacity: 0; animation-delay: 2.04s;} .c19 {opacity: 0; animation-delay: 2.16s;} .c20 {opacity: 0; animation-delay: 2.28s;} .c21 {opacity: 0; animation-delay: 2.4s;} .c22 {opacity: 0; animation-delay: 2.52s;} .c23 {opacity: 0; animation-delay: 2.64s;} .c24 {opacity: 0; animation-delay: 2.76s;} .c25 {opacity: 0; animation-delay: 2.88s;} .c26 {opacity: 0; animation-delay: 3s;} .d4 {opacity: 0; animation-delay: 0.36s;} .d5 {opacity: 0; animation-delay: 0.48s;} .d6 {opacity: 0; animation-delay: 0.6s;} .d7 {opacity: 0; animation-delay: 0.72s;} .d8 {opacity: 0; animation-delay: 0.84s;} .d9 {opacity: 0; animation-delay: 0.96s;} .d10 {opacity: 0; animation-delay: 1.08s;} .d11 {opacity: 0; animation-delay: 1.2s;} .d12 {opacity: 0; animation-delay: 1.32s;} .d13 {opacity: 0; animation-delay: 1.44s;} .d14 {opacity: 0; animation-delay: 1.56s;} .d15 {opacity: 0; animation-delay: 1.68s;} .d16 {opacity: 0; animation-delay: 1.8s;} .d17 {opacity: 0; animation-delay: 1.92s;} .d18 {opacity: 0; animation-delay: 2.04s;} .d19 {opacity: 0; animation-delay: 2.16s;} .d20 {opacity: 0; animation-delay: 2.28s;} .d21 {opacity: 0; animation-delay: 2.4s;} .d22 {opacity: 0; animation-delay: 2.52s;} .d23 {opacity: 0; animation-delay: 2.64s;} .d24 {opacity: 0; animation-delay: 2.76s;} .d25 {opacity: 0; animation-delay: 2.88s;} .d26 {opacity: 0; animation-delay: 3s;} .d27 {opacity: 0; animation-delay: 3.12s;} .d28 {opacity: 0; animation-delay: 3.24s;} .d29 {opacity: 0; animation-delay: 3.36s;} .d30 {opacity: 0; animation-delay: 3.48s;} .d31 {opacity: 0; animation-delay: 3.6s;} .d32 {opacity: 0; animation-delay: 3.72s;} .d33 {opacity: 0; animation-delay: 3.84s;} .d34 {opacity: 0; animation-delay: 3.96s;} .e5 {opacity: 0; animation-delay: 0.48s;} .e6 {opacity: 0; animation-delay: 0.6s;} .e7 {opacity: 0; animation-delay: 0.72s;} .e8 {opacity: 0; animation-delay: 0.84s;} .e9 {opacity: 0; animation-delay: 0.96s;} .e10 {opacity: 0; animation-delay: 1.08s;} .e11 {opacity: 0; animation-delay: 1.2s;} .e12 {opacity: 0; animation-delay: 1.32s;} .e13 {opacity: 0; animation-delay: 1.44s;} .e14 {opacity: 0; animation-delay: 1.56s;} .e15 {opacity: 0; animation-delay: 1.68s;} .e16 {opacity: 0; animation-delay: 1.8s;} .e17 {opacity: 0; animation-delay: 1.92s;} .e18 {opacity: 0; animation-delay: 2.04s;} .e19 {opacity: 0; animation-delay: 2.16s;} .e20 {opacity: 0; animation-delay: 2.28s;} .e21 {opacity: 0; animation-delay: 2.4s;} .e22 {opacity: 0; animation-delay: 2.52s;} .e23 {opacity: 0; animation-delay: 2.64s;} .e24 {opacity: 0; animation-delay: 2.76s;} .e25 {opacity: 0; animation-delay: 2.88s;} .e26 {opacity: 0; animation-delay: 3s;} .e27 {opacity: 0; animation-delay: 3.12s;} .e28 {opacity: 0; animation-delay: 3.24s;} .e29 {opacity: 0; animation-delay: 3.36s;} .e30 {opacity: 0; animation-delay: 3.48s;} .e31 {opacity: 0; animation-delay: 3.6s;} .e32 {opacity: 0; animation-delay: 3.72s;} .e33 {opacity: 0; animation-delay: 3.84s;} .e34 {opacity: 0; animation-delay: 3.96s;} .e35 {opacity: 0; animation-delay: 4.08s;} .e36 {opacity: 0; animation-delay: 4.2s;} .e37 {opacity: 0; animation-delay: 4.32s;} .e38 {opacity: 0; animation-delay: 4.44s;} .e39 {opacity: 0; animation-delay: 4.56s;} .e40 {opacity: 0; animation-delay: 4.68s;} .e41 {opacity: 0; animation-delay: 4.8s;} .e42 {opacity: 0; animation-delay: 4.92s;} .f6 {opacity: 0; animation-delay: 0.6s;} .f7 {opacity: 0; animation-delay: 0.72s;} .f8 {opacity: 0; animation-delay: 0.84s;} .f9 {opacity: 0; animation-delay: 0.96s;} .f10 {opacity: 0; animation-delay: 1.08s;} .f11 {opacity: 0; animation-delay: 1.2s;} .f12 {opacity: 0; animation-delay: 1.32s;} .f13 {opacity: 0; animation-delay: 1.44s;} .f14 {opacity: 0; animation-delay: 1.56s;} .f15 {opacity: 0; animation-delay: 1.68s;} .f16 {opacity: 0; animation-delay: 1.8s;} .f17 {opacity: 0; animation-delay: 1.92s;} .f18 {opacity: 0; animation-delay: 2.04s;} .f19 {opacity: 0; animation-delay: 2.16s;} .f20 {opacity: 0; animation-delay: 2.28s;} .f21 {opacity: 0; animation-delay: 2.4s;} .f22 {opacity: 0; animation-delay: 2.52s;} .f23 {opacity: 0; animation-delay: 2.64s;} .f24 {opacity: 0; animation-delay: 2.76s;} .f25 {opacity: 0; animation-delay: 2.88s;} .f26 {opacity: 0; animation-delay: 3s;} .f27 {opacity: 0; animation-delay: 3.12s;} .f28 {opacity: 0; animation-delay: 3.24s;} .f29 {opacity: 0; animation-delay: 3.36s;} .f30 {opacity: 0; animation-delay: 3.48s;} .f31 {opacity: 0; animation-delay: 3.6s;} .f32 {opacity: 0; animation-delay: 3.72s;} .f33 {opacity: 0; animation-delay: 3.84s;} .f34 {opacity: 0; animation-delay: 3.96s;} .f35 {opacity: 0; animation-delay: 4.08s;} .f36 {opacity: 0; animation-delay: 4.2s;} .f37 {opacity: 0; animation-delay: 4.32s;} .f38 {opacity: 0; animation-delay: 4.44s;} .f39 {opacity: 0; animation-delay: 4.56s;} .f40 {opacity: 0; animation-delay: 4.68s;} .f41 {opacity: 0; animation-delay: 4.8s;} .f42 {opacity: 0; animation-delay: 4.92s;} .f43 {opacity: 0; animation-delay: 5.04s;} .f44 {opacity: 0; animation-delay: 5.16s;} .f45 {opacity: 0; animation-delay: 5.28s;} .f46 {opacity: 0; animation-delay: 5.4s;} .f47 {opacity: 0; animation-delay: 5.52s;} .f48 {opacity: 0; animation-delay: 5.64s;} .f49 {opacity: 0; animation-delay: 5.76s;} .f50 {opacity: 0; animation-delay: 5.88s;} .g7 {opacity: 0; animation-delay: 0.72s;} .g8 {opacity: 0; animation-delay: 0.84s;} .g9 {opacity: 0; animation-delay: 0.96s;} .g10 {opacity: 0; animation-delay: 1.08s;} .g11 {opacity: 0; animation-delay: 1.2s;} .g12 {opacity: 0; animation-delay: 1.32s;} .g13 {opacity: 0; animation-delay: 1.44s;} .g14 {opacity: 0; animation-delay: 1.56s;} .g15 {opacity: 0; animation-delay: 1.68s;} .g16 {opacity: 0; animation-delay: 1.8s;} .g17 {opacity: 0; animation-delay: 1.92s;} .g18 {opacity: 0; animation-delay: 2.04s;} .g19 {opacity: 0; animation-delay: 2.16s;} .g20 {opacity: 0; animation-delay: 2.28s;} .g21 {opacity: 0; animation-delay: 2.4s;} .g22 {opacity: 0; animation-delay: 2.52s;} .g23 {opacity: 0; animation-delay: 2.64s;} .g24 {opacity: 0; animation-delay: 2.76s;} .g25 {opacity: 0; animation-delay: 2.88s;} .g26 {opacity: 0; animation-delay: 3s;} .g27 {opacity: 0; animation-delay: 3.12s;} .g28 {opacity: 0; animation-delay: 3.24s;} .g29 {opacity: 0; animation-delay: 3.36s;} .g30 {opacity: 0; animation-delay: 3.48s;} .g31 {opacity: 0; animation-delay: 3.6s;} .g32 {opacity: 0; animation-delay: 3.72s;} .g33 {opacity: 0; animation-delay: 3.84s;} .g34 {opacity: 0; animation-delay: 3.96s;} .g35 {opacity: 0; animation-delay: 4.08s;} .g36 {opacity: 0; animation-delay: 4.2s;} .g37 {opacity: 0; animation-delay: 4.32s;} .g38 {opacity: 0; animation-delay: 4.44s;} .g39 {opacity: 0; animation-delay: 4.56s;} .g40 {opacity: 0; animation-delay: 4.68s;} .g41 {opacity: 0; animation-delay: 4.8s;} .g42 {opacity: 0; animation-delay: 4.92s;} .g43 {opacity: 0; animation-delay: 5.04s;} .g44 {opacity: 0; animation-delay: 5.16s;} .g45 {opacity: 0; animation-delay: 5.28s;} .g46 {opacity: 0; animation-delay: 5.4s;} .g47 {opacity: 0; animation-delay: 5.52s;} .g48 {opacity: 0; animation-delay: 5.64s;} .g49 {opacity: 0; animation-delay: 5.76s;} .g50 {opacity: 0; animation-delay: 5.88s;} .g51 {opacity: 0; animation-delay: 6s;} .g52 {opacity: 0; animation-delay: 6.12s;} .g53 {opacity: 0; animation-delay: 6.24s;} .g54 {opacity: 0; animation-delay: 6.36s;} .g55 {opacity: 0; animation-delay: 6.48s;} .g56 {opacity: 0; animation-delay: 6.6s;} .g57 {opacity: 0; animation-delay: 6.72s;} .g58 {opacity: 0; animation-delay: 6.84s;} </style> </head> <body> <div class="parent-class"> <div class="div-class-1"> <span class="class a1">d</span> <span class="class a2">e</span> <span class="class a3">f</span> <span class="class a4">g</span> <span class="class a5">h</span> <span class="class a6">i</span> <span class="class a7">j</span> <span class="class a8">k</span> <span class="class a9">l</span> <span class="a10">s</span> </div> <div class="div-class-2"> <span class="class b2">d</span> <span class="class b3">e</span> <span class="class b4">f</span> <span class="class b5">g</span> <span class="class b6">h</span> <span class="class b7">i</span> <span class="class b8">j</span> <span class="class b9">k</span> <span class="class b10">l</span> <span class="class b11">s</span> <span class="class b12">n</span> <span class="class b13">o</span> <span class="class b14">p</span> <span class="class b15">q</span> <span class="class b16">r</span> <span class="class b17">s</span> <span class="b18">h</span> </div> <div class="div-class-3"> <span class="class c3">d</span> <span class="class c4">e</span> <span class="class c5">f</span> <span class="class c6">g</span> <span class="class c7">h</span> <span class="class c8">i</span> <span class="class c9">j</span> <span class="class c10">k</span> <span class="class c11">l</span> <span class="class c12">s</span> <span class="class c13">n</span> <span class="class c14">o</span> <span class="class c15">p</span> <span class="class c16">q</span> <span class="class c17">r</span> <span class="class c18">s</span> <span class="class c19">h</span> <span class="class c20">w</span> <span class="class c21">x</span> <span class="class c22">y</span> <span class="class c23">z</span> <span class="class c24">a</span> <span class="class c25">b</span> <span class="c26">u</span> </div> <div class="div-class-4"> <span class="class d4">d</span> <span class="class d5">e</span> <span class="class d6">f</span> <span class="class d7">g</span> <span class="class d8">h</span> <span class="class d9">i</span> <span class="class d10">j</span> <span class="class d11">k</span> <span class="class d12">l</span> <span class="class d13">s</span> <span class="class d14">n</span> <span class="class d15">o</span> <span class="class d16">p</span> <span class="class d17">q</span> <span class="class d18">r</span> <span class="class d19">s</span> <span class="class d20">h</span> <span class="class d21">w</span> <span class="class d22">x</span> <span class="class d23">y</span> <span class="class d24">z</span> <span class="class d25">a</span> <span class="class d26">b</span> <span class="class d27">u</span> <span class="class d28">l</span> <span class="class d29">g</span> <span class="class d30">h</span> <span class="class d31">i</span> <span class="class d32">j</span> <span class="class d33">k</span> <span class="d34">f</span> </div> <div class="div-class-5"> <span class="class e5">d</span> <span class="class e6">e</span> <span class="class e7">f</span> <span class="class e8">g</span> <span class="class e9">h</span> <span class="class e10">i</span> <span class="class e11">j</span> <span class="class e12">k</span> <span class="class e13">l</span> <span class="class e14">s</span> <span class="class e15">n</span> <span class="class e16">o</span> <span class="class e17">p</span> <span class="class e18">q</span> <span class="class e19">r</span> <span class="class e20">s</span> <span class="class e21">h</span> <span class="class e22">w</span> <span class="class e23">x</span> <span class="class e24">y</span> <span class="class e25">z</span> <span class="class e26">a</span> <span class="class e27">b</span> <span class="class e28">u</span> <span class="class e29">l</span> <span class="class e30">g</span> <span class="class e31">h</span> <span class="class e32">i</span> <span class="class e33">j</span> <span class="class e34">k</span> <span class="class e35">f</span> <span class="class e36">o</span> <span class="class e37">p</span> <span class="class e38">q</span> <span class="class e39">r</span> <span class="class e40">s</span> <span class="class e41">t</span> <span class="e42">f</span> </div> <div class="div-class-6"> <span class="class f6">d</span> <span class="class f7">e</span> <span class="class f8">f</span> <span class="class f9">g</span> <span class="class f10">h</span> <span class="class f11">i</span> <span class="class f12">j</span> <span class="class f13">k</span> <span class="class f14">l</span> <span class="class f15">s</span> <span class="class f16">n</span> <span class="class f17">o</span> <span class="class f18">p</span> <span class="class f19">q</span> <span class="class f20">r</span> <span class="class f21">s</span> <span class="class f22">h</span> <span class="class f23">w</span> <span class="class f24">x</span> <span class="class f25">y</span> <span class="class f26">z</span> <span class="class f27">a</span> <span class="class f28">b</span> <span class="class f29">u</span> <span class="class f30">f</span> <span class="class f31">g</span> <span class="class f32">h</span> <span class="class f33">i</span> <span class="class f34">j</span> <span class="class f35">k</span> <span class="class f36">f</span> <span class="class f37">o</span> <span class="class f38">p</span> <span class="class f39">q</span> <span class="class f40">r</span> <span class="class f41">s</span> <span class="class f42">t</span> <span class="class f43">f</span> <span class="class f44">x</span> <span class="class f45">y</span> <span class="class f46">z</span> <span class="class f47">a</span> <span class="class f48">b</span> <span class="class f49">c</span> <span class="f50">l</span> </div> <div class="div-class-7"> <span class="class g7">d</span> <span class="class g8">e</span> <span class="class g9">f</span> <span class="class g10">g</span> <span class="class g11">h</span> <span class="class g12">i</span> <span class="class g13">j</span> <span class="class g14">k</span> <span class="class g15">l</span> <span class="class g16">s</span> <span class="class g17">n</span> <span class="class g18">o</span> <span class="class g19">p</span> <span class="class g20">q</span> <span class="class g21">r</span> <span class="class g22">s</span> <span class="class g23">h</span> <span class="class g24">w</span> <span class="class g25">x</span> <span class="class g26">y</span> <span class="class g27">z</span> <span class="class g28">a</span> <span class="class g29">b</span> <span class="class g30">u</span> <span class="class g31">f</span> <span class="class g32">g</span> <span class="class g33">h</span> <span class="class g34">i</span> <span class="class g35">j</span> <span class="class g36">k</span> <span class="class g37">f</span> <span class="class g38">o</span> <span class="class g39">p</span> <span class="class g40">q</span> <span class="class g41">r</span> <span class="class g42">s</span> <span class="class g43">t</span> <span class="class g44">f</span> <span class="class g45">x</span> <span class="class g46">y</span> <span class="class g47">z</span> <span class="class g48">a</span> <span class="class g49">b</span> <span class="class g50">c</span> <span class="class g51">l</span> <span class="class g52">g</span> <span class="class g53">h</span> <span class="class g54">i</span> <span class="class g55">j</span> <span class="class g56">k</span> <span class="class g57">l</span> <span class="g58">e</span> </div> </div> </body> </html>