#e8e8e8
1.line-wobble { 2 --uib-size: 80px; 3 --uib-speed: 1.55s; 4 --uib-color: black; 5 --uib-line-weight: 5px; 6 position: relative; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 height: var(--uib-line-weight); 11 width: var(--uib-size); 12 border-radius: calc(var(--uib-line-weight) / 2); 13 overflow: hidden; 14 transform: translate3d(0, 0, 0); 15} 16 17.line-wobble::before { 18 content: ''; 19 position: absolute; 20 top: 0; 21 left: 0; 22 height: 100%; 23 width: 100%; 24 background-color: var(--uib-color); 25 opacity: 0.1; 26} 27 28.line-wobble::after { 29 content: ''; 30 height: 100%; 31 width: 100%; 32 border-radius: calc(var(--uib-line-weight) / 2); 33 animation: wobble var(--uib-speed) ease-in-out infinite; 34 transform: translateX(-90%); 35 background-color: var(--uib-color); 36} 37 38@keyframes wobble { 39 0%, 40 100% { 41 transform: translateX(-90%); 42 } 43 44 50% { 45 transform: translateX(90%); 46 } 47} 48
1.9K views
1.9K views
Comments
MIT License