#212121
1.notification { 2 width: 250px; 3 height: 60px; 4 background: rgb(146, 146, 146); 5 border-radius: 14px; 6 font-size: 2.3em; 7 font-weight: 700; 8 color: black; 9 text-shadow: 2px 2px yellow; 10 text-align: center; 11 display: -webkit-box; 12 display: -ms-flexbox; 13 display: flex; 14 -webkit-box-pack: center; 15 -ms-flex-pack: center; 16 justify-content: center; 17 -webkit-box-align: center; 18 -ms-flex-align: center; 19 align-items: center; 20 gap: 4px; 21} 22 23.notification span { 24 -webkit-animation: levelup 2s ease infinite; 25 animation: levelup 2s ease infinite; 26} 27 28.notification span:nth-child(2) { 29 -webkit-animation-delay: 0.25s; 30 animation-delay: 0.25s; 31} 32 33.notification span:nth-child(3) { 34 -webkit-animation-delay: 0.5s; 35 animation-delay: 0.5s; 36} 37 38.notification span:nth-child(4) { 39 -webkit-animation-delay: 0.75s; 40 animation-delay: 0.75s; 41} 42 43.notification span:nth-child(5) { 44 -webkit-animation-delay: 1s; 45 animation-delay: 1s; 46} 47 48.notification span:nth-child(6) { 49 -webkit-animation-delay: 1.25s; 50 animation-delay: 1.25s; 51} 52 53.notification span:nth-child(7) { 54 -webkit-animation-delay: 1.5s; 55 animation-delay: 1.5s; 56} 57 58.notification span:nth-child(8) { 59 -webkit-animation-delay: 1.75s; 60 animation-delay: 1.75s; 61} 62 63@-webkit-keyframes levelup { 64 0%, 100% { 65 -webkit-transform: translateY(10px); 66 transform: translateY(10px); 67 } 68 69 50% { 70 -webkit-transform: translateY(-10px); 71 transform: translateY(-10px); 72 } 73} 74 75@keyframes levelup { 76 0%, 100% { 77 -webkit-transform: translateY(10px); 78 transform: translateY(10px); 79 } 80 81 50% { 82 -webkit-transform: translateY(-10px); 83 transform: translateY(-10px); 84 } 85} 86
474 views
474 views
Comments
MIT License