首页 > 代码库 > CSS-用伪类制作小箭头(轮播图的左右切换btn)
CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html
作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作。
第一个是left按钮,即prev:
.vmc-arrow-left:after { content: "\e079"; }
第二个是right按钮的,也就是next下一张的按钮:
.vmc-arrow-right:after { content: "\e080"; }
最后是二者共同的样式代码:
.vmc-arrow-left:after, .vmc-arrow-right:after { content: ‘‘; display: inline-block; font-family: ‘Glyphicons Halflings‘; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 50px; line-height: 50px; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 2px 2px #000; }
首先,我觉得核心代码就是伪类中添加的那两个content内容,其次是共同样式中的font-family的作用,如果不使用这个字体,会变成一个“口”。
其余,都是样式了,可以自定义的。
注意到一点是到了共同区域还是要有空内容先放在那里的。
还是同一个网站,不同项目中,看到了font文件夹中有icomoon的字体:
,
好奇查了一下,是一种web图标字体,这样就能解释之前那个案例中,font-family的重要性的原因了。是那种字就是图标字,而content加载的序号应该就是字库中对应的那种图标字体。如下是一个小房子的图标代码:
.icon-htmleaf-home-outline:before { content: "\e5000"; } .htmleaf-icon:before { margin: 0 5px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: ‘icomoon‘; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; }
CSS-用伪类制作小箭头(轮播图的左右切换btn)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。