164 views
1/*Mijail Villegas - Bear 2Me gusta la estética retro de los level ups*/ 3 4.level-up-content { 5 display: grid; 6 width: 200px; 7 height: 70px; 8 padding: 10px; 9 align-items: center; 10 justify-items: center; 11 align-content: center; 12 font-weight: bold; 13 font-family: "Lucida Console", "Courier New", monospace; 14 margin: auto; 15} 16 17.progress-bar { 18 background-color: #ddd; 19 height: 20px; 20 margin: 10px 0; 21 overflow: hidden; 22 width: 100%; 23 display: flex; 24 text-align: center; 25 font-size: 1em; 26} 27 28.progress { 29 animation: progress-animation 2s ease-out forwards; 30 background-color: #000000; 31 height: 100%; 32 width: 0%; 33 z-index: 1; 34} 35 36.progress::before { 37 content: ""; 38 display: block; 39 color: #ddd; 40 padding-top: 3px; 41 height: 20px; 42 animation: progress-xp 2.1s ease-out forwards; 43} 44 45.progress::after { 46 content: "+220xp"; 47 display: block; 48 color: rgb(0, 255, 0); 49 position: absolute; 50 padding-top: 3px; 51 z-index: 999; 52 opacity: 0; 53 animation: add-xp 2s cubic-bezier(0, 0.92, 0.05, 1.07) forwards; 54} 55 56.span-content::before { 57 display: block; 58 color: #ddd; 59 margin-left: auto; 60 height: 20px; 61} 62 63.level-up { 64 color: white; 65 display: flex; 66 align-items: center; 67 justify-content: center; 68 width: 100%; 69 height: 100%; 70} 71 72.level-up .leyend { 73 font-size: 1.2em; 74 animation: level-up-animation 1s cubic-bezier(0, 0.62, 0, 0.97) forwards 2s; 75 opacity: 0; 76 transform: translateY(100%); 77 filter: drop-shadow(4px 4px 0px black); 78} 79 80.level-up-content:hover { 81 cursor: pointer; 82} 83 84.level-up-content:hover .leyend { 85 opacity: 1; 86 transform: translateY(100%); 87 background: #a11a1a; 88 animation: grow-up 1s ease-in-out forwards infinite; 89} 90 91.leyend::before { 92 content: "lvl 5"; 93 display: block; 94 color: #ddd; 95 padding-top: 3px; 96 font-size: 0.5em; 97 height: 10px; 98} 99 100.level-up-content .world { 101 font-weight: 900; 102 animation: blink 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; 103} 104 105@keyframes add-xp { 106 0% { 107 opacity: 0; 108 transform: translateY(-20%); 109 } 110 111 60% { 112 opacity: 1; 113 } 114 115 to { 116 transform: translateY(-230%); 117 opacity: 0; 118 } 119} 120 121@keyframes blink { 122 0% { 123 color: black; 124 } 125 126 to { 127 color: white; 128 } 129} 130 131@keyframes progress-animation { 132 0% { 133 width: 0%; 134 } 135 136 65% { 137 width: 100%; 138 } 139 140 100% { 141 width: 100%; 142 } 143} 144 145@keyframes progress-xp { 146 0% { 147 content: "0xp"; 148 } 149 150 5% { 151 content: "+5xp"; 152 } 153 154 10% { 155 content: "+10xp"; 156 } 157 158 15% { 159 content: "+35xp"; 160 } 161 162 22% { 163 content: "+52xp"; 164 } 165 166 25% { 167 content: "+75xp"; 168 } 169 170 30% { 171 content: "+90xp"; 172 } 173 174 38% { 175 content: "+118xp"; 176 } 177 178 40% { 179 content: "+162xp"; 180 } 181 182 45% { 183 content: "+195xp"; 184 } 185 186 50% { 187 content: "+200xp"; 188 } 189 190 65% { 191 content: "+220xp"; 192 } 193 194 80% { 195 content: "+220xp"; 196 } 197 198 100% { 199 content: "NEW LEVEL!"; 200 } 201} 202 203@keyframes level-up-animation { 204 0% { 205 opacity: 0; 206 transform: translateY(100%); 207 } 208 209 100% { 210 opacity: 1; 211 transform: translateY(0%); 212 background: #a11a1a; 213 } 214} 215 216@keyframes grow-up { 217 0% { 218 transform: scale(110%); 219 } 220 221 12% { 222 transform: scale(90%); 223 } 224 225 25% { 226 transform: scale(100%); 227 } 228 229 37% { 230 transform: scale(115%); 231 } 232 233 50% { 234 transform: scale(110%); 235 } 236 237 75% { 238 transform: scale(130%); 239 } 240 241 to { 242 transform: scale(115%); 243 } 244} 245 246/* you can delete this part */ 247.suggestion { 248 font-size: 0.7em; 249 position: absolute; 250 color: #9b9b9b; 251 display: block; 252 top: 80%; 253 left: 60%; 254} 255/**/
MIT License