怎么用纯CSS实现接扎啤的特效
这篇文章主要介绍了怎么用纯CSS实现接扎啤的特效，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
代码解读
定义dom，容器中包含一个表示酒桶的.keg元素和表示啤酒杯的.glass元素。酒桶有2个子元素，.handle表示把手，.pipe表示出水管，酒杯有1个表示啤酒的子元素.beer：
<divclass="container">
<divclass="keg">
<spanclass="handle"></span>
<spanclass="pipe"></span>
</div>
<divclass="glass">
<spanclass="beer"></span>
</div>
</div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
background:linear-gradient(
lightslategray300px,
#333300px
);
}
定义容器尺寸和伪元素的共有属性：
.container{
width:700px;
height:300px;
position:relative;
}
.container*::before,
.container*::after{
content:'';
position:absolute;
}
画出酒桶：
.keg{
position:absolute;
width:90px;
height:200px;
background:linear-gradient(
toright,
#77770px,
#55570px
);
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(
circleat10px10px,
#eee7px,
#ccc7px,#ccc10px,
transparent10px
),
linear-gradient(
#ccc50%,
#99950%
);
border-radius:10px;
top:-2px;
left:-5px;
}
画出把手：
.keg.handle{
position:absolute;
border-style:solid;
border-width:50px10px010px;
border-color:blacktransparenttransparenttransparent;
top:-10px;
left:5px;
}
.keg.handle::before{
width:20px;
height:10px;
background-color:#ccc;
top:-60px;
left:-10px;
border-radius:5px5px00;
}
.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:10pxsolid;
top:20px;
right:-20px;
border-radius:040%40%0;
clip-path:inset(00072%);
}
画出杯中的啤酒和泡沫：
.beer{
position:absolute;
width:60px;
height:80px;
background-color:rgba(255,206,84,0.8);
bottom:15px;
left:5px;
border-radius:005px5px;
border-top:solidrgba(255,206,84,0.8);
}
.beer::before{
width:inherit;
height:15px;
background-color:#eee;
top:-15px;
border-radius:5px5px00;
}
接下来制作动画。
增加酒杯把手被压下的动画效果：
.keg.handle{
transform-origin:center50px;
animation:handle5sinfinite;
}
@keyframeshandle{
10%,60%{
transform:rotate(0deg);
}
20%,50%{
transform:rotate(-90deg);
}
}
增加啤酒被斟满的动画效果：
.beer{
animation:fillup5sinfinite;
}
@keyframesfillup{
0%,20%{
height:0px;
border-width:0px;
}
40%{
height:40px;
}
80%,100%{
height:80px;
border-width:5px;
}
}
增加啤酒泡沫泛起的动画效果：
.beer::before{
animation:
wave0.5sinfinitealternate,
fillup-foam5slinearinfinite;
}
@keyframesfillup-foam{
0%,20%{
top:0;
height:0;
}
60%,100%{
top:-15px;
height:15px;
}
}
@keyframeswave{
from{
transform:skewY(-3deg);
}
to{
transform:skewY(3deg);
}
}
增加啤酒从出水口流出的效果：
.keg.pipe::after{
width:10px;
background-color:rgba(255,206,84,0.5);
animation:flow5sinfinite;
}
@keyframesflow{
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:slide5seaseinfinite;
}
@keyframesslide{
0%{
left:0;
filter:opacity(0);
}
20%,80%{
left:300px;
filter:opacity(1);
}
100%{
left:600px;
filter:opacity(0);
}
}
感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用纯CSS实现接扎啤的特效”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
