# 常用CSS动画效果
## 1. 图片上方的线条动画
~~~
/*图片上的动效*/
.dong{position: relative;overflow: hidden;}
/*定义纵向线条*/
.dong:before{
content:'';
position: absolute;
display: block;
height: 0%;
bottom:0;
left:10px;
right:10px;
border-left: 2px solid rgba(255,255,255,.5);
border-right: 2px solid rgba(255,255,255,.5);
transition: height .3s ease;
}
/*定义横向线条*/
.dong:after{
content:'';
position: absolute;
display: block;
width: 0%;
top:10px;
bottom:10px;
left:0;
border-top: 2px solid rgba(255,255,255,.5);
border-bottom: 2px solid rgba(255,255,255,.5);
transition: width .3s ease .3s;
}
.dong:hover:before{
height: 100%;
}
.dong:hover:after{
width: 100%;
}
~~~
## 2. 图片上方鼠标经过 中心放大透明效果
>[success]注意，使before上下左右局中的实现原理，就是将四调的距离全部设置为0（left: 0; right:0; top:0;bottom: 0;）；
~~~
.dong1{position: relative;}
.dong1:before{
content: "";
display: block;
position: absolute;
left: 0;
right:0;
top:0;
bottom: 0;
background-color:#FFF;
width: 100%;opacity:.3;
height: auto;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
transition: transform .3s ease;
}
.dong1:hover:before{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
~~~
