css限制字体三行_讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻...
(给100素材网点亮★号,提升开发技能)
像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行?01效果图02原理主要是借助radio单选框,梳理如下:
去找个好看的iconfont;
借用5个radio单选框,把默认样式都去掉,显示默认的星星;
用checked伪类监听用户选中✅,由默认的星星变成高亮的星星;
然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮?;
把5个radio单选框反向排列❗;
03代码这是我事先生成好的iconfont:
"stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">
一个很简洁的布局:
"rate-content"> type="radio" name="rate"> type="radio" name="rate"> type="radio" name="rate"> type="radio" name="rate"> type="radio" name="rate">
先把默认的星星显示出来:
// 去掉默认样式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;}
如果用外边距的话,那么会出现以下情形:内边距的作用是保持元素连贯性以及扩大点击范围?
css限制字体三行_讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻...相关推荐
- 把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬 让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
- css文本字体形状_使用CSS更改文本字体
css文本字体形状 In the last module, we discussed text formatting. By now, you already know how to work wit ...
- css限制字体三行_CSS美化网页
一.字体样式 font-family:设置字体类型,可以同时声明多种字体,字体之间用英文逗号分隔开: font-size:设置字体大小,常用单位为px,还有其他如in.cm.mm.pt.pc等单位: ...
- css一行点点点_如何通过一点点创意使CSS成为不可能
css一行点点点 by Facundo Corradini 由Facundo Corradini If you ever used CSS sibling selectors, you know th ...
- css 商城 两列_【云控基础】HTML+CSS基础入门
课程大纲: 第一部分:课程概述1.什么是HTML.CSS,能做什么?2.HTML.HTML5.H5的区别3.HTML+CSS全览4.HTML.CSS的学习路径和学习方法第二部分:HTML+CSS开发环 ...
- react 组件构建_让我们用100行JavaScript构建一个React Chat Room组件
react 组件构建 by Kevin Hsu 通过徐凯文 让我们用100行JavaScript构建一个React Chat Room组件 (Let's Build a React Chat Room ...
- native react 折线图_【详解】纯 React Native 代码自定义折线图组件(译)
本文为 Marno 翻译,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言 在移 ...
- css 引用嵌入字体不起用_使用CSS嵌入字体
css 引用嵌入字体不起用 Fonts can also be embedded into web pages: that is, the end-user sees the page text in ...
- html字体加粗效果不明显,css去除粗体_去掉加粗样式图文实例教程
用css去除粗体名目,html有些标签自带粗体格局,也许使用css格局去除粗体字体造诣. 一.去除粗体CSS属性单词 font-weight --粗体,加粗名目单词 去除勾销加粗粗体样式: font- ...
最新文章
- c语言杨辉三角的实现
- 在博客中如何让code具有比较易读的格式
- 软件工程-第一次作业
- 如何将结婚当作项目来管理
- window mobile 防止系统休眠代码
- 情感分析(Sentiment Analysis)的难题--转
- Cross-site Scripting (XSS) 阅读笔记
- 因为世界杯!我们为你承包了整个网易~
- Linux中的延时函数
- 有关LinkedList常用方法的源码解析
- Java系列之XML
- centos7部署posgresql和kong总结
- c语言扎金花编程,一个C语言开发的炸金花纸牌游戏附带vs性能分析报告
- 硬件科普系列之内存篇
- 在线证件照一键美化换底色,制作所属自己的证件照
- chrome浏览器美化插件:让您的浏览器页面冒水泡, 游小鱼儿
- 解决Ubuntu 20.04无法播放网页音视频的问题
- PHP实现匿名聊天室
- 把图片转换成视频-ffmpeg
- 散列表、散列函数和散列冲突以及应用场景(一文看懂)
热门文章
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
- Mac Book Pro不能识别移动硬盘
- genymotion 极速模拟器
- 【翻译】Ext JS 4——Ajax和Rest代理处理服务器端一场和消息的方法
- 将openstack的Token认证信息存储在memcache中
- SpringAPI手动创建代理对象——ProxyFactory
- 发布一个http请求封装类
- Memory-Associated Differential Learning论文及代码解读
- leetcode 645. 错误的集合
- 比特币钱包私钥_如何通过私钥创建比特币钱包地址