生活是种律动,须有光有影,有左有右,有晴有雨。——老舍
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
| <!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>
|
效果: