怎么用纯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实现接扎啤的特效”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!