HTML
<div class="rating">
<input type="radio" name="rating" id="r1">
<label for="r1"></label>
<input type="radio" name="rating" id="r2">
<label for="r2"></label>
<input type="radio" name="rating" id="r3">
<label for="r3"></label>
<input type="radio" name="rating" id="r4">
<label for="r4"></label>
<input type="radio" name="rating" id="r5">
<label for="r5"></label>
</div>
CSS
@charset "UTF-8";
.rating {
margin: 50px auto;
width: 400px;
}
.rating > * {
float: right;
}
@-webkit-keyframes pulse {
50% {
color: #5e5e5e;
text-shadow: 0 0 15px #777777;
}
}
@keyframes pulse {
50% {
color: #5e5e5e;
text-shadow: 0 0 15px #777777;
}
}
.rating label {
height: 40px;
width: 20%;
display: block;
position: relative;
cursor: pointer;
}
.rating label:nth-of-type(5):after {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
.rating label:nth-of-type(4):after {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.rating label:nth-of-type(3):after {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.rating label:nth-of-type(2):after {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.rating label:nth-of-type(1):after {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
}
.rating label:after {
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
-webkit-font-smoothing: antialiased;
position: absolute;
content: "☆";
color: #444;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 80px;
-webkit-animation: 1s pulse ease;
animation: 1s pulse ease;
}
.rating label:hover:after {
color: #5e5e5e;
text-shadow: 0 0 15px #5e5e5e;
}
.rating input {
display: none;
}
.rating input:checked + label:after,
.rating input:checked ~ label:after {
content: "★";
color: #F9BF3B;
text-shadow: 0 0 20px #F9BF3B;
}
html, body {
background-color: #222;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
