84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
这是鼠标还没移动上去之前
这是鼠标移上去之后的效果
刚学习html和css没多久,今天仿站的时候这个部分,在原文件里面并没有字母前面那个打钩的图片。是用css写的吗?是怎么实现的呢?
能告诉我的话,真的是感激不尽!!!谢谢
认证高级PHP讲师
伪元素。其实甚至可以不用字体图标,纯css也是可以做的,那个勾只需要一个只有两条边框线的p旋转一下就可以了…
字体做的,可以去参考Fnt-Awesom,各种字体很多,点击之后加上对应的类去改颜色就好
目测是iconfont
请搜索iconfont,也就是图标字体。
就是把图形做成字体,然后用css的::before伪元素插入到元素前面。
::before
没看到源码,但是应该是两个样式,两个样式的背景图片是不一样的图片比如默认是a 样式没有√的,background-url(xxx),这里用没有√的图片路径js监控hover事件,去掉a样式,增加b样式 ,此时b样式的background-url(xxx),就是有√的图片路径,不是专业写css的,如错,还请指出.
伪元素。其实甚至可以不用字体图标,纯css也是可以做的,那个勾只需要一个只有两条边框线的p旋转一下就可以了…
字体做的,可以去参考Fnt-Awesom,各种字体很多,点击之后加上对应的类去改颜色就好
目测是iconfont
请搜索iconfont,也就是图标字体。
就是把图形做成字体,然后用css的
::before
伪元素插入到元素前面。没看到源码,但是应该是两个样式,两个样式的背景图片是不一样的图片
比如默认是a 样式没有√的,background-url(xxx),这里用没有√的图片路径
js监控hover事件,去掉a样式,增加b样式 ,此时b样式的background-url(xxx),就是有√的图片路径,
不是专业写css的,如错,还请指出.