ul { font-size:0; padding:0; position:relative; width:480px; margin:40px auto; user-select:none; } li { display:inline-block; width:160px; height:60px; background:#E95546; font-size:16px; text-align:center; line-height:60px; color:#fff; text-transform:uppercase; position:relative; overflow:hidden; cursor:pointer; } .slider { display:block; position:absolute; bottom:0; left:0; height:4px; background:#4FC2E5; transition:all 0.5s; } .ripple { width:0; height:0; border-radius:50%; background:rgba(255,255,255,0.4); -webkit-transform:scale(0); -ms-transform:scale(0); transform:scale(0); position:absolute; opacity:1; } .rippleEffect { -webkit-animation:ripple .4s linear; animation:ripple .4s linear; } @-webkit-keyframes ripple { 100% { -webkit-transform:scale(2); transform:scale(2); opacity:0; } }@keyframes ripple { 100% { -webkit-transform:scale(2); transform:scale(2); opacity:0; } }
更新时间:2020-04-22 20:42:11