mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
110 lines
3 KiB
HTML
110 lines
3 KiB
HTML
<div class="rating">
|
|
<input type="radio" id="star-1" name="star-radio" value="star-1">
|
|
<label for="star-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
|
|
</label>
|
|
<input type="radio" id="star-2" name="star-radio" value="star-1">
|
|
<label for="star-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
|
|
</label>
|
|
<input type="radio" id="star-3" name="star-radio" value="star-1">
|
|
<label for="star-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
|
|
</label>
|
|
<input type="radio" id="star-4" name="star-radio" value="star-1">
|
|
<label for="star-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
|
|
</label>
|
|
<input type="radio" id="star-5" name="star-radio" value="star-1">
|
|
<label for="star-5">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg>
|
|
</label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by SelfMadeSystem - Tags: star, radio, animated, rate, stars, rating */
|
|
.rating {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
gap: 0.3rem;
|
|
--stroke: #666;
|
|
--fill: #ffc73a;
|
|
}
|
|
|
|
.rating input {
|
|
appearance: unset;
|
|
}
|
|
|
|
.rating label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rating svg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
overflow: visible;
|
|
fill: transparent;
|
|
stroke: var(--stroke);
|
|
stroke-linejoin: bevel;
|
|
stroke-dasharray: 12;
|
|
animation: idle 4s linear infinite;
|
|
transition: stroke 0.2s, fill 0.5s;
|
|
}
|
|
|
|
@keyframes idle {
|
|
from {
|
|
stroke-dashoffset: 24;
|
|
}
|
|
}
|
|
|
|
.rating label:hover svg {
|
|
stroke: var(--fill);
|
|
}
|
|
|
|
.rating input:checked ~ label svg {
|
|
transition: 0s;
|
|
animation: idle 4s linear infinite, yippee 0.75s backwards;
|
|
fill: var(--fill);
|
|
stroke: var(--fill);
|
|
stroke-opacity: 0;
|
|
stroke-dasharray: 0;
|
|
stroke-linejoin: miter;
|
|
stroke-width: 8px;
|
|
}
|
|
|
|
@keyframes yippee {
|
|
0% {
|
|
transform: scale(1);
|
|
fill: var(--fill);
|
|
fill-opacity: 0;
|
|
stroke-opacity: 1;
|
|
stroke: var(--stroke);
|
|
stroke-dasharray: 10;
|
|
stroke-width: 1px;
|
|
stroke-linejoin: bevel;
|
|
}
|
|
|
|
30% {
|
|
transform: scale(0);
|
|
fill: var(--fill);
|
|
fill-opacity: 0;
|
|
stroke-opacity: 1;
|
|
stroke: var(--stroke);
|
|
stroke-dasharray: 10;
|
|
stroke-width: 1px;
|
|
stroke-linejoin: bevel;
|
|
}
|
|
|
|
30.1% {
|
|
stroke: var(--fill);
|
|
stroke-dasharray: 0;
|
|
stroke-linejoin: miter;
|
|
stroke-width: 8px;
|
|
}
|
|
|
|
60% {
|
|
transform: scale(1.2);
|
|
fill: var(--fill);
|
|
}
|
|
}
|
|
|
|
</style>
|