
148 views
CSSAdd prefixes
1.notification { 2 display: flex; 3 width: 0; 4 background: #ddd; 5 border-radius: 10px; 6 animation: slideIn 1s ease-in-out 1.25s forwards; 7} 8 9.notification-info { 10 display: inline-flex; 11 overflow: hidden; 12 background-color: #181818; 13 color: #fff; 14 width: 100%; 15 border-radius: 12px 8px 8px 12px; 16 padding-left: 16px; 17 align-items: center; 18} 19 20.notification-text { 21 opacity: 0; 22 padding: 10px 8px; 23 white-space: nowrap; 24 animation: textInfo 1s ease-in-out 1.5s forwards; 25} 26 27.highlight { 28 color: #ffc300; 29} 30 31.box-avatar { 32 background-color: #181818; 33 padding: 6px; 34 width: 4.5em; 35 height: 4.5em; 36 border-radius: 50%; 37 margin-right: -20px; 38 box-shadow: 6.2px 3.1px 38.2px -6px rgba(0, 0, 0, 0.2), 63px 32px 176px -6px rgba(0, 0, 0, 0.1); 39 z-index: 1; 40} 41 42.avatar { 43 background-color: #FDA203; 44 padding: .6em; 45 border-radius: 50%; 46} 47 48.avatar-icon { 49 width: 100%; 50 height: 100%; 51 fill: white; 52 animation: grow 2s ease-in-out 3; 53} 54 55/*Animations*/ 56@keyframes slideIn { 57 0% { 58 width: 0; 59 padding: 2px; 60 } 61 62 100% { 63 width: 250px; 64 padding: 2px; 65 } 66} 67 68@keyframes textInfo { 69 0% { 70 opacity: 0%; 71 margin-left: -20em; 72 } 73 74 100% { 75 opacity: 100%; 76 margin-left: 0; 77 } 78} 79 80@keyframes grow { 81 0% { 82 transform: scale(100%) translateY(0%); 83 } 84 85 50% { 86 transform: scale(100%) translateY(-10%); 87 } 88 89 100% { 90 transform: scale(100%) translateY(0%); 91 } 92}
HTML
1<div class="box-avatar"> 2 <div class="avatar"> 3 <svg class="avatar-icon" viewBox="0 0 17 15"> 4 <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path> 5 </svg> 6 </div> 7</div> 8 <div class="notification"> 9 <div class="notification-info"> 10 <p class="notification-text"> <span class="highlight">Player</span> reached <b>level 15!</b> </p> 11 </div> 12 </div>