This notification was created for level-up-challenge60 views
CSSAdd prefixes
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
HTML
1<div class="notification"> 2 <svg class="trophy" viewBox="0 0 100 100"> 3 <g> 4 <path d="M10,50 L40,50 L30,10 L20,10 Z"></path> 5 <path d="M60,50 L90,50 L80,10 L70,10 Z"></path> 6 <path d="M20,10 L80,10 L70,30 L30,30 Z"></path> 7 <path d="M30,30 L70,30 L60,50 L40,50 Z"></path> 8 <path d="M25,75 L75,75 L85,90 L15,90 Z"></path> 9 <path d="M40,50 L60,50 L55,70 L45,70 Z"></path> 10 </g> 11 </svg> 12 <p>Congratulations! 13 </p><p>You reached level 10!</p> 14</div> 15