关于评分的半颗星,1/3颗星有没有办法通过css样式写出来,有没有人能够提供下思路 - CNode技术社区

star.png

很少有半个的吧。不行的话就1个星星拆成2半,哈哈。

@coolicer 有半个,评分要算个平均值有小数的

纯臆猜...这种东西切个png出来做...结合background-position和background-size

http://zavoloklom.github.io/material-design-iconic-font/icons.html

做个长条的5星连在一起的,然后width: 比如说设置成33.33%(具体需要计算下)不可以吗?

@DevinXian 星星就是字体啊,我是想的用文字蒙版,然后改变背景的size来实现

https://ant.design/components/rate-cn/

xiao.png

上面的是我自己实现的css样式

span i.iconfont.icon-star*5 span{ font-size: 0.8rem; background: -webkit-linear-gradient(-180deg, #d9d8d4 10%, #ff853f 10px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.1rem; }

@dianjie 就是因为不想用插件才自己做啊

@FlyerJay 这样做,移动设备可用,因为浏览器css兼容性好;pc不合适吧,想想IE就爽

@FlyerJay 可以参考别人的实现啊...... 使用cnode[antd-moblie]版

两层图片叠加,上面为彩色,下面为灰色。要显示多少就控制彩色长度就行了。

字符也可以,同样是两层叠加,比如我这个组件,参考一下: https://vux.li/#/zh-CN/demos/rater

@FlyerJay 你看看那个实现,和插件没关系,通过设置内部元素的定位和颜色改变来控制伪元素 before 实现星星的1/2

@DevinXian 因为只用适配移动设备

@DevinXian 好的

@airyland 好的,你是vux的作者呀

@FlyerJay github工作记录真是满

@DevinXian 瞎搞

@airyland 你这个基本没有兼容性问题,