温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用纯CSS实现接扎啤的特效

发布时间:2022-02-28 15:31:21 来源:亿速云 阅读:143 作者:小新 栏目:web开发

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI