手把手教你实现一个自动倒啤酒的效果

前言

继上次实现一个汽车运货的效果后，这次我就带大家来实现一个自动倒酒的效果，纯CSS实现，十分简单，没有花里胡哨的技巧。话不多说，咱们直接进入主题。

效果预览

最终实现的相关效果如下。

HTML部分

首先看到HTML部分。相关代码如下。

 <div class="container">

        <div class="keg">

            <span class="handle"></span>

            <span class="pipe"></span>

        </div>

        <div class="glass">

            <span class="beer"></span>

        </div>

    </div>

这里定义了一个啤酒桶（keg）和玻璃杯（glass）的容器结构，通常用于模拟倒啤酒的动画场景。

.container 是最外层容器，用于定位整个啤酒桶和玻璃杯的组合。 .keg（啤酒桶） 包含两个子元素分别是 .handle（啤酒桶的金属把手）以及 .pipe（出酒管道）。 .glass（玻璃杯） 包含  .beer 元素，表示杯中的啤酒液体，通常通过CSS动画模拟啤酒被倒入的效果。

CSS部分

由于这里的效果涉及了很多动画效果，并且作为该效果的主要功能是倒酒，所以我们在这里主要介绍动画相关的CSS部分，即是如何实现倒酒。相关代码如下。

这里是类名为flow的动画部分，相关代码如下。

@keyframes flow {
0%, 15% {
top: 40px;
height: 0;

    }

20% {
height: 115px;

    }

40% {
height: 75px;

    }

55% {
top: 40px;
height: 50px;

    }

60%, 100% {
top: 80px;
height: 0;

    }

}

这个动画的整体效果是液体从无到有爆发式流出 → 流量逐渐减少 → 最后滴落消失，通过 height 变化模拟液体体积变化，通过 top 调整模拟液体位置移动（如滴落时的垂直位移）。最后再不断循环。

初始状态（0%, 15%） 液体不可见（高度为0），准备开始流动。液体开始流出（20%） 液体高度突然增加（从0到115px），模拟液体从管道中快速涌出。液体减少（40%） 液体高度降低（从115px到75px），模拟流量减小。液体即将流尽（55%） 液体顶部位置回弹（可能模拟最后几滴液体下落），高度进一步减小。液体完全消失（60%, 100%） 液体高度归零，同时顶部位置下移（top: 80px），模拟液体完全流尽或滴落。

最后就是handle，slide的动画部分，相关代码如下。

@keyframes handle {
10%, 60% {
transform: rotate(0deg);

    }

20%, 50% {
transform: rotate(-90deg);

    }

}
@keyframes slide {
0% {
left: 0;
filter: opacity(0);

    }

20%, 80% {
left: 300px;
filter: opacity(1);

    }

100% {
left: 600px;
filter: opacity(0);

    }

}

这里定义了两个关键帧动画：handle（把手旋转）  和 slide（水平滑动淡入淡出） 。

把手旋转动画模拟把手（如啤酒桶开关）的来回扳动效果。在 0%-10% 保持初始状态（0deg）。在20% 快速逆时针旋转到-90deg（如打开阀门）。在50% 仍保持-90deg（持续打开状态）。在60% ：回到0deg（关闭阀门）。

水平滑动动画 实现元素从左侧滑入、暂停、再滑出并淡出的效果。在 0% 元素从左侧（left: 0）透明状态开始。在 20%-80% 滑动到中间（left: 300px）并完全显示。在 100% 继续滑到右侧（left: 600px）并淡出。

最后就是fillup，fillup-foam，wave的动画部分，相关代码如下。

@keyframes fillup {
0%, 20% {
height: 0px;
border-width: 0px;

    }

40% {
height: 40px;

    }

80%, 100% {
height: 80px;
border-width: 5px;

    }

}
@keyframes fillup-foam {
0%, 20% {
top: 0;
height: 0;

    }

60%, 100% {
top: -15px;
height: 15px;

    }

}

@keyframes wave {
from {
transform: skewY(-3deg);

    }

to {
transform: skewY(3deg);

    }

}

这里定义了三个关键帧动画，用于模拟液体（如啤酒）倒入容器时的动态效果，包括液体上升、泡沫生成和液体表面波动。

液体填充动画 模拟液体从空杯到满杯的填充过程。在 0%-20% 容器为空（高度为0）。在 40% 液体快速上升至半满（40px）。在 80%-100% 液体完全填满（80px），同时显示容器边框（如玻璃杯厚度）。

泡沫生成动画 模拟液体倒满时产生的泡沫层。在 0%-20% 无泡沫（高度为0）。在 60%-100% 泡沫在液体顶部形成并略微溢出（top: -15px）。通过 top 负值实现泡沫“溢出”杯口的视觉效果。

液体波动动画 模拟液体表面的轻微波动（如倒入后的晃动）。通过 skewY 实现Y轴倾斜变换，产生波浪效果。通常需配合 animation-direction: alternate 让动画来回播放。

总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~