像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. [LC]219题 Contains Duplicate II (存在重复元素 II )

    ①英文题目: Given an array of integers and an integer k, find out whether there are two distinct indices ...

  2. ASP.NET Core 3.0 gRPC 身份认证和授权

    一.开头聊骚 本文算是对于 ASP.NET Core 3.0 gRPC 研究性学习的最后一篇了,以后在实际使用中,可能会发一些经验之文.本文主要讲 ASP.NET Core 本身的认证授权和gRPC接 ...

  3. lqb 基础练习 字母图形 (循环)

    基础练习 字母图形 时间限制:1.0s   内存限制:256.0MB     问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEFG BABCDEF CBABCDE DCBAB ...

  4. mysql5.7下载与安装

    一.完全卸载旧版mysql 参考文章:https://blog.csdn.net/hui1setouxiang/article/details/89816176 二.win10中下载安装mysql5. ...

  5. VueJS学习之Vue-cli项目模板

    1. 首先是学习vue时需要依赖于node.js和webpack打包工具,具体的安装如下 http://nodejs.cn/download/下载安装nodejs,具体的安装步骤不在此赘述 2. 安装 ...

  6. 构建之法组——“别吃错喽”微信小程序评价

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9860 基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论 ...

  7. Java流程控制之(一)条件

    目录 条件语句 单if情况 单if/else情况 if/else多分支情况 switch条件语句 条件语句+循环语句,直接甩图甩代码! 条件语句 Java希望在某个条件为真时执行相应的语句. 单if情 ...

  8. ggforce|绘制区域轮廓-区域放大-寻找你的“onepiece”

    首发于“生信补给站” https://mp.weixin.qq.com/s/fm69bw-3cww1YEW_kBcTHQ 更多关于R语言,ggplot2绘图,生信分析的内容,关注有惊喜

  9. The absolute uri: [http://java.sun.com/jsp/jstl/core] cannot be resolved in either web.xml or the jar files deployed with this application] with root cause异常处理及解释

    1.问题描述: 在web的jsp文件中想用jstl这个标准库,在运行的时候很自然的引用jar包如下: <dependency> <groupId>javax.servlet.j ...

  10. JS三座大山再学习(三、异步和单线程)

    本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...