ul { font-size:0; position:relative; padding:0; 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:rippleDrop .4s linear; animation:rippleDrop .4s linear; } @-webkit-keyframes rippleDrop { 100% { -webkit-transform:scale(2); transform:scale(2); opacity:0; } }@keyframes rippleDrop { 100% { -webkit-transform:scale(2); transform:scale(2); opacity:0; } }
点击会出现波纹,并且底下动态跟随