鼠标滑过波纹效果html代码,鼠标滑过图片的波纹效果

.set {

position:relative;

font-weight:400;

text-align:center;

width:200px;

/* change the width of canvas*/

height:200px;

/* change the height of canvas*/

line-height:200px;

overflow:hidden;

position:relative;

z-index:0;

color:#000000;

/* tetx color*/

background:#fafafa;

/* backgroud color*/

cursor:pointer;

/* background-image:url("http://www.jq22.com/img/cs/500x500-1.png");

put the backgroud image here*/

}

.anim {

-moz-transform:translateY(-50%) translateX(-50%);

-ms-transform:translateY(-50%) translateX(-50%);

-webkit-transform:translateY(-50%) translateX(-50%);

transform:translateY(-50%) translateX(-50%);

position:absolute;

top:50%;

left:50%;

z-index:-1;

}

.anim:before {

position:relative;

content:'';

display:block;

margin-top:100%;

background:#6CB1FF;

}

.anim:after {

content:'';

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

border-radius:50%;

}

.hoverable:hover > .anim:after {

-webkit-animation:anim-out-pseudo 0.75s;

animation:anim-out-pseudo 0.75s;

}

.set:hover > .anim {

-webkit-animation:anim-out 0.75s;

animation:anim-out 0.75s;

}

@-webkit-keyframes anim-out-pseudo {

0% {

background:rgba(255,203,0,50);

/*ripple color and tranparent*/

}

100% {

background:transparent;

}

}@-webkit-keyframes anim-out {

0% {

width:0%;

}

100% {

width:100%;

}

}