摘要:技术我们使用一些特殊的选择器,然后配合单选框以及复选框自带的一些特性,可以实现元素的显示隐藏效果。当接口返回的分数是分的时候,刚好占据一半的星星,星半,只要计算出百分比就行,只用管数据,用上数据驱动的特点来动态展示样式这个简直不要太容易。
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方式完成评分和展示分数的功能,没有js,也就意味着没判断逻辑,代码出错的几率更少,也更便于维护,在此,把这个功能的实现的过程记录和分享一下,一起学习交流。
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步。
五角星的实现 1.图片或者字体图标不极致追求性能的话,直接利用设计师给的png或者jpg啥的,或者直接转成base64.
2:利用Fontawesome 图标库,其实只是一种矢量字体。HTML:
CSS:
@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); .icon:before { content: "f005"; font-family: FontAwesome; }
在线预览地址
3.利用css3描绘拼凑一个五角星。基本原理:利用transparent的透明不可见和transform转换拼接一个正五角星。
HTML:
CSS:
.star-five{ width: 0; height: 0; color: red; margin: 50px 0; position: relative; display: block; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid red; transform:rotate(35deg); } .star-five:before{ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid red; position: absolute; top: -45px; left: -65px; color: white; display: block; content: ""; transform:rotate(-35deg); } .star-five:after{ width: 0; height: 0; display: block; position: absolute; color: red; top: 3px; left: -105px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid red; content: ""; transform:rotate(-70deg); }
在线预览地址
不建议使用这种,因为选择之后改变颜色状态比较麻烦,改起来很不方便,不如前面几种方便好维护。
★?
简单粗暴,容易控制,品相协调,下面实现方式以★为准。
不用js来控制评分,当然不能错过强大的css选择器,这里就先介绍一下关于实现这个功能要用到的一些css选择器。
在介绍css强大的选择器之前,先普及一下“CSS radio/checkbox单复选框元素显隐技术”,又称“checkbox hack技术”。
1.checkbox hack技术我们使用CSS一些特殊的选择器,然后配合单选框以及复选框自带的一些特性,可以实现元素的显示隐藏效果。然后通过一 些简单的扩展,我们可以不使用任何JavaScript代码实现类似:自定义的单复选框,“更多”展开与收起效果,选项卡切换 效果,或是多级下拉列表效果等等。 相信很多前端开发人员都会遇到boss让修改checkbox和radio样式,毕竟自带的样式太丑了。后来我们发现修改自带样式 并不是那么容易,最后直接使出杀手锏——点击之后替换图片。 今天教大家一种方法,不用替换图片,随意修改样式。还是先看效果图:
`先讲一下原理:两个关键东东,一是伪类选择器:checked,表示对应控件元素(单选框或是复选框)选中时的样式;二就是加号+ 相邻兄弟选择器,这个符号表示选择后面的兄弟节点。于是,两者配合,就可以轻松自如控制后面元素的显示或者隐藏,或是其他样式了。
而如何让单复选框选中和不选中了,那就是label标签了哈,for属性锚定对应的单选框或是复选框,然后点击这里的label标签元素的时候,对应的单复选框就会选中或是取消选中。然后,就有上面的效果啦!`
这里只给一个radio单选框的代码,仅供参考:
HTML:
后端工程师 全栈工程师
SCSS:
.radio-beauty-container { font-size: 0; $bgc: green; %common { padding: 2px; background-color: $bgc; background-clip: content-box; } .radio-name { vertical-align: middle; font-size: 16px; } .radio-beauty { width: 18px; height: 18px; box-sizing: border-box; display: inline-block; border: 1px solid $bgc; vertical-align: middle; margin: 0 15px 0 3px; border-radius: 50%; &:hover { box-shadow: 0 0 7px $bgc; @extend %common; } } input[type="radio"]:checked+.radio-beauty { @extend %common; } }
美化radio单选框在线预览地址:点击我呀
美化checkbox复选框在线预览地址:点击我呀
更多关于这方面的介绍和例子可以参看张鑫旭大神的这篇文章:CSS radio/checkbox单复选框元素显隐技术
2.CSS一些选择器HTML:
1
2
3
4
5
CSS:
p{ width:20px; line-height:20px; border:1px solid gray; text-align:center; font-weight: 700; }
.test1+p{ background-color:green; }
.wrapper>p{ background-color:green; }
.test2~p{ background-color:green; }
.test2::before{ background-color:green; content:"前" } .test2::after{ background-color:green; content:"后" }
.wrapper>:not(.test2){ background-color:green; }
HTML:
3333
CSS:
input:checked+span{ border:10px solid red; }
这里只提一下本文要用到的CSS选择器,更多关于CSS3强大的选择器请移步这里:全面整理 CSS3 选择器的用法
HTML:
关于input标签的隐藏,我这里只要用hidden属性实现隐藏,当然还有很多实现方式,只要input不占据文档的位置但是看不见就OK,我们需要隐藏单选框,且为可用性隐藏。这里还有几种方式仅供大家参考:
1. display: none;.rating >input { display: none; }2. css3的clip
.rating >input { position: absolute; clip: rect(0 0 0 0); }3.opcity
.rating >input { position: absolute; opacity: 0; }
CSS:
.rating { font-size: 0; display: table; } .rating > label { color: #ffffd; float: right; } .rating > label:before { padding: 5px; font-size: 24px; line-height: 1em; display: inline-block; content: "★"; } .rating > input:checked ~ label, .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #FFD700; } .rating > input:checked ~ label:hover, .rating > label:hover ~ input:checked ~ label, .rating > input:checked ~ label:hover ~ label { opacity: 0.5; }
在线预览地址
用户评完分之后,会看到展示的分数,假设五个星星,满分10分。
展示评分就比较简单,放两个一模一样的html,五角星颜色不同,灰色的放在下面,评分的亮色放在上面,然后按照百分比显示分数。
HTML:
CSS:
.star-rating { unicode-bidi: bidi-override; color: #ffffd; font-size: 0; height: 25px; margin: 0 auto; position: relative; display: table; padding: 0; text-shadow: 0px 1px 0 #a2a2a2; } .star-rating span { padding: 5px; font-size: 20px; } .star-rating span:after { content: "★"; } .star-rating-top { color: #FFD700; padding: 0; position: absolute; z-index: 1; display: block; top: 0; left: 0; overflow: hidden; white-space: nowrap; } .star-rating-bottom { padding: 0; display: block; z-index: 0; }
当接口返回的分数是5分的时候,刚好占据一半的星星,2星半,只要计算出百分比就行,只用管数据,用上vue.js数据驱动的特点来动态展示样式这个简直不要太容易。
在线预览地址:
本文方法好处在于,纯CSS驱动,各种切换根本不需要JS,省了不少JS,对于类似这种需求大家也可以举一反三,这里只提供一些思路,没有细说;同时图片背景比较小或者可以直接不使用图片,比起使用图片节省不少资源,和提高些许性能。但是,学习以及理解成本稍高,可能并不适用于所有同行,因此,此文适合喜欢“折腾”的童鞋。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111820.html
摘要:技术我们使用一些特殊的选择器,然后配合单选框以及复选框自带的一些特性,可以实现元素的显示隐藏效果。当接口返回的分数是分的时候,刚好占据一半的星星,星半,只要计算出百分比就行,只用管数据,用上数据驱动的特点来动态展示样式这个简直不要太容易。 最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,...
摘要:技术我们使用一些特殊的选择器,然后配合单选框以及复选框自带的一些特性,可以实现元素的显示隐藏效果。当接口返回的分数是分的时候,刚好占据一半的星星,星半,只要计算出百分比就行,只用管数据,用上数据驱动的特点来动态展示样式这个简直不要太容易。 最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,...
摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...
摘要:在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用实现图片,微信中只能将图片转成来显示,所以是在中使用的来实现评分效果图微信中的可以点击及显示,但是,显示的话,在分,点多分的时候, 在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图...
阅读 2573·2021-10-19 11:41
阅读 2414·2021-09-01 10:32
阅读 3376·2019-08-29 15:21
阅读 1754·2019-08-29 12:20
阅读 1159·2019-08-29 12:13
阅读 597·2019-08-26 12:24
阅读 2518·2019-08-26 10:26
阅读 825·2019-08-23 18:40