151 views
1.notification { 2 background-color: #FFF; 3 padding: 20px; 4 border-radius: 10px; 5 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 6 z-index: 999; 7} 8 9.notification svg { 10 width: 140px; 11 height: 140px; 12 fill: #FFD700; 13 animation: rotate 3s ease-in-out infinite; 14} 15 16.notification #star { 17 animation: fill 3s ease-in-out infinite; 18 transform-origin: center; 19} 20 21.notification text { 22 font-size: 30px; 23 font-weight: bold; 24 fill: #000; 25} 26 27@keyframes fill { 28 0% { 29 fill: transparent; 30 transform: scale(1); 31 } 32 33 50% { 34 fill: #FFD700; 35 transform: scale(1.2); 36 } 37 38 100% { 39 fill: transparent; 40 transform: scale(1); 41 } 42} 43 44@keyframes rotate { 45 0% { 46 transform: rotate(0deg); 47 } 48 49 100% { 50 transform: rotate(360deg); 51 } 52} 53 54
MIT License