mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
53 lines
1.1 KiB
HTML
53 lines
1.1 KiB
HTML
<div class="rating">
|
|
<input type="radio" id="star5" name="rating" value="5">
|
|
<label for="star5"></label>
|
|
<input type="radio" id="star4" name="rating" value="4">
|
|
<label for="star4"></label>
|
|
<input type="radio" id="star3" name="rating" value="3">
|
|
<label for="star3"></label>
|
|
<input type="radio" id="star2" name="rating" value="2">
|
|
<label for="star2"></label>
|
|
<input type="radio" id="star1" name="rating" value="1">
|
|
<label for="star1"></label>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by ForzDz - Tags: switch, starrating, 3d cool effect */
|
|
.rating {
|
|
display: inline-block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.rating input {
|
|
display: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.rating label {
|
|
float: right;
|
|
cursor: pointer;
|
|
color: #ccc;
|
|
transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.rating label:before {
|
|
content: '\2605';
|
|
font-size: 30px;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.rating input:checked ~ label,
|
|
.rating label:hover,
|
|
.rating label:hover ~ label {
|
|
color: #ffc300;
|
|
transform: scale(1.2);
|
|
transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
|
|
animation: bounce 0.5s ease-in-out alternate;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
to {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
</style>
|