#e8e8e8
1.triangle { 2 background-color: transparent; 3 height: 0px; 4 width: 0px; 5 border-style: solid; 6 border-width: 50px 50px 50px 50px; 7 border-radius: 2px; 8 border-color: #00ff83 #00e676 #00cc69 #00e676; 9 animation: animtrgl 3s infinite ease; 10} 11 12.text { 13 font-family: 'Staatliches', cursive; 14 color: white; 15 font-size: 25px; 16 width: 250px; 17 text-align: center; 18 display: block; 19 height: 50px; 20 position: absolute; 21 animation: textload 3s infinite ease; 22 text-shadow: 0 0 4px black; 23} 24 25@keyframes textload { 26 0% { 27 top: calc(50% + 100px); 28 } 29 30 25% { 31 top: calc(50% + 85px); 32 } 33 34 50% { 35 top: calc(50% + 100px); 36 } 37 38 75% { 39 top: calc(50% + 85px); 40 } 41 42 100% { 43 top: calc(50% + 100px); 44 } 45} 46 47@keyframes animtrgl { 48 0% { 49 border-width: 50px 75px 50px 25px; 50 transform: scale(2); 51 } 52 53 25% { 54 border-width: 25px 50px 75px 50px; 55 transform: scale(1.75); 56 } 57 58 50% { 59 border-width: 50px 25px 50px 75px; 60 transform: scale(2); 61 } 62 63 75% { 64 border-width: 75px 50px 25px 50px; 65 transform: scale(1.75); 66 } 67 68 100% { 69 border-width: 50px 75px 50px 25px; 70 transform: scale(2); 71 } 72}
586 views
586 views
Comments
MIT License