怎么用纯CSS实现徘徊的果冻怪兽
更新:HHH   时间:2023-1-7


小编给大家分享一下怎么用纯CSS实现徘徊的果冻怪兽,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

  代码解读

  定义dom,容器中包含2个元素,分别代表怪兽的身体和眼睛:

  <pclass="monster">

  <spanclass="body"></span>

  <spanclass="eyes"></span>

  </p>

  设置背景色:

  body{

  margin:0;

  height:100vh;

  background-color:black;

  }

  设置前景色:

  .monster{

  width:100vw;

  height:50vh;

  background-color:lightcyan;

  }

  画出怪兽的身体:

  .monster{

  position:relative;

  }

  .body{

  position:absolute;

  width:32vmin;

  height:32vmin;

  background-color:teal;

  border-radius:43%40%43%40%;

  bottom:calc(-1*32vmin/2-4vmin);

  }

  定义怪兽眼睛所在的容器:

  .eyes{

  width:24vmin;

  height:5vmin;

  position:absolute;

  bottom:2vmin;

  left:calc(32vmin-24vmin-2vmin);

  }

  用伪元素画出怪兽的眼睛:

  .eyes::before,

  .eyes::after{

  content:'';

  position:absolute;

  width:5vmin;

  height:5vmin;

  border:1.25vminsolidwhite;

  box-sizing:border-box;

  border-radius:50%;

  }

  .eyes::before{

  left:4vmin;

  }

  .eyes::after{

  right:4vmin;

  }

  为怪兽定义轻轻跳起的动画,结合后面的动画效果,让它具有果冻的弹性:

  .body{

  animation:

  bounce1sinfinitealternate;

  }

  @keyframesbounce{

  to{

  bottom:calc(-1*32vmin/2-2vmin);

  }

  }

  让怪兽的身体转动起来:

  @keyframeswave{

  to{

  transform:rotate(360deg);

  }

  }

  让怪兽徘徊行走:

  .monster{

  overflow:hidden;

  }

  .body{

  left:-2vmin;

  animation:

  wander5slinearinfinitealternate,

  wave3slinearinfinite,

  bounce1sinfinitealternate;

  }

  .eyes{

  animation:wander5slinearinfinitealternate;

  }

  @keyframeswander{

  to{

  left:calc(100%-32vmin+2vmin);

  }

  }

  最后,让怪兽的眼睛眨一眨:

  .eyes::before,

  .eyes::after{

  animation:blink3sinfinitelinear;

  }

  @keyframesblink{

  4%,10%,34%,40%{

  transform:scaleY(1);

  }

  7%,37%{

  transform:scaleY(0);

  }

  }

看完了这篇文章,相信你对“怎么用纯CSS实现徘徊的果冻怪兽”有了一定的了解,如果想了解更多相关知识,欢迎关注天达云行业资讯频道,感谢各位的阅读!

返回web开发教程...