阅读 11106

讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻🙆‍♂️

rate评分组件一般都用javascript写,大概一年前,我在简书写过一篇文章原生Javascript实现星星评分组件,感兴趣的可以去看一下,很久之前写的,我不知道之前的代码有多啰嗦,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行😂

效果图

原理

梳理如下:

  1. 去找个好看的iconfontIconfont-阿里巴巴矢量图标库
  2. 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
  3. checked伪类监听用户选中✅,由默认的星星变成高亮的星星;
  4. 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮💥;
  5. 把5个radio单选框反向排列 ❗;

代码

这是我事先生成好的iconfont

<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">
复制代码

一个很简洁的布局:

<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>
复制代码

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

// 去掉默认样式
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; // 加点颜色过渡效果
    }
  }
}
复制代码

效果如下:

实现选中单个星星:

input[name="rate"] {
  // 高亮的星星
  &:checked {
    &::after {
      content: "\e73c";
      color: $main;
    }
  }
}
复制代码

效果如下:

实现连同兄弟元素一起高亮:

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"] {
    ...
  }
}
复制代码

效果如下:

然后把input反向排列:

.rate-content {
  display: flex;
  flex-flow: row-reverse;
}
复制代码

效果如下:

鼠标移入预览选中效果:

罗嗦版:

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:checked ~ input[name="rate"],
  &:hover,
  &:hover ~ input[name="rate"] {
    ...
  }
}
复制代码

优化版:

input[name="rate"] {
  // 高亮的星星
  &:checked,
  &:hover {
    &::after {
      content: "\e73c";
      color: $main;
    }
  
    // 兄弟元素一起高亮
    & ~ input[name="rate"] {
      &::after {
        content: "\e73c";
        color: $main;
      }
    }
  }
}
复制代码

效果如下:

加入放大动画

input[name="rate"] {
  transition: transform .2s ease; // 加入过渡效果
  
  // 高亮的星星
  &:checked,
  &:hover {
    ...
  }
  
  // 鼠标移入使星星放大
  &:hover {
    transform: scale(1.2);
  }
}
复制代码

效果如下:

总结

核心代码其实就是这两段,其他都是可选的🈚

元素反向排列:

display: flex;
flex-flow: row-reverse;
复制代码

兄弟元素操作:

input:checked ~ input
复制代码

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

.rate-content {
  display: flex;
  // flex-flow: row-reverse;
  transform: rotateZ(180deg);
}
复制代码

效果如下:

z轴旋转180deg之后发现星星的头跟尾巴反过来了,那么子元素也旋转180deg即可:

.rate-content {
  input[name="rate"] {
    transform: rotateZ(180deg);
    
    // 鼠标移入使星星放大
    &:hover {
     transform: scale(1.2) rotateZ(180deg);
    }
  }
}
复制代码

效果如下:

需要注意的细节

input[name="rate"] {
  // padding-right: 10px;
  margin-right: 10px;
}
复制代码

如果用外边距的话,那么会出现以下情形:

内边距的作用是保持元素连贯性以及扩大点击范围;

最后附上本文代码的codepen地址:css实现rate评分

关于如何获取分数

原生javascript获取也很简单,不过你得先给五个input增加value或自定义索引值:

<input type="radio" name="rate" value="1">
<input type="radio" name="rate" value="2">
<input type="radio" name="rate" value="3">
<input type="radio" name="rate" value="4">
<input type="radio" name="rate" value="5">
复制代码

假设最大分数为5:

const getScore = () => {
  let checkedInput = document.querySelector("input[name=rate]:checked"); // 获取当前选中的input
  
  // 没选中的时候checkedInput为null,直接返回0
  retrun checkedInput? 5 - Number(checkInput.value) + 1: 0;
}
复制代码

为什么要相减,因为元素是倒序排列的,选中第一个实际上选中的是第五个👌

关于如何实现半星星

提供一下思路,十个input,奇数显示星星左边、偶数显示星星右边,其他逻辑不改;

最后

如果你觉得这篇文章不错,请别忘记点个关注哦~😊

交流

公众号「前端宇宙情报局」,将不定时更新最新、实用的前端技巧/技术性文章,对了偶尔还会有互联网中的趣事趣闻🍻

关注公众号,回复"1"获取微信群聊二维码,一起学习、一起交流、一起摸鱼🌊

关注下面的标签,发现更多相似文章
评论