怎么用純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實現接扎啤的特效”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!