怎么用纯CSS实现小球跳跃台阶的动画效果

发布时间:2022-02-28 14:18:17 作者:小新
来源:亿速云 阅读:138

这篇文章将为大家详细讲解有关怎么用纯CSS实现小球跳跃台阶的动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

  代码解读

  定义dom,容器中包含5个元素,代表5个台阶:

  <divclass="loader">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </div>

  居中显示:

  body{

  margin:0;

  height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  background-color:black;

  }

  定义容器尺寸:

  .loader{

  width:7em;

  height:5em;

  font-size:40px;

  }

  画出5个台阶:

  .loader{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  }

  .loaderspan{

  width:1em;

  height:1em;

  background-color:white;

  }

  用变量让5个台阶从低到高排序:

  .loaderspan{

  height:calc(var(--n)*1em);

  }

  .loaderspan:nth-child(1){

  --n:1;

  }

  .loaderspan:nth-child(2){

  --n:2;

  }

  .loaderspan:nth-child(3){

  --n:3;

  }

  .loaderspan:nth-child(4){

  --n:4;

  }

  .loaderspan:nth-child(5){

  --n:5;

  }

  为台阶增加转换排序方向的动画效果:

  .loaderspan{

  animation:sort5sinfinite;

  }

  @keyframessort{

  0%,40%,100%{

  height:calc(var(--n)*1em);

  }

  50%,90%{

  height:calc(5em-(var(--n)-1)*1em);

  }

  }

  下面做小球的动画,用了障眼法,使2个同色小球的交替运动看起来就像1个小球在做往复运动。

  用伪元素画出2个小球:

  .loader::before,

  .loader::after{

  content:'';

  position:absolute;

  width:1em;

  height:1em;

  background-color:white;

  border-radius:50%;

  bottom:1em;

  }

  .loader::before{

  left:0;

  }

  .loader::after{

  left:6em;

  }

  增加让小球向上运动的动画效果:

  .loader::before,

  .loader::after{

  animation:climbing5sinfinite;

  visibility:hidden;

  }

  .loader::after{

  animation-delay:2.5s;

  }

  @keyframesclimbing{

  0%{

  bottom:1em;

  visibility:visible;

  }

  10%{

  bottom:2em;

  }

  20%{

  bottom:3em;

  }

  30%{

  bottom:4em;

  }

  40%{

  bottom:5em;

  }

  50%{

  bottom:1em;

  }

  50%,100%{

  visibility:hidden;

  }

  }

  在向上运动的同时向两侧运动,形成上台阶的动画效果:

  .loader::before{

  --direction:1;

  }

  .loader::after{

  --direction:-1;

  }

  @keyframesclimbing{

  0%{

  bottom:1em;

  left:calc(3em-2*1.5em*var(--direction));

  visibility:visible;

  }

  10%{

  bottom:2em;

  left:calc(3em-1*1.5em*var(--direction));

  }

  20%{

  bottom:3em;

  left:calc(3em-0*1.5em*var(--direction));

  }

  30%{

  bottom:4em;

  left:calc(3em+1*1.5em*var(--direction));

  }

  40%{

  bottom:5em;

  left:calc(3em+2*1.5em*var(--direction));

  }

  50%{

  bottom:1em;

  left:calc(3em+2*1.5em*var(--direction));

  }

  50%,100%{

  visibility:hidden;

  }

  }

  最后,为上台阶的动作增加拟人效果:

  @keyframesclimbing{

  0%{

  bottom:1em;

  left:calc(3em-2*1.5em*var(--direction));

  visibility:visible;

  }

  7%{

  bottom:calc(2em+0.3em);

  }

  10%{

  bottom:2em;

  left:calc(3em-1*1.5em*var(--direction));

  }

  17%{

  bottom:calc(3em+0.3em);

  }

  20%{

  bottom:3em;

  left:calc(3em-0*1.5em*var(--direction));

  }

  27%{

  bottom:calc(4em+0.3em);

  }

  30%{

  bottom:4em;

  left:calc(3em+1*1.5em*var(--direction));

  }

  37%{

  bottom:calc(5em+0.3em);

  }

  40%{

  bottom:5em;

  left:calc(3em+2*1.5em*var(--direction));

  }

  50%{

  bottom:1em;

  left:calc(3em+2*1.5em*var(--direction));

  }

  50%,100%{

  visibility:hidden;

  }

  }

关于“怎么用纯CSS实现小球跳跃台阶的动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. 纯CSS动画打造~会动的小球
  2. 使用纯CSS实现在容器中反弹小球的方法

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

css

上一篇:怎么使用纯CSS实现锡纸撕开的文字效果

下一篇:​CSS3怎么实现字体抗锯齿渲染效果

相关阅读

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

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