.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;