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; }
也就是说:字体“Glyphicons Halflings”中,
"\e079"、"\e080"分别对应的就是左右箭头了?!
推理没错,因为我换一个字体他就不是这个图标了,眼下搞不懂具体原理,但可以肯定的是,这个字体和这两个号码组合,出来的就是左右箭头图标。
2017-07-13 17:48:34
前几天刚掌握了字体图标,刚好又看到一开始蒙着眼睛走路的自己写的这篇白痴的文章,
左右箭头就是字体图标,这两天字体图标原理及文章整理的计划已经被我提上日程,
文章出来以后,见链接
转载于:https://www.cnblogs.com/padding1015/p/6209262.html
CSS-用伪元素制作小箭头(轮播图的左右切换btn)相关推荐
- html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
- 简单的手写jquery轮播图(包含切换按钮、小圆点)
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
- html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
- 解决在使用CSS3制作不间断轮播图中 收尾连接后Interval 延时问题
2019独角兽企业重金招聘Python工程师标准>>> 问题:使用CSS3制作不间断轮播图中 原理就是克隆一个首个轮播图在整个轮播图的尾部,尾部播放放以后继续播放克隆的首部块,然后在 ...
- 微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档 文档https://developers.weixin.qq.com/miniprogram/dev ...
- ios中间大,两边小的轮播图
首先上图 , 中间大,两边小的轮播图 ,git地址 : https://github.com/guochaoshun/LunBoTu 主要参考代码 : https://github.com/orzzh ...
- 短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
- 微信小程序轮播图指示点自定义(修改原生指示点样式)
1.实现效果 2.实现原理 修改swpier原生指示点的样式. .wx-swiper-dots.wx-swiper-dots-horizontal .wx-swiper-dot .wx-swiper- ...
- 微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
最新文章
- MATLAB中导入数据:importdata函数
- mysql 绕过空格_SQL注入篇-绕过方法
- docker commit 发布自己的镜像
- operamasks-ui2.0 +MVC4.0+EF5.0实战之一 开篇及布局控件介绍
- Javascript的调试利器:Firebug使用详解
- C语言之文件读写探究(五):rewind、ftell、fseek(文件指针偏移)
- 到底应不应该表达自己对工作安排的不满?
- 黑马博客——详细步骤(九)项目功能的实现之mongoDB数据库添加账号
- Kubernetes 小白学习笔记(26)--kubernetes的运维-查看事件和容器日志
- NVIDIA显卡驱动的重装
- 如何写一篇给天使投资人看的《商业计划书》?
- ctfshow 网络迷踪-初窥门径
- 水果忍者(数学 叉积)
- 在做微信公众号网页授权的时候,有时会重定向两次网页(302问题)
- 违反开源项目GPL协议,法院判罚了!国内首例
- 机器人教育在学校普及
- Python|猜数字小游戏
- ALSA (高级Linux声音架构)、ASOC基础知识
- 统信桌面操作系统产品手册
- Python、C、Matlab续行符(连行符)