這篇文章帶給大家的內容是關於如何用純CSS實現接紮啤酒的特效（附源碼） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
https://github.com/comehope/front-end-daily -challenges
定義dom，容器中包含一個表示酒桶的.keg 元素和表示啤酒杯的.glass 元素。酒桶有2 個子元素，.handle 表示把手，.pipe 表示出水管，酒杯有1 個表示啤酒的子元素.beer：
<div> <div> <span></span> <span></span> </div> <div> <span></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和D3實作一組彩燈（附程式碼）以上是如何用純CSS實現接紮啤酒的特效（附源碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
