液体流动按钮

2025年06月04日 • 更新于 2025年06月04日

代码

<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>

字符数: 0

单词数: 0

行数: 0

液体流动按钮

代码

关于博主

LBZCC的博主

最新文章

分享文章