生活是种律动，须有光有影，有左有右，有晴有雨。——老舍
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .login { display: flex; align-items: center; justify-content: center; margin-top: 200px; } .button { background-color: #ff3539; height: 100px; width: 100px; border-radius: 50px; line-height: 100px; text-align: center; color: #fff; } @keyframes shockwave { 0% { transform: scale(1); box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.15); } 95% { box-shadow: 0 0 50px transparent, inset 0 0 30px transparent; } 100% { transform: scale(2.25); } } @keyframes shockwaveJump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 50% { transform: scale(0.98); } 55% { transform: scale(1.02); } 60% { transform: scale(0.98); } 100% { transform: scale(1); } } .btn--shockwave.is-active { z-index: 12; animation: shockwaveJump 1s ease-out infinite; } .btn--shockwave.is-active:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; animation: shockwave 1s .65s ease-out infinite; } .btn--shockwave.is-active:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; animation: shockwave 1s .5s ease-out infinite; } </style> </head> <body> <div class="login"> <div class="button btn--shockwave is-active">点我</div> </div> </body> </html>
效果：
