mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
64 lines
1.1 KiB
HTML
64 lines
1.1 KiB
HTML
<div class="notification">
|
|
<svg viewBox="0 0 200 200">
|
|
<path id="star" d="M100,25 L129,79 L186,79 L139,119 L158,173 L100,137 L42,173 L61,119 L14,79 L71,79 z"></path>
|
|
<text x="50%" y="50%" text-anchor="middle" alignment-baseline="central">Level Up!</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by ahmed150up - Tags: notification */
|
|
.notification {
|
|
background-color: #FFF;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
z-index: 999;
|
|
}
|
|
|
|
.notification svg {
|
|
width: 140px;
|
|
height: 140px;
|
|
fill: #FFD700;
|
|
animation: rotate 3s ease-in-out infinite;
|
|
}
|
|
|
|
.notification #star {
|
|
animation: fill 3s ease-in-out infinite;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.notification text {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
fill: #000;
|
|
}
|
|
|
|
@keyframes fill {
|
|
0% {
|
|
fill: transparent;
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
fill: #FFD700;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
100% {
|
|
fill: transparent;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|