CSS3星星评级特效

CSS3与JS实现星星评级特效

原创已于 2025-06-27 13:14:55 修改 · 692 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2025-06-12 11:40:17 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3星星评级特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
font-family: 'Arial', sans-serif;
flex-direction: column;
}

.rating-container {
text-align: center;
margin-bottom: 50px;
}

h1 {
color: #333;
margin-bottom: 30px;
font-size: 2.5em;
}

.rating {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
margin-bottom: 20px;
}

.rating input {
display: none;
}

.rating label {
cursor: pointer;
width: 50px;
height: 50px;
margin: 0 5px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ddd"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
background-size: cover;
transition: all 0.3s;
}

.rating input:checked ~ label,
.rating input:hover ~ label {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.rating label:hover,
.rating label:hover ~ label {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.result {
font-size: 1.5em;
color: #FFA500;
margin-top: 20px;
height: 30px;
}

.animated-stars {
position: relative;
width: 250px;
height: 50px;
margin: 30px auto;
}

.star {
position: absolute;
width: 50px;
height: 50px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
background-size: cover;
opacity: 0;
animation: starPulse 2s infinite ease-in-out;
}

.star:nth-child(1) {
left: 0;
animation-delay: 0s;
}

.star:nth-child(2) {
left: 50px;
animation-delay: 0.2s;
}

.star:nth-child(3) {
left: 100px;
animation-delay: 0.4s;
}

.star:nth-child(4) {
left: 150px;
animation-delay: 0.6s;
}

.star:nth-child(5) {
left: 200px;
animation-delay: 0.8s;
}

@keyframes starPulse {
0%, 100% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}

.link {
margin-top: 50px;
}

.link a {
color: #333;
background: rgba(255, 215, 0, 0.3);
padding: 10px 20px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
}

.link a:hover {
background: rgba(255, 215, 0, 0.5);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
</style>
</head>
<body>
<div class="rating-container">
<h1>请为我们的服务评分</h1>

<form 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>
</form>

<div class="result" id="result">您尚未评分</div>

<div class="animated-stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>

<div class="link">

</div>