CSS-用伪类制作小箭头(轮播图的左右切换btn)

简介: 先上学习地址:http://www.htmleaf.com/Demo/201610234136.html作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作。

先上学习地址: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;
}

 也就是说:字体“Glyphicons Halflings”中,

"\e079"、"\e080"分别对应的就是左右箭头了?!

推理没错,因为我换一个字体他就不是这个图标了,眼下搞不懂具体原理,但可以肯定的是,这个字体和这两个号码组合,出来的就是左右箭头图标。

2017-07-13  17:48:34

前几天刚掌握了字体图标,刚好又看到一开始蒙着眼睛走路的自己写的这篇白痴的文章,

左右箭头就是字体图标,这两天字体图标原理及文章整理的计划已经被我提上日程,

文章出来以后,见链接

目录
相关文章
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
27 0
|
3月前
|
前端开发 JavaScript 索引
|
3月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
26 3
|
6月前
|
前端开发
CSS3常见伪类和伪元素及其使用方法
CSS3常见伪类和伪元素及其使用方法
56 0
|
6月前
|
前端开发 JavaScript
CSS伪类和伪元素
CSS伪类和伪元素
21 1
|
3月前
|
前端开发
CSS3新增的has伪类选择器,让你能轻松选择父元素
CSS3新增的has伪类选择器,让你能轻松选择父元素
26 0
|
16天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
7 0
N..
|
25天前
|
前端开发 UED
CSS伪类和伪元素
CSS伪类和伪元素
N..
7 0
|
5月前
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
64 1
|
2月前
css3新增的伪类有哪些?
css3新增的伪类有哪些?