html涟漪动画效果,CSS3做涟漪的效果

涟漪的效果

@keyframes myfirst

{

from {border:0 solid #E4684D; left:1px;top: 1px;}

to {border:12px solid #E4684D; left:-11px;top: -11px;}

}

@-moz-keyframes myfirst

{

from {border:0 solid #E4684D; left:1px;top: 1px;}

to {border:12px solid #E4684D; left:-11px;top: -11px;}

}

@-webkit-keyframes myfirst

{

from {border:0 solid #E4684D; left:1px;top: 1px;}

to {border:12px solid #E4684D; left:-11px;top: -11px;opacity: 0;}

}

@-o-keyframes myfirst

{

from {border:0 solid #E4684D; left:1px;top: 1px;}

to {border:12px solid #E4684D; left:-11px;top: -11px;}

}

.box {

background-position: 0 0;

margin: 300px auto;

border-radius: 50%;

width: 86px;

height: 86px;

background: url(http://imgcache.qq.com/ac/www_tencent/join/images/icon_post.png) no-repeat 0 0;

position: relative;

/*#E4684D*/

}

.box:after {

content: "";

display: block;

height: 84px;

width: 84px;

border-radius: 84px;

position: absolute;

border:0 solid #E4684D;

left:-1px;

top: -1px;

opacity: 1;

}

.box:hover:after {

animation: myfirst 0.5s;

-moz-animation: myfirst 0.5s;

-webkit-animation: myfirst 0.5s;

-o-animation: myfirst 0.5s;

}

1.在after里面要定义好要改变的属性，在这里是border和left, top

2，在hover里面定义好引用的动画和时间