认识:before和:after伪类
有时候,我们需要大量的重复代码去实现一个非常简单的功能,这不仅浪费时间,而且效率低下,例如:
<div class="aa">你好</div>
<div class="aa">我好</div>
<div class="aa">大家好</div>
<div class="aa">前面和后面</div>
我们如果需要为每一个div添加一个动态的括号滑动出现和消失的css3动画,那么,接下来可以想象就是不停地对每一个div 的前面和后面或者里面添加两个div。这样费事费力的差事每一个会偷懒的程序猿都不会干的,于是,这里我们可以用伪类轻松解决。
在css中,为aa添加两个伪类——
.aa::before{
display: inline-block;
content: '[';
transform: translateX(30px);
opacity: 0.1;
}
.aa::after{
display: inline-block;
content: ']';
transform: translateX(-30px);
opacity: 0.1;
}
仅仅是这样就足够了,可以看到每一个aa 的div前后都有了括号(调一下opacity可以看的更清楚)。
如果需要动态效果,也只需要——
.aa::before,.aa::after{
transition-property: transform opacity ;
transition-duration: 0.8s;
transition-timing-function: linear;
}
.aa:hover::before,:hover::after{
transform: rotateX(0);
opacity: 1;
}
便可以轻松愉快的搞定了。
较为注意的是,使用transfrom:rotateX的时候,如果它们不是行内元素就可能无效。
还有,如果content属性不写的话,是不会有东西出来的。
认识:before和:after伪类的更多相关文章
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- CSS权威指南之css声明,伪类,文本处理--(简要笔记一)
1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...
- CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- 伪类before和after
以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西! 如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- 利用伪类:before&&:after实现图标库图标
一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- CSS笔记之伪类与伪元素
伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{} a:hover{} a:active{} a:visited{} input[type='text']:focus{} ...
- W3School-CSS 伪类 (Pseudo-classes) 实例
CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...
- <a>链接的四个伪类顺序
<a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...
随机推荐
- ISO/IEC 9899:2011 条款5——5.1.2 执行环境
5.1.2 执行环境 1.定义了两个执行环境:独立式(freestanding)以及宿主的(hosted).在这两种情况下,当一个派定的C函数被执行环境调用时,程序就启动.所有具有静态存储周期的对象应 ...
- 置BAT批处理窗口显示颜色
置BAT批处理窗口显示颜色 摘自:https://blog.csdn.net/tp7309/article/details/53450131 2016年12月04日 01:08:33 亦游 阅读数:1 ...
- VL10B 采购订单转DN
传入采购订单项目建交货单 FUNCTION zmmfmXXXX. *"------------------------------------------------------------ ...
- react中如何处理日期格式整理
1.第一种模式——对应组件:DatePicker: 需要引入 import moment from "moment"; values.cfjdrq = moment(values. ...
- iOS自定义遮盖
@interface TGCover : UIView+ (id)cover;+ (id)coverWithTarget:(id)target action:(SEL)action; - (void) ...
- Azure DevOps的variable group实现array和hashtable参数的传递
Azure Devops中的variable group建议或者只能(?)添加string类型的value.基于此我们想在variable group实现array或者hashtable的传递的核心思 ...
- 从源码角度解析Netty的React模式是如何工作的
Netty 支持多种实现方式,比如nio,epoll 等,本文以nio的实现方式进行讲解. 1.EventLoop : 事件循环看,简单来说就是一个死循环监听事件,如果事件来了,处理掉.通常做法就是开 ...
- 第 20 课 go如何实现继承的 && 给引用模块起别名
golang语言中没有继承,但是可以依靠组合来模拟继承和多态. package controllers import ( "encoding/json" md "gowe ...
- 【数据库开发】在Windows上以服务方式运行 MSOPenTech/Redis
在Windows上以服务方式运行 MSOPenTech/Redis ServiceStack.Redis 使用教程里提到Redis最好还是部署到Linux下去,Windows只是用来做开发环境,现在这 ...
- 高级UI-Snackbar
在与用户的交互中,最为常用的Toast和Dialog,但二者都存在其局限,Toast无法与用户进行交互,Dialog虽然可以与用户交互,但却会阻断用户操作的连贯性,介于二者之间的平衡,Snackbar ...