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

01

效果图

02

原理

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

  • 去找个好看的iconfont;

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

  • 用checked伪类监听用户选中✅,由默认的星星变成高亮的星星;

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

  • 把5个radio单选框反向排列❗;

03

代码

这是我事先生成好的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"] {
...
}
}

效果如下:

然后把星星反向排列:


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

效果如下:

04

总结

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

元素反向排列:


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

效果如下:

05

需要注意的细节

这里用的是内边距:


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

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

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


06

最后

本文到此结束,希望以上内容对你有些许帮助,如若喜欢请记得在右下角点个在看跟关注?

如果您觉得本文不错,

请点击文章底部广告,支持一下我啦!

原创系列推荐

1. JavaScript 重温系列(22篇全)

2. ECMAScript 重温系列(10篇全)

3. JavaScript设计模式 重温系列(9篇全)

4. 正则 / 框架 / 算法等 重温系列(16篇全)

5. Webpack4 入门手册(共 18 章)(上)

6. Webpack4 入门手册(共 18 章)(下)

7. 59篇原创系列汇总

点这,与大家一起分享本文吧~

【CSS】329- 非常强!3行核心css代码的rate评分组件的更多相关文章

  1. Bootstrap源码分析系列之核心CSS

    本节主要介绍核心CSS,从整体架构中的7个Less文件对应的源码分别进行分析 scaffolding.less 这个文件编译后的css文件(886~989行)其作用就像定义全局样式. //调整css盒 ...

  2. 如何提升我的HTML&CSS技术,编写有结构的代码

    前言 之前写了四篇HTML和CSS的知识点,也相当于是一个知识点汇总.有需要的可以收藏,平时开发过程中应该会遇到这些点,到时候再查看这些博客可能更容易理解.从这篇开始更多的介绍开发过程经常让人头痛的前 ...

  3. CSS,点击去除虚线边框代码

  4. css 10 款非常棒的CSS代码格式化工具推荐

    http://www.iteye.com/news/23692/  10 款非常棒的CSS代码格式化工具推荐 2011-12-14 09:31 by 副主编 wangguo 评论(0) 有9111人浏 ...

  5. css强制html不换行 css强制英文单词断行 重拾丢失的

    css强制html不换行 css强制英文单词断行 强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-brea ...

  6. 在css加载完毕后执行后续代码

    最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui ...

  7. css伪类实现行号自动填充

    css伪类实现行号自动填充 大多数时候我们需要行号自动填充的时候我们可以 大多数时候是插入元素, 在元素里用js填入行号,或者用 ol > li 实现行号填充, 对于上面的方式,都不太灵活,而且 ...

  8. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. java编程思想第四版第十一章总结

    1. 容器类被分为两类:Collection和Map Collection是一个接口:包括: List接口: ArrayList:按照被插入顺序保存元素, 查询快, 增删改慢 LinkedList:按 ...

  2. Python标准类型的分类

    Python有3种不同的模型可以帮助对基本类型进行分类,这些类型更好的理解类型之间的相互关系以及他们的工作原理. 1 存储模型    能保存单个字面对象的类型,称为原子或标量存储:    能保存多个对 ...

  3. window系统下删除多余的引导

    window系统下删除多余的引导 1.首先第一步进入EFI分区删除多余系统引导,只留下需要的引导 如何进入EFI分区 a)win 搜索框输入cm, 右键以管理员运行命令行 b)输入命令 diskpar ...

  4. Python 命令行之旅:深入 click 之子命令篇

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  5. PostGIS 爆管分析之根据爆点找出所有影响阀门

    环境: Win10 ArcMap10.4(用于数据处理) postgresql9.4 postgis2.2.3 pgRouting2.3(postgresql插件) 说明: 做爆管分析的第一步,需要先 ...

  6. PowerDesigner从安装到同步数据库

    前言 最近项目在如火如荼的进行着4.0版本的数据库设计工作,我们几个后端小伙伴也马不停蹄的进行着数据库的设计.使用的设计软件是PowerDesigner,这里记录一些常见的问题以备日后查看 安装 链接 ...

  7. 【2018寒假集训 Day2】【动态规划】回文字

    回文字(palin) 问题描述: 如果一个单词从前和从后读都是一样的,则称为回文字.如果一个单词不是回文字,则可以把它拆分成若干个回文字.编程求一个给定的字母序列,最多要分割成几部分,使每一部分都回文 ...

  8. Stream系列(二)Map方法使用

    Stream 将List 里面的对象转换为新的对象 EmployeeTestCase.java package com.example.demo; import lombok.Data; import ...

  9. 【译】为什么永远都不要使用MongoDB Why You Should Never Use MongoDB

    背景 最近在学习DDIA(Designing Data-Intensive Applications)这本分布式领域非常急经典的入门书籍,里面第二章<数据模型与查询语言>,强调了对一对多. ...

  10. 请求https前缀的网站验证SSL证书的解决方案之一

    from requests.packages.urllib3.exceptions import InsecureRequestWarning # 禁用安全请求警告requests.packages. ...