纯css代码实现rate评分组件

评分组件相信大家不陌生,每天我们用的外卖APP、购物APP等都有这个给商家或者是快递小哥评分功能,最暖心的话就是“记得给五星好评啊!”,像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行,这里推荐大家看我之前的一篇javascript实现的评分功能《js实现星级评分点击效果

老规矩,先来看一下实现的效果:
纯css代码实现rate评分组件

原理

主要是借助radio单选框,梳理如下:

  • 去找个好看的iconfont;
  • 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
  • 用checked伪类监听用户选中✅,由默认的星星变成高亮的星星;
  • 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮💥;
  • 把5个radio单选框反向排列❗;

代码如下

这是我事先生成好的iconfont:

1
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">

HTML布局:

1
2
3
4
5
6
7
<div class="rate-content">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
  <input type="radio" name="rate">
</div>

先把默认的星星显示出来:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 去掉默认样式
input {
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
}

.rate-content {
  $main: #ffa822; // 高亮颜色
 $basic: #999; // 默认颜色
 
  // 单个星星
  input[name="rate"] {
    font-family: "iconfont"; // 之前引入的iconfont字体
    font-size: 30px;
    padding-right: 10px;
   
    // 默认显示的星星
    &::after {
      content: "\e645";
      color: $basic;
      transition: color .4s ease; // 加点颜色过渡效果
    }
  }
}

效果如下:
纯css代码实现rate评分组件
实现选中单个星星:

1
2
3
4
5
6
7
8
9
input[name="rate"] {
  // 高亮的星星
  &:checked {
    &::after {
      content: "\e73c";
      color: $main;
    }
  }
}

纯css代码实现rate评分组件
实现连同兄弟元素一起高亮:

1
2
3
4
5
6
7
input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"] {
    ...
  }
}

效果如下:
纯css代码实现rate评分组件
然后把星星反向排列:

1
2
3
4
.rate-content {
  display: flex;
  flex-flow: row-reverse;
}

效果如下:
纯css代码实现rate评分组件
鼠标移入预览选中效果:

罗嗦版:

1
2
3
4
5
6
7
8
9
input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"],
  &:hover,
  &:hover ~ input[name="rate"] {
    ...
  }
}

优化版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:hover {
    &::after {
      content: "\e73c";
      color: $main;
    }
 
    // 兄弟元素一起高亮
    & ~ input[name="rate"] {
      &::after {
        content: "\e73c";
        color: $main;
      }
    }
  }
}

效果如下:
纯css代码实现rate评分组件
最后,加入放大动画:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
input[name="rate"] {
  transition: transform .2s ease; // 加入过渡效果
 
  // 高亮的星星
  &:checked,
  &:hover {
    ...
  }
 
  // 鼠标移入使星星放大
  &:hover {
    transform: scale(1.2);
  }
}

最终效果如下:
纯css代码实现rate评分组件

总结

核心代码其实就是这两段,其他都是可选的🈚
元素反向排列:

1
2
display: flex;
flex-flow: row-reverse;

兄弟元素操作:

1
input:checked ~ input

如果不用flex反向排列,还可以用rotateZ:

1
2
3
4
5
.rate-content {
  display: flex;
  // flex-flow: row-reverse;
  transform: rotateZ(180deg);
}

效果如下:
纯css代码实现rate评分组件
z轴旋转180deg之后发现星星的头跟尾巴反过来了,那么子元素也旋转180deg即可:

1
2
3
4
5
.rate-content {
  input[name="rate"] {
    transform: rotateZ(180deg);
  }
}

效果如下:
纯css代码实现rate评分组件

需要注意的细节

这里用的是内边距:

1
2
3
4
input[name="rate"] {
  // padding-right: 10px;
  margin-right: 10px;
}

如果用外边距的话,那么会出现以下情形:
纯css代码实现rate评分组件
内边距的作用是保持元素连贯性以及扩大点击范围😎

结束语

以上就是今天为大家带来的纯css代码实现rate评分组件,是不是很简单那,所以不光javascript可以实现评分效果,CSS也是大有作为啊,好了,光看不练假把式,多实践才是码农进阶的正道,最后老铁干了这杯啤酒
纯css代码实现rate评分组件

未经允许不得转载:码云笔记 » 纯css代码实现rate评分组件
喜欢(1) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏