本篇文章给大家带来的内容是关于如何用纯CSS实现接扎啤的特效（附源码） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含一个表示酒桶的 .keg 元素和表示啤酒杯的 .glass 元素。酒桶有 2 个子元素，.handle 表示把手，.pipe 表示出水管，酒杯有 1 个表示啤酒的子元素 .beer：
<div class="container">
<div class="keg">
<span class="handle"></span>
<span class="pipe"></span>
</div>
<div class="glass">
<span class="beer"></span>
</div>
</div>
登录后复制
居中显示：
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
background: linear-gradient(
lightslategray 300px,
#333 300px
);
}登录后复制
定义容器尺寸和伪元素的共有属性：
.container {
width: 700px;
height: 300px;
position: relative;
}
.container *::before,
.container *::after {
content: '';
position: absolute;
}登录后复制
画出酒桶：
.keg {
position: absolute;
width: 90px;
height: 200px;
background: linear-gradient(
to right,
#777 70px,
#555 70px
);
bottom: 0;
left: 310px;
}登录后复制
画出出水管和它的支架：
.keg .pipe {
position: absolute;
width: 10px;
height: 40px;
background-color: #ccc;
top: 33px;
left: 10px;
}
.keg .pipe::before {
width: 40px;
height: 20px;
background:
radial-gradient(
circle at 10px 10px,
#eee 7px,
#ccc 7px, #ccc 10px,
transparent 10px
),
linear-gradient(
#ccc 50%,
#999 50%
);
border-radius: 10px;
top: -2px;
left: -5px;
}登录后复制
画出把手：
.keg .handle {
position: absolute;
border-style: solid;
border-width: 50px 10px 0 10px;
border-color: black transparent transparent transparent;
top: -10px;
left: 5px;
}
.keg .handle::before {
width: 20px;
height: 10px;
background-color: #ccc;
top: -60px;
left: -10px;
border-radius: 5px 5px 0 0;
}
.keg .handle::after {
width: 10px;
height: 20px;
background-color: #ccc;
top: -20px;
left: -5px;
}登录后复制
画出酒杯：
.glass {
position: absolute;
width: 70px;
height: 100px;
color: rgba(255, 255, 255, 0.3);
background-color: currentColor;
bottom: 0;
left: 300px;
border-radius: 5px;
}
.glass::before {
width: 50px;
height: 40px;
border: 10px solid;
top: 20px;
right: -20px;
border-radius: 0 40% 40% 0;
clip-path: inset(0 0 0 72%);
}登录后复制
画出杯中的啤酒和泡沫：
.beer {
position: absolute;
width: 60px;
height: 80px;
background-color: rgba(255, 206, 84, 0.8);
bottom: 15px;
left: 5px;
border-radius: 0 0 5px 5px;
border-top: solid rgba(255, 206, 84, 0.8);
}
.beer::before {
width: inherit;
height: 15px;
background-color: #eee;
top: -15px;
border-radius: 5px 5px 0 0;
}登录后复制
接下来制作动画。
增加酒杯把手被压下的动画效果：
.keg .handle {
transform-origin: center 50px;
animation: handle 5s infinite;
}
@keyframes handle {
10%, 60% {
transform: rotate(0deg);
}
20%, 50% {
transform: rotate(-90deg);
}
}登录后复制
增加啤酒被斟满的动画效果：
.beer {
animation: fillup 5s infinite;
}
@keyframes fillup {
0%, 20% {
height: 0px;
border-width: 0px;
}
40% {
height: 40px;
}
80%, 100% {
height: 80px;
border-width: 5px;
}
}登录后复制
增加啤酒泡沫泛起的动画效果：
.beer::before {
animation:
wave 0.5s infinite alternate,
fillup-foam 5s linear infinite;
}
@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);
}
}登录后复制
增加啤酒从出水口流出的效果：
.keg .pipe::after {
width: 10px;
background-color: rgba(255, 206, 84, 0.5);
animation: flow 5s infinite;
}
@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;
}
}登录后复制
最后，增加酒杯滑动的效果：
.glass {
animation: slide 5s ease infinite;
}
@keyframes slide {
0% {
left: 0;
filter: opacity(0);
}
20%, 80% {
left: 300px;
filter: opacity(1);
}
100% {
left: 600px;
filter: opacity(0);
}
}登录后复制
大功告成！
相关推荐：
如何使用纯CSS实现一个沙漏的动画效果
如何使用CSS和D3实现一组彩灯（附代码）以上是如何用纯CSS实现接扎啤的特效（附源码）的详细内容。更多信息请关注PHP中文网其他相关文章！
