如何用纯CSS实现接扎啤的特效

1、如何用纯css实现接扎啤的特效源代码下载代码解读定义dom，容器中包含一个表示酒桶的.keg元素和表示啤酒杯的.glass元素。酒桶有2个子元素，.handle表示把手，.pipe表示出水管，酒杯有1个表示啤酒的子元素.beer：居中显示：bodymargin:0;height:100vh;display:flex;justify-content:center;background:linear-gradient(lightslategray300px,333300px);定义容器尺寸和伪元素的共有属性：.containerwidth:700px;height:300px;position:r

2、elative;.container*:before,.container*:aftercontent:&39;&39;position:absolute;画出酒桶：.kegposition:absolute;width:90px;height:200px;background:linear-gradient(toright,77770px,55570px);bottom:0;left:310px;画出出水管和它的支架：.keg.pipeposition:absolute;width:10px;height:40px;background-color:ccc;top:33px;

3、left:10px;.keg.pipe:beforewidth:40px;height:20px;background:radial-gradient(circleat10px10px,eee7px,ccc7px,ccc10px,transparent10px),linear-gradient(ccc50%,99950%);border-radius:10px;top:-2px;left:-5px;画出把手：.keg.handleposition:absolute;border-style:solid;border-width:50px10px010px;border-color:blackt

4、ransparenttransparenttransparent;top:-10px;left:5px;.keg.handle:beforewidth:20px;height:10px;background-color:ccc;top:-60px;left:-10px;border-radius:5px5px00;.keg.handle:afterwidth:10px;height:20px;background-color:ccc;top:-20px;left:-5px;画出酒杯：.glassposition:absolute;width:70px;height:100px;color:rg

5、ba(255,255,255,0.3);background-color:currentcolor;bottom:0;left:300px;border-radius:5px;.glass:beforewidth:50px;height:40px;border:10pxsolid;top:20px;right:-20px;border-radius:040%40%0;clip-path:inset(00072%);画出杯中的啤酒和泡沫：.beerposition:absolute;width:60px;height:80px;background-color:rgba(255,206,84,0

6、.8);bottom:15px;left:5px;border-radius:005px5px;border-top:solidrgba(255,206,84,0.8);.beer:beforewidth:inherit;height:15px;background-color:eee;top:-15px;border-radius:5px5px00;接下来制作动画。增强酒杯把手被压下的动画效果：.keg.handletransform-origin:center50px;animation:handle5sinfinite;keyframeshandle10%,60%transform:ro

7、tate(0deg);20%,50%transform:rotate(-90deg);增强啤酒被斟满的动画效果：.beeranimation:fillup5sinfinite;keyframesfillup0%,20%height:0px;border-width:0px;40%height:40px;80%,100%height:80px;border-width:5px;增强啤酒泡沫泛起的动画效果：.beer:beforeanimation:wave0.5sinfinitealternate,fillup-foam5slinearinfinite;keyframesfillup-foam0

8、%,20%top:0;height:0;60%,100%top:-15px;height:15px;keyframeswavefromtransform:skewy(-3deg);totransform:skewy(3deg);增强啤酒从出水口流出的效果：.keg.pipe:afterwidth:10px;background-color:rgba(255,206,84,0.5);animation:flow5sinfinite;keyframesflow0%,15%top:40px;height:0;20%height:115px;40%height:75px;55%top:40px;height:50px;60%,100%top:80px;height:0;最后，增强酒杯滑动的效果：.glassanimation:slide5seaseinfinite;ke