纯CSS制作笑脸评分系统

纯CSS制作笑脸评分系统

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

图片下载地址

效果图

代码区

html

  <div class="rating">
    <input type="radio" name="star" id="star1" >
    <!-- for绑定对应ID -->
		<label for="star1">
			<img src="img/001.png" alt="">
			<h4>Sad</h4>
    </label>
    <!-- 默认选择的表情 -->
		<input type="radio" name="star" id="star2" checked='checked'>
		<label for="star2">
			<img src="img/002.png" alt="">
			<h4>Surprised</h4>
		</label>
		<h2 class=" text">What's your comment?</h2>
	</div>

CSS

* {
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  box-sizing: border-box; /* 盒子大小规则 */
  font-family: sans-serif; /* 字体 */
}
body {
  display: flex; /* 弹性盒模型 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
  min-height: 100vh; /* 最小高度 */
  background: #20152d; /* 背景 */
}
.rating {
  position: relative;
  display: flex;
  flex-direction: row-reverse; /* 弹性盒布局方向: 反向行 */
}
.rating input {
  display: none; /* 隐藏 */
}
.rating label {
  position: relative;
  width: 0; /* 宽度 */
  height: 128px;
  cursor: pointer; /* 鼠标样式 */
  transition: 0.5s;
  filter: grayscale(1); /* 灰阶过渡 */
  text-align: center; /* 字体水平居中 */
  opacity: 0; /* 透明度 */
}
.rating:hover label {
  width: 160px;
  opacity: 0.2;
}
.rating input:hover + label,
.rating input:checked + label{
  /* 悬停和选择时进行触发 */
  /* 通过修改灰阶和透明度进行显示 */
  filter: grayscale(0);
  opacity: 1;
  width: 160px;
}

img {
  height: 100%;
}
/* 图标下字体 */
.rating label h4 {
  color: #fff;
  font-size: 24px; /* 字体大小 */
  padding-top: 10px;
  font-weight: 500; /* 字体维度 */
  white-space: nowrap; /* 不换行 */
  opacity: 0;
  transform: translateY(-50px) scale(0); /* Y轴移动，放大 */
  transition: 0.5s;
}
.rating input:hover + label h4,
.rating input:checked + label h4{
  opacity: 1;
  transform: translateY(0px) scale(1);
}
/* 标题 */
.text {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  width: 500px;
  font-weight: 700;
  letter-spacing: 2px; /* 字体间距 */
  text-align: center;
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）