当前位置：首页 > news >正文

炫酷!HTMLCSS 让五星评级单选按钮“活“起来

news 2024/10/31 13:53:07

效果演示

这段代码实现了一个具有动画效果的五星评级单选按钮组，当鼠标悬停在标签上或单选按钮被选中时，会有不同的颜色和动画效果显示。
在这里插入图片描述

HTML

<div class="radio"><input id="rating-5" type="radio" name="rating" value="5" /><label for="rating-5" title="5 stars"><svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><pathd="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg></label><input id="rating-4" type="radio" name="rating" value="4" /><label for="rating-4" title="4 stars"><svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><pathd="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg></label><input id="rating-3" type="radio" name="rating" value="3" /><label for="rating-3" title="3 stars"><svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><pathd="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg></label><input id="rating-2" type="radio" name="rating" value="2" /><label for="rating-2" title="2 stars"><svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><pathd="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg></label><input id="rating-1" type="radio" name="rating" value="1" /><label for="rating-1" title="1 star"><svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><pathd="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg></label>
</div>

radio：包含所有评分选项的容器。
input:type=“radio”：单选按钮，用于选择评分，name属性确保同一组单选按钮中只能选择一个。
label：标签，用于增加可点击区域，for属性与对应的input的id关联。
svg：SVG图标，用于显示星星。

CSS

.radio {display: flex;justify-content: center;gap: 10px;flex-direction: row-reverse;
}
.radio>input {position: absolute;appearance: none;
}
.radio>label {cursor: pointer;font-size: 30px;position: relative;display: inline-block;transition: transform 0.3s ease;
}
.radio>label>svg {fill: #666;transition: fill 0.3s ease;
}
.radio>label::before,
.radio>label::after {content: "";position: absolute;width: 6px;height: 6px;background-color: #ff9e0b;border-radius: 50%;opacity: 0;transform: scale(0);transition:transform 0.4s ease,opacity 0.4s ease;animation: particle-explosion 1s ease-out;
}
.radio>label::before {top: -15px;left: 50%;transform: translateX(-50%) scale(0);
}
.radio>label::after {bottom: -15px;left: 50%;transform: translateX(-50%) scale(0);
}
.radio>label:hover::before,
.radio>label:hover::after {opacity: 1;transform: translateX(-50%) scale(1.5);
}
.radio>label:hover {transform: scale(1.2);animation: pulse 0.6s infinite alternate;
}
.radio>label:hover>svg,
.radio>label:hover~label>svg {fill: #ff9e0b;filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));animation: shimmer 1s ease infinite alternate;
}
.radio>input:checked+label>svg,
.radio>input:checked+label~label>svg {fill: #ff9e0b;filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));animation: pulse 0.8s infinite alternate;
}
@keyframes pulse {0% {transform: scale(1);}100% {transform: scale(1.1);}
}
@keyframes particle-explosion {0% {opacity: 0;transform: scale(0.5);}50% {opacity: 1;transform: scale(1.2);}100% {opacity: 0;transform: scale(0.5);}
}
@keyframes shimmer {0% {filter: drop-shadow(0 0 10px rgba(255, 158, 11, 0.5));}100% {filter: drop-shadow(0 0 20px rgba(255, 158, 11, 1));}
}
.radio>input:checked+label:hover>svg,
.radio>input:checked+label:hover~label>svg {fill: #e58e09;
}
.radio>label:hover>svg,
.radio>label:hover~label>svg {fill: #ff9e0b;
}
.radio input:checked~label svg {fill: #ffa723;
}