1929182-1.html (1600B)
1 <style> 2 3 *, *::before, *::after { 4 padding: 0; 5 margin: 0 auto; 6 box-sizing: border-box; 7 } 8 9 body { 10 color: #fff; 11 min-height: 100vh; 12 display: grid; 13 place-items: center; 14 overflow: hidden; 15 perspective: 450px; 16 } 17 18 .zigzag { 19 position: relative; 20 transform-style: preserve-3d; 21 animation: zigzag 16s infinite linear; 22 23 i { 24 --color: hsl(200 100% calc(var(--i) * 5% + 20%)); 25 position: absolute; 26 font-family: "Prompt", sans-serif; 27 font-weight: 900; 28 font-size: 150px; 29 padding-inline: 24px; 30 background-image: 31 linear-gradient(45deg, transparent 30%, var(--color) 0 36%, transparent 0), 32 linear-gradient(-45deg, transparent 30%, var(--color) 0 36%, transparent 0); 33 background-size: 16px 8px; 34 background-clip: text; 35 -webkit-background-clip: text; 36 color: transparent; 37 transform: translate3d(-50%, -50%, calc(var(--i) * 1px)); 38 } 39 } 40 41 @keyframes zigzag { 42 from { transform: rotate(300deg) rotateX(30deg) rotate(201deg); } 43 to { transform: rotate(301deg) rotateX(30deg) rotate(200deg); } 44 } 45 </style> 46 47 <div class="zigzag"> 48 <i style="--i: 0">ZIGZAG</i> 49 <i style="--i: 1">ZIGZAG</i> 50 <i style="--i: 2">ZIGZAG</i> 51 <i style="--i: 3">ZIGZAG</i> 52 <i style="--i: 4">ZIGZAG</i> 53 <i style="--i: 5">ZIGZAG</i> 54 <i style="--i: 6">ZIGZAG</i> 55 <i style="--i: 7">ZIGZAG</i> 56 <i style="--i: 8">ZIGZAG</i> 57 <i style="--i: 9">ZIGZAG</i> 58 <i style="--i: 10">ZIGZAG</i> 59 <i style="--i: 11">ZIGZAG</i> 60 <i style="--i: 12">ZIGZAG</i> 61 <i style="--i: 13">ZIGZAG</i> 62 <i style="--i: 14">ZIGZAG</i> 63 <i style="--i: 15">ZIGZAG</i> 64 </div>