码云前端开发 2018-07-11

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

文章目录隐藏

一、基本概念
二、基本用法
三、进阶用法
四、特效妙用
结束语

为什么要整理这篇文章，是因为最近我的一个项目用到了: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; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

制作三角的方法：

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

.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 代码

<div class="strength grWidth hidden">
    <div class="homeTitle">
        <h2>前端博客</h2>
    </div>
    <ul class="strengthMain">
        <li><a href="https://mybj123.com/"><img src="xiank.jpg" alt="专业团队"><div class="font"><h3>码云笔记</h3><p>欢迎访问码云笔记，这里有丰富的前端知识，但不局限于前端！</p></div></a></li>
    </ul>
</div>

Css 特效代码

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.05, 1.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(0, 1);
-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(1, 0);
transform-origin: 100% 0;
}

.strengthMain li:hover .font::before,
.strengthMain li:hover .font::after {
opacity: 1;
transform: scale(1);
transition: all 0.5s;
}