码迷,mamicode.com
首页 > Web开发 > 详细

仅3行核心css代码的rate评分组件

时间:2020-10-18 16:23:01      阅读:26      评论:0      收藏:0      [点我收藏+]

标签:梳理   NPU   实现   评分   广州   细节   设计公司   http   https   

用css实现一个rate评分 ? 核心代码也就三行

 

效果图

技术图片

 

原理

梳理如下:

去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库];
借用5个radio单选框,把默认样式都去掉,显示默认的星星;
用checked伪类监听用户选中?,由默认的星星变成高亮的星星;
然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
把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);
  }
}

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

总结

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

元素反向排列:

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);
  }
}

 

需要注意的细节

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

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

技术图片

仅3行核心css代码的rate评分组件

标签:梳理   NPU   实现   评分   广州   细节   设计公司   http   https   

原文地址:https://www.cnblogs.com/Qooo/p/13826429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!