2.9K views
CSSAdd prefixes
1.loader { 2 position: relative; 3} 4 5.loader span { 6 position: absolute; 7 color: #fff; 8 transform: translate(-50%, -50%); 9 font-size: 38px; 10 letter-spacing: 5px; 11} 12 13.loader span:nth-child(1) { 14 color: transparent; 15 -webkit-text-stroke: 0.3px rgb(128, 198, 255); 16} 17 18.loader span:nth-child(2) { 19 color: rgb(128, 198, 255); 20 -webkit-text-stroke: 1px rgb(128, 198, 255); 21 animation: uiverse723 3s ease-in-out infinite; 22} 23 24@keyframes uiverse723 { 25 0%, 100% { 26 clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 27 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); 28 } 29 30 50% { 31 clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 32 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); 33 } 34}
HTML
1<div class="loader"> 2 <span>uiverse</span> 3 <span>uiverse</span> 4</div>