CSS如何制作液态按钮流动效果？伪元素动画实现

@keyframes

<button class="liquid-button">
    立即体验
</button>

translateX

.liquid-button {
    position: relative; /* 确保伪元素能基于按钮定位 */
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* 默认文本颜色 */
    background-color: #6c5ce7; /* 按钮默认背景色 */
    border: none;
    border-radius: 10px;
    overflow: hidden; /* 关键：隐藏伪元素超出按钮的部分 */
    cursor: pointer;
    transition: color 0.6s ease-in-out, background-color 0.3s ease; /* 文本颜色和背景色过渡 */
    z-index: 1; /* 确保按钮内容在伪元素之上 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.liquid-button::before {
    content: '';
    position: absolute;
    top: 0; /* 从按钮顶部开始 */
    left: -150%; /* 伪元素初始位置：完全在按钮左侧之外 */
    width: 200%; /* 伪元素宽度：足够覆盖按钮并有溢出 */
    height: 100%; /* 伪元素高度：与按钮同高 */
    background-color: #a29bfe; /* 液体颜色 */
    /* 制造不规则的液态形状，你可以尝试不同的值 */
    border-radius: 35% 65% 65% 35% / 45% 45% 55% 55%;
    transform: translateX(0) rotate(0deg); /* 初始变换 */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 动画过渡，使用贝塞尔曲线让效果更自然 */
    z-index: -1; /* 将伪元素放在按钮文本下方 */
}

.liquid-button:hover {
    color: #fff; /* 鼠标悬停时文本颜色 */
    background-color: #5c4ce6; /* 悬停时按钮背景色，可以与液体色区分 */
}

.liquid-button:hover::before {
    transform: translateX(50%) rotate(360deg); /* 伪元素移动到按钮中间并旋转 */
    /* 这里的 translateX(50%) 是基于伪元素自身宽度计算的，因为伪元素宽度是200%，
       所以移动50%刚好让它覆盖按钮 */
}

position: absolute

<div>

<span>

transition

animation

200%

-25%

transform: translate(-50%, -50%)

translate

scale

skew

transition-timing-function

cubic-bezier

z-index

liquid-button

z-index: 1

z-index: -1