17

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

 2 years ago
source link: http://mp.weixin.qq.com/s?__biz=MzI0MDIwNTQ1Mg%3D%3D&%3Bmid=2676493706&%3Bidx=1&%3Bsn=6dab82f846ff7e9d8ccb56a4912ad50d
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

eUR3Qbf.gif

目录

  • 原理

  • 代码

    • 基本布局

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

    • 实现选中单个星星

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

    • 然后把input反向排列

    • 鼠标移入预览选中效果

    • 加入放大动画

  • 总结

  • 获取代码

原理

梳理如下:

  1. 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库]、;

  2. 借用5个radio单选框,把默认样式都去掉,显示默认的星星;

  3. 用checked伪类监听用户选中:white_check_mark:,由默认的星星变成高亮的星星;

  4. 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;

  5. 把5个radio单选框反向排列 :exclamation:;

代码

基本布局

这是我事先生成好的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-content input[name="rate"] {
  font-family: "iconfont";
  /*之前引入的iconfont字体*/
  font-size: 30px;
  padding-right: 10px;
}

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

效果如下: bInY7zn.png!web

实现选中单个星星

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

效果如下: 3uYvMvF.gif

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

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

效果如下: miA7j2U.gif

然后把input反向排列

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

效果如下: nURF73j.gif

鼠标移入预览选中效果

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

效果如下: MfMfeyn.gif

加入放大动画

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

效果如下: Jr2UbmF.gif

总结

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

元素反向排列:

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

兄弟元素操作:

input:checked ~ input

获取代码

vQ3m2mz.png!web

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

近期文章

使用JavaScript的padStart()和padEnd()格式化字符串

Vue 3教程(适用于Vue 2用户)

JavaScript vs Dart  两者之间的比较

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

实战 | 使用TypeScript和ES模块发布Node模块

避免在单页应用程序中使用CORS,如何以及为什么?

使用CSS文字阴影创建有趣的效果

测量JavaScript函数的性能的简单方法及与其他方式对比

不要过度使用React.useCallback()

HTML页面生成器:使用JavaScript和Node创建CLI

React.js和Vue.js的语法并列比较

温故知新 | Vue.js进阶必会,编写你的第一个Vue.js插件

从零开始使用JavaScript制作自己的命令行(CLI工具)

Vue.js中编写更好的v-for循环的6种技巧

fIjyM3R.png!web

如果对你有帮助,还可以 在看、留言、 转发 ,这是对作者最大的帮助。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK