.set {
position:relative;
font-weight:400;
text-align:center;
width:200px;
height:200px;
line-height:200px;
overflow:hidden;
position:relative;
z-index:0;
color:#000000;
background:#fafafa;
cursor:pointer;
}
.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);
}
100% {
background:transparent;
}
}@-webkit-keyframes anim-out {
0% {
width:0%;
}
100% {
width:100%;
}
}鼠标悬浮会有水波纹扩散,圆形背景可以修改border-radius: 20px;