十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决
这篇文章主要介绍了怎么用纯CSS实现接扎啤的特效，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,成都网站建设、网站设计,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为上千服务,成都创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!
代码解读
定义dom，容器中包含一个表示酒桶的.keg元素和表示啤酒杯的.glass元素。酒桶有2个子元素，.handle表示把手，.pipe表示出水管，酒杯有1个表示啤酒的子元素.beer：
居中显示：
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实现接扎啤的特效”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!