码云笔记前端博客
Home > HTML/CSS > 巧用before和after伪元素制作动画特效

巧用before和after伪元素制作动画特效

2018-07-12 分类:HTML/CSS 作者:码云 阅读(9214)

本文共计4435个字,预计阅读时长需要12分钟。

为什么要整理这篇文章,是因为最近我的一个项目用到了:before和:after这两个伪元素,结合css3的transform相关属性实现鼠标悬停在图片上出现边框线条动画特效。在CSS 中:before 和 :after这两个伪类元素说不上常用 ,只是偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。接下来就为大家介绍这两个伪类元素。

一、基本概念

1.他们都是CSS伪元素,与:hover/:active等伪类不一样。
2.:before和:after伪元素是在CSS2中提出来的,所以兼容性可能到IE8了。
3.::before与::after是CSS3中的写法,为了将伪类和伪元素区分开。但是平时为了兼容性,还是会用一个冒号的写法。

二、基本用法

p:after{}

img:before{}

这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以下几个值:

[String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例: a:after { content: "↗"; }

attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:a:after { content:"(" attr(href) ")"; }

url() / uri() – 用于引用媒体文件。示例: h1::before { content: url(logo.png); }

counter() – 调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

三、进阶用法

清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:

1
2
3
.clear-fix { *overflow: hidden; *zoom: 1; }

.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

制作三角的方法:

我们在写聊天气泡效果时会用到伪类元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.c-main:before{

    content: '';

    border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/

    border-bottom: 9px solid transparent;/*方框下部分背景为透明*/

    border-right: 9px solid #eee;/*箭头背景颜色*/

    position: absolute;/*绝对定位1*/

    top: 25px;/*距离顶部位置偏移量2*/

    left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/

    }
 .c-main:after{

    content: '';

    border-top: 7px solid transparent;

    border-bottom: 7px solid transparent;

    border-right: 7px solid #fbfdfb;/*箭头背景颜色,覆盖前面的#eee颜色,使其颜色与整体颜色一致*/

    position: absolute;

    top: 27px;

    left: -7px;

}

定位都是其次的,主要是看border设置。一边有颜色,其他三边透明就可以实现。

四、特效妙用

除了简单的添加字符,配合 CSS 强大的定位和特效特性,完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是,如果不需要内容仅配合样式属性做出效果,内容属性也不能为空,即 content:”” 。否则,其他的样式属性一概不会生效。接下来我就以我最近项目中特效为例做演示。

鼠标移上图片悬停不懂出现边框特效:

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="strength grWidth hidden">

    <div class="homeTitle">

        <h2>前端博客</h2>

    </div>

    <ul class="strengthMain">

        <li><a href="https://www.mybj123.com/"><img src="xiank.jpg" alt="专业团队"><div class="font"><h3>码云笔记</h3><p>欢迎访问码云笔记,这里有丰富的前端知识,但不局限于前端!</p></div></a></li>

    </ul>

</div>

Css特效代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

fieldset,img{border:0;}

img{vertical-align:middle;}

ol,ul,li{list-style-type:none;}

table{border-collapse:collapse;border-spacing:0;}

button,input,select,textarea{font-size:13px;font-family:inherit;margin:0;outline:none;resize:none;border:none;}

.clearfix:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; }

.clearfix { zoom:1; }

html{verflow:-Scroll;overflow-x:hidden;zoom:1;overflow-y:scroll;overflow:-moz-scrollbars-vertical;}

body{color:#1b1f2b;font-size:12px;line-height:24px;font-family:"微软雅黑","宋体", Arial, Helvetica, sans-serif; }

a{color:#1b1f2b;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}

a:hover{color:#e5000c;text-decoration:none;}:focus{outline:none;}

/* CSS活动的公共样式 */

.fl{float:left;}

.fr{float:right;}

.gr_center{text-align:center;}

.grWidth{width:1200px; margin:0 auto;}

.mb10{margin-bottom:10px;}

.mb15{margin-bottom:15px;}

.center{text-align:center;}

.hidden{overflow:hidden;}

.nor{font-weight:normal;}

.homeTitle {

text-align: center;

margin-bottom: 35px;

text-transform: uppercase;

line-height: 40px;

}

.homeTitle h2 {

font-size: 36px;

color: #FF0000;

font-weight: normal;

}

.strength {

padding-top: 60px;

}

.strengthMain {

height: ;

overflow: hidden;

}

.strengthMain li {

float: left;

width: 600px;

height: 330px;

overflow: hidden;

background: #000;

position: relative;

}

.strengthMain li img {

width: 600px;

height: 330px;

transition: all .5s;

opacity: 0.4;

filter: alpha(opacity=40);

}

.strengthMain li .font {

width: 600px;

height: 205px;

top: 0;

left: 0;

position: absolute;

color: #fff;

text-align: center;

font-size: 16px;

padding-top: 125px;

}

.strengthMain li .font h3 {

font-size: 36px;

color: #fff;

font-weight: normal;

margin-bottom: 20px;

line-height: 36px;

}

.strengthMain li:hover img {

transform: scale(1.051.05);

}

.strengthMain li .font::before,

.strengthMain li .font::after {

position: absolute;

content'';

opacity: 0;

transition: all 0.5s;

}

.strengthMain li .font::before {

top: 25px;

right: 15px;

bottom: 25px;

left: 15px;

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

transform: scale(01);

-webkit-transform-origin: 0 0;

transform-origin: 0 0

}

.strengthMain li .font::after {

top: 15px;

right: 25px;

bottom: 15px;

left: 25px;

border-right: 1px solid #fff;

border-left: 1px solid #fff;

transform: scale(10);

transform-origin: 1000;

}

.strengthMain li:hover .font::before,

.strengthMain li:hover .font::after {

opacity: 1;

transform: scale(1);

transition: all 0.5s;

}

结束语

以上代码亲测可用,用:before 和:after伪类结合更多CSS3强大的特性,还可以完成非常多有意思的特效和 Hack ,这里仅是抛砖引玉,更多特效还需你去实现,更多精彩内容持续更新,感谢阅读!

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 巧用before和after伪元素制作动画特效

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论