水波纹按钮动画
代码：
<!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>效果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-01-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读