123 views
1.notification { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 justify-content: center; 6 text-align: center; 7 margin: 50px; 8} 9 10.trophy { 11 fill: gold; 12 width: 80px; 13 height: 80px; 14 animation: bounce 0.5s ease-in-out 1; 15} 16 17.trophy:hover { 18 animation: spin 1s ease-in-out 1; 19} 20 21@keyframes bounce { 22 0% { 23 transform: translateY(0); 24 } 25 26 25% { 27 transform: translateY(-20px); 28 } 29 30 50% { 31 transform: translateY(0); 32 } 33 34 75% { 35 transform: translateY(-10px); 36 } 37 38 100% { 39 transform: translateY(0); 40 } 41} 42 43@keyframes spin { 44 0% { 45 transform: rotate(0); 46 } 47 48 100% { 49 transform: rotate(360deg); 50 } 51} 52
MIT License