跳到主要内容
CNode

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

分享
FFlyerJay发布于 10 年前最后回复 10 年前
2289890

star.png

查看回复

回复 (22)

F
FlyerJay#2110 年前
D
DevinXian#2010 年前
引用 FlyerJay@airyland 好的,你是vux的作者呀

@FlyerJay github工作记录真是满

D
DevinXian#1610 年前
引用 FlyerJay@dianjie 就是因为不想用插件才自己做啊

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

A
airyland#1510 年前

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

A
airyland#1410 年前

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

D
dianjie#1310 年前
引用 FlyerJay@dianjie 就是因为不想用插件才自己做啊

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

D
DevinXian#1210 年前
引用 FlyerJay@dianjie 就是因为不想用插件才自己做啊

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

F
FlyerJay#1110 年前
引用 dianjiehttps://ant.design/components/rate cn/

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

F
FlyerJay#1010 年前

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

F
FlyerJay#910 年前

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

F
FlyerJay#810 年前

xiao.png

F
FlyerJay#610 年前
引用 DevinXian纯臆猜...这种东西切个png出来做...结合background position和background size

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

A
andyhu#510 年前

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

D
DevinXian#310 年前

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

F
FlyerJay#210 年前
引用 coolicer很少有半个的吧。不行的话就1个星星拆成2半,哈哈。

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

C
coolicer#110 年前

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

参与回复

登录后即可参与回复。登录