素材牛VIP会员
请问这个图片上打钩图标是用CSS写的吗?
 赵***2  分类:Html5  人气:1011  回帖:5  发布于6年前 收藏

这是鼠标还没移动上去之前

这是鼠标移上去之后的效果

刚学习html和css没多久,今天仿站的时候这个部分,在原文件里面并没有字母前面那个打钩的图片。是用css写的吗?
是怎么实现的呢?

能告诉我的话,真的是感激不尽!!!谢谢

 标签:csshtmlhtml5

讨论这个帖子(5)垃圾回帖将一律封号处理……

Lv3 码奴
请***子 站长 6年前#1

目测是iconfont

Lv4 码徒
ji***ca JS工程师 6年前#2

请搜索iconfont,也就是图标字体。

就是把图形做成字体,然后用css的::before伪元素插入到元素前面。

Lv6 码匠
qx***23 Linux系统工程师 6年前#3

没看到源码,但是应该是两个样式,两个样式的背景图片是不一样的图片
比如默认是a 样式没有√的,background-url(xxx),这里用没有√的图片路径
js监控hover事件,去掉a样式,增加b样式 ,此时b样式的background-url(xxx),就是有√的图片路径,
不是专业写css的,如错,还请指出.

Lv6 码匠
85***32 交互设计师 6年前#4

伪元素。其实甚至可以不用字体图标,纯css也是可以做的,那个勾只需要一个只有两条边框线的div旋转一下就可以了…

Lv6 码匠
飞***z 站长 6年前#5

字体做的,可以去参考Fnt-Awesom,各种字体很多,点击之后加上对应的类去改颜色就好

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取