专栏首页Vue开发社区3行核心CSS代码的rate评分组件,秀到你怀疑人生

3行核心CSS代码的rate评分组件,秀到你怀疑人生

“ 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货!

来源:https://www.toutiao.com/a6754717611738530308 作者:子瑜说IT

用css实现一个rate评分 ❗ 核心代码也就三行,效果如下:


目录

  • 原理
  • 代码
    • 基本布局
    • 先把默认的星星显示出来
    • 实现选中单个星星
    • 实现连同兄弟元素一起高亮
    • 然后把input反向排列
    • 鼠标移入预览选中效果
    • 加入放大动画
  • 总结
  • 获取代码

原理

梳理如下:

  1. 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库]、;
  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;
}

:root {
  /*高亮颜色*/
  --main: #ffa822;
  /*默认颜色*/
  --basic: #999;
}

.rate-contentinput[name="rate"] {
  font-family: "iconfont";
  /*之前引入的iconfont字体*/
  font-size: 30px;
  padding-right: 10px;
}

.rate-contentinput[name="rate"]::after {
  content: "\e645";
  color: var(--basic);
  /*加点颜色过渡效果*/
  transition: color .4s ease;
}

效果如下:

实现选中单个星星

/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
  content: "\e73c";
  color: var(--main);
}

效果如下:

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

/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
  /*实现连同兄弟元素一起高亮*/
  content: "\e73c";
  color: var(--main);
}

效果如下:

然后把input反向排列

.rate-content {
  display: flex;
  flex-flow: row-reverse;
}

效果如下:

鼠标移入预览选中效果

input[name="rate"]:checked,
input[name="rate"]:hover::after {
  content: "\e73c";
  color: var(--main);
}

/* 兄弟元素一起高亮 */
input[name="rate"]:hover~input[name="rate"]::after {
  content: "\e73c";
  color: var(--main);
}

效果如下:

加入放大动画

input[name="rate"] {
  transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
  transform: scale(1.2);
}

效果如下:

总结

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

元素反向排列:

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

兄弟元素操作:

input:checked ~ input

获取代码

https://coding.zhangbing.site/view.html?url=./list/css-hover-star/index.html

原文链接:https://www.toutiao.com/a6754717611738530308

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

    作为一个开发了多个 H5 项目的前端工程师,在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下,并在后面给出坑产生的原理,和现阶段常规...

    前端老道
  • 20个ES6面试高频问题

    “关注  前端开发社区 ,回复“ 1” 即可加入  前端技术交流群,回复  “ 2” 即可免费领取500G前端干货!

    前端老道
  • 怎样改变小程序的input和textarea 的 placeholder 颜色?

    我用的是Taro框架React的语法,用原生小程序的话,把驼峰改成 placeholder-class即可

    前端老道
  • 讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻

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

    用户1462769
  • 3行核心CSS代码的rate评分组件,秀到你怀疑人生

    来源:https://www.toutiao.com/a6754717611738530308 作者:子瑜说IT

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

    像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行?

    桃翁
  • 3行核心CSS代码的rate评分组件,秀到你怀疑人生

    https://coding.zhangbing.site/view.html?url=./list/css-hover-star/index.html

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

    像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行?

    Nealyang
  • 讲道理,仅3行核心css代码的rate评分组件,我被自己秀到了

    rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行

    java架构师
  • 4.3债券估值

    discount factor:就是用来把一个FV给折现的factor,d(t), 代表年份

    rocket

扫码关注云+社区

领取腾讯云代金券