CNode

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

分享
FFlyerJay发布于10 年前最后回复10 年前22 回复8953 浏览0 收藏

star.png

查看回复

回复 (22)

C
coolicer#1·10 年前

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

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

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

D
DevinXian#3·10 年前

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

A
andyhu#5·10 年前

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

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

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

F
FlyerJay#8·10 年前

xiao.png

F
FlyerJay#9·10 年前

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

F
FlyerJay#10·10 年前

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#11·10 年前
引用 dianjiehttps://ant.design/components/rate cn/

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

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

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

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

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

A
airyland#14·10 年前

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

A
airyland#15·10 年前

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

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

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

D
DevinXian#20·10 年前
引用 FlyerJay@airyland 好的,你是vux的作者呀

@FlyerJay github工作记录真是满

F
FlyerJay#21·10 年前
参与回复
登录后即可参与回复。登录