源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

　　定义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);

 

　　}

 

　　}







本文转载自中文网