353 views
1.notification { 2 display: flex; 3 flex-direction: column; 4 position: relative; 5 width: 300px; 6 height: 200px; 7 border-radius: 0.3rem; 8 justify-content: center; 9 align-items: center; 10 background: rgb(0, 0, 0); 11 transition: all 3s ease; 12} 13 14.text { 15 opacity: 0; 16 display: flex; 17 flex-direction: column; 18 position: absolute; 19 width: 300px; 20 height: 200px; 21 justify-content: space-between; 22 align-items: center; 23 padding: 0.5rem; 24 top: 1.5rem; 25} 26 27strong { 28 background-size: 300% 300%; 29 background-clip: text; 30 -webkit-background-clip: text; 31 color: transparent; 32 background-image: linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%); 33 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 34 text-shadow: 0 0 5px rgba(255, 255, 255, 0.438); 35 animation: gradient 5s ease infinite; 36} 37 38.notification:hover .text { 39 opacity: 1; 40 transition: 1s; 41 transition-delay: 3s; 42 transform: translateY(-1.5rem); 43} 44 45.notification:hover .crystal { 46 animation: pulse_crystal 1s ease; 47 transition: 1s; 48 transform: scale(1.3); 49 box-shadow: 0 0 5px rgb(255, 255, 255); 50 background: conic-gradient(#3fb2ff 0%, #261caf 45%, #44d2eb 50%, #fdfdfd 100%); 51 clip-path: polygon(50% 0, 84% 30%, 84% 70%, 50% 100%, 15% 70%, 15% 30%); 52} 53 54.notification:hover .crystal-border { 55 transition: 1s; 56 clip-path: polygon(50% 0, 90% 30%, 90% 70%, 50% 100%, 10% 70%, 10% 30%); 57} 58 59.crystal-border { 60 z-index: 3; 61 display: flex; 62 position: absolute; 63 width: 45px; 64 height: 45px; 65 background: #000000; 66 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 67} 68 69.crystal { 70 inset: 12px; 71 position: absolute; 72 width: 20px; 73 height: 20px; 74 background: conic-gradient(#ca22b9 0%, #792e83 45%, #ff26e9 50%, #ffffff 100%); 75 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 76 transition: all 1s ease; 77} 78 79.line-center-border { 80 z-index: 2; 81 display: flex; 82 position: absolute; 83 width: 10rem; 84 height: 10rem; 85 align-items: center; 86 justify-content: center; 87 background: #000000; 88 clip-path: polygon(50% 20%, 60% 18%, 60% 80%, 50% 90%, 40% 80%, 40% 18%); 89} 90 91.line-center { 92 display: flex; 93 position: absolute; 94 margin: 4px; 95 width: 3rem; 96 top: 1.8rem; 97 height: 7.7rem; 98 transition: 2s; 99 opacity: 0; 100 background: linear-gradient(90deg, #796f1c 50%, #c7b82f 50%); 101 clip-path: polygon(50% 5%, 60% 8%, 60% 87%, 50% 90%, 40% 87%, 40% 8%); 102} 103 104.notification:hover .line-center { 105 z-index: 1; 106 opacity: 1; 107} 108 109.progress-ring { 110 z-index: 2; 111 position: absolute; 112 top: 22%; 113 stroke-dasharray: 135 120%; 114 stroke: #113736; 115 border-radius: 50%; 116 transform: rotate(-12deg); 117 transition: all 4s ease; 118} 119 120.notification:hover .progress-ring__blue { 121 transition: all 2s ease; 122 stroke-dasharray: 13 5; 123} 124 125.progress-ring-m7 { 126 z-index: 1; 127 visibility: hidden; 128 width: 7rem; 129 height: 5.5rem; 130 top: 28%; 131 background: transparent; 132 position: absolute; 133 border-radius: 50%; 134 border-style: double; 135 border: 8px solid #b9a80f; 136 border-bottom-color: transparent; 137 border-top-color: transparent; 138} 139 140.progress-ring-m7-inner { 141 z-index: 1; 142 visibility: hidden; 143 display: flex; 144 box-sizing: content-box; 145 width: 6rem; 146 height: 4.5rem; 147 background: transparent; 148 position: absolute; 149 border-radius: 50%; 150 border-style: dashed; 151 border: 6px dashed #113736; 152 border-bottom-color: transparent; 153 border-top-color: transparent; 154} 155 156.notification:hover .progress-ring-m7 { 157 visibility: visible; 158 animation: pulse_m7 1.5s ease-in-out; 159} 160 161.notification:hover .progress-ring-m7-inner { 162 visibility: visible; 163 transition: all 3s ease; 164 animation: pulse_m7 1.5s ease-in-out; 165} 166 167.progress-ring-two:nth-of-type(2) { 168 z-index: 1; 169 position: absolute; 170 top: 20%; 171 stroke-dasharray: 140 100; 172 stroke: #b9a80f; 173 border-radius: 50%; 174 transform: rotate(27deg); 175} 176 177.progress-ring-two:nth-of-type(3) { 178 z-index: 1; 179 position: absolute; 180 top: 22%; 181 stroke-dasharray: 140 100; 182 stroke: #b9a80f; 183 border-radius: 50%; 184 transform: rotate(-20deg); 185} 186 187.notification:hover svg { 188 animation: pulse_svg 3s ease; 189} 190 191.wings { 192 z-index: 1; 193 position: absolute; 194 top: 20%; 195 width: 10rem; 196 height: 8rem; 197 clip-path: polygon( 198 0% 0%, 28% 27%, 32% 31%, 27% 40%, 25% 50%, 199 30% 60%, 47% 67%, 45% 67%, 57% 66%, 64% 64%, 200 70% 59%, 70% 46%, 70% 46%, 75% 40%, 201 202 70% 26%, 100% 0%, 100% 10%, 95% 14%, 203 204 95% 19%, 90% 23%, 90% 29%, 69% 50%, 205 72% 56%, 69.38% 62%, 65% 65%, 57.5% 66%, 50% 67%, 41% 67%, 206 32% 64%, 207 208 28% 49%, 10% 30%, 10% 22%, 5% 18%, 5% 13%, 0% 9% 209 ); 210 background-color: #b9a80f; 211 transition: all px2s ease; 212} 213 214.notification:hover .wings { 215 transform: scale(1.2); 216 animation: pulse_wing 3s ease; 217} 218 219.notification:hover .shield { 220 animation: pulse 2s ease; 221} 222 223.notification:hover .shield-bottom-left { 224 left: 3.5rem; 225} 226 227.notification:hover .shield-bottom-right { 228 left: 6.2rem; 229} 230 231.shield { 232 z-index: 4; 233 display: flex; 234 position: absolute; 235 width: fit-content; 236 top: 19%; 237 left: 17%; 238 flex-direction: column; 239 gap: 3rem; 240 transition: all 2s ease; 241} 242 243.shield-up, 244.shield-down { 245 display: flex; 246 position: relative; 247} 248 249.shield-bottom-left { 250 z-index: 1; 251 display: flex; 252 position: absolute; 253 width: 3.4rem; 254 height: 5rem; 255 left: 4rem; 256 clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%); 257 background-color: #696115; 258} 259 260.shield-bottom-right { 261 z-index: 1; 262 display: flex; 263 position: absolute; 264 width: 3.4rem; 265 height: 5rem; 266 left: 5.7rem; 267 clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%); 268 background-color: #696115; 269} 270 271.shield-bottom-right-inside { 272 clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%); 273} 274 275.shield-bottom-left-inside { 276 clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%); 277} 278 279.shield-bottom-left-inside, 280.shield-bottom-right-inside { 281 position: absolute; 282 background-color: #b9a80f; 283 inset: 5px; 284} 285 286.shield-top-left { 287 display: flex; 288 position: absolute; 289 width: 3.4rem; 290 height: 4rem; 291 left: 4rem; 292 clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%); 293 background-color: #696115; 294} 295 296.shield-top-right { 297 display: flex; 298 position: absolute; 299 width: 3.4rem; 300 height: 4rem; 301 left: 5rem; 302 clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%); 303 background-color: #696115; 304} 305 306.notification:hover .shield-top-left { 307 left: 3.6rem; 308 clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%); 309} 310 311.notification:hover .shield-top-right { 312 left: 5.4rem; 313 clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%); 314} 315 316.notification:hover .shield-top-right-inside { 317 clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%); 318} 319 320.notification:hover .shield-top-left-inside { 321 clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%); 322} 323 324.shield-top-right-inside { 325 clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%); 326} 327 328.shield-top-left-inside { 329 clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%); 330} 331 332.shield-top-left-inside, 333.shield-top-right-inside { 334 position: absolute; 335 background-color: #b9a80f; 336 inset: 4px; 337} 338 339@keyframes pulse { 340 0% { 341 transform: scale(1); 342 } 343 344 70% { 345 transform: scale(1.3); 346 left: 7%; 347 filter: brightness(150%); 348 } 349 350 100% { 351 transform: scale(1); 352 } 353} 354 355@keyframes pulse_wing { 356 0% { 357 transform: scale(1); 358 } 359 360 70% { 361 transform: scale(1.3); 362 filter: brightness(150%); 363 } 364 365 100% { 366 transform: scale(1.2); 367 filter: brightness(100%); 368 } 369} 370 371@keyframes pulse_svg { 372 0% { 373 filter: brightness(100%); 374 } 375 376 70% { 377 filter: brightness(150%); 378 } 379 380 100% { 381 filter: brightness(100%); 382 } 383} 384 385@keyframes pulse_m7 { 386 0% { 387 filter: brightness(100%); 388 visibility: hidden; 389 transform: scale(1); 390 } 391 392 70% { 393 filter: brightness(150%); 394 visibility: visible; 395 transform: scale(1.3); 396 } 397 398 100% { 399 filter: brightness(100%); 400 visibility: visible; 401 transform: scale(1); 402 } 403} 404 405@keyframes pulse_crystal { 406 0% { 407 transform: scale(1); 408 transform: rotateY(3rad); 409 } 410 411 70% { 412 transform: scale(1.5); 413 filter: brightness(180%); 414 transform: rotateY(10rad); 415 } 416 417 100% { 418 transform: scale(1.3); 419 filter: brightness(100%); 420 transform: rotateY(80rad); 421 } 422} 423 424@keyframes show { 425 0% { 426 visibility: hidden; 427 transform: translateY(0); 428 } 429 430 100% { 431 visibility: visible; 432 transform: translateY(5rem); 433 } 434} 435 436@keyframes gradient { 437 0% { 438 background-position: 0% 50%; 439 } 440 441 50% { 442 background-position: 100% 50%; 443 } 444 445 100% { 446 background-position: 0% 50%; 447 } 448} 449
MIT License