Notification by devsleonardo
This notification was created for CSS Game UI Challenge
#212121
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 color: white; 9} 10 11.trophy { 12 fill: gold; 13 width: 80px; 14 height: 80px; 15 animation: bounce 0.5s ease-in-out 1; 16} 17 18.trophy:hover { 19 animation: spin 1s ease-in-out 1; 20} 21 22@keyframes bounce { 23 0% { 24 transform: translateY(0); 25 } 26 27 25% { 28 transform: translateY(-20px); 29 } 30 31 50% { 32 transform: translateY(0); 33 } 34 35 75% { 36 transform: translateY(-10px); 37 } 38 39 100% { 40 transform: translateY(0); 41 } 42} 43 44@keyframes spin { 45 0% { 46 transform: rotate(0); 47 } 48 49 100% { 50 transform: rotate(360deg); 51 } 52} 53
520 views
520 views
MIT License