液体流动按钮
19/05/25
0 评论
代码
<button class="liquid-btn">点击触发流动</button>
<style>
.liquid-btn {
position: relative;
padding: 15px 50px;
border: none;
border-radius: 30px;
background: #00c6a7;
color: white;
font-size: 18px;
overflow: hidden;
cursor: pointer;
}
.liquid-btn::before,
.liquid-btn::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0.5;
top: -50px;
left: -50px;
animation: liquid-anim 4s linear infinite;
}
.liquid-btn::after {
animation-delay: -2s;
}
@keyframes liquid-anim {
0% { transform: translate(0, 0); opacity: 0.5; }
50% { transform: translate(80px, 80px); opacity: 0.3; }
100% { transform: translate(160px, 160px); opacity: 0; }
}
</style>