这篇文章给大家分享一个loading动画示例，是一个吃豆人的效果。小编觉得挺有趣的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

    HTML布局

  <div class="container">
    <div class="loading">
      <div class="eat"></div>
      <div class="load"></div>
      <div class="load"></div>
      <div class="load"></div>
    </div>
  </div>

    CSS 样式

主要使用了动画效果，通过不断控制元素的角度位置实现一个类似于吃豆人一样的loading demo。

    body {
      margin: 0;
      padding: 0;
      background: #fff;
    }
    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .loading {
      position: relative;
      width: 200px;
      height: 50px;
      display: flex;
    }
    .eat {
      position: relative;
      width: 50px;
      height: 50px;
      left: 0;
      color: #ff0000;
      animation: eat-animate 2.4s ease-in-out infinite;
    }
    @keyframes eat-animate {
      100% {
        left: 150px;
      }
    }
    .eat::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      width: 50px;
      height: 25px;
      top: 0;
      border-radius: 50px 50px 0 0;
      background: currentColor;
      transform: rotate(-30deg);
      animation: eat-top 2.4s ease-in-out infinite;
    }
    @keyframes eat-top {
      20% {
        transform: rotate(-30deg);
      }
      35% {
        transform: rotate(0deg);
      }
      45% {
        transform: rotate(-30deg);
      }
      60% {
        transform: rotate(0deg);
      }
      70% {
        transform: rotate(-30deg);
      }
      85% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
    .eat::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      width: 50px;
      height: 25px;
      bottom: 0;
      border-radius: 0 0 50px 50px;
      background: currentColor;
      transform: rotate(30deg);
      animation: eat-bottom 2.4s ease-in-out infinite;
    }
    @keyframes eat-bottom {
      20% {
        transform: rotate(30deg);
      }
      35% {
        transform: rotate(0deg);
      }
      45% {
        transform: rotate(30deg);
      }
      60% {
        transform: rotate(0deg);
      }
      70% {
        transform: rotate(30deg);
      }
      85% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
    .load {
      position: relative;
      width:30px;
      height: 30px;
      margin: 10px;
      color: #e47272;
      border-radius: 50%;
      background: currentColor;
    }
    .load:nth-child(2) {
      animation: load1 2.4s linear infinite;
      transform: scale(1);
    }
    @keyframes load1 {
      35% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }
    .load:nth-child(3) {
      animation: load2 2.4s linear infinite;
      transform: scale(1);
    }
    @keyframes load2 {
      30% {
        transform: scale(1);
      }
      58% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }
    .load:nth-child(4) {
      animation: load3 2.4s linear infinite;
      transform: scale(1);
    }
    @keyframes load3 {
      60% {
        transform: scale(1);
      }
      80% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }

    Preview

    以上就是CSS实现loading吃豆人效果的方法介绍啦，上述示例有一定的参考价值，需要的朋友可以了解看看，希望大家阅读完这篇文章能有所收获。最后，想要了解更多loading动画的实现，大家可以关注群英网络其它相关文章。

文本转载自脚本之家

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

猜你喜欢

• CSS3怎样写一个弹跳球动画效果，有哪些事项要注意的

  这篇文章主要介绍了CSS3 创建网页动画实现弹跳球动效果,需要的朋友可以参考下

• 在CSS中背景图全显示的方法是什么，要注意什么

  在css中，可以利用“background-size”属性把背景图片显示完全，该属性用于规定背景图像的尺寸，只需要给元素添加“background-size:100% 100%;”样式即可把背景图片显示完全。

• CSS中实现基本的导航切换效果怎么做，代码是什么

  本文通过实例代码给大家介绍了css实现导航切换效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

• 用CSS怎样实现进度条？一文教你三种效果

  今天给大家分享的是用CSS实现进度条的内容，本文给大家介绍了三种效果的进度条，分别是长形的，带有五个圆的线形和圆形的进度条，效果图如下，前两种实现比较简单的，这篇主要介绍圆形进度条的实现。感兴趣的朋友接下来跟随小编一起看看吧看吧。

• 用CSS实现判断鼠标进入方向的思路和方法是什么

  这篇文章主要介绍了基于CSS 判断鼠标进入的方向的实现代码，代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧