这篇文章给大家分享一个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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 在CSS中左浮动换行不正常的情况怎么处理

  这篇文章主要介绍了css float left布局换行不正常问题的解决的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• 网页中的0.5px的细线怎么实现，CSS3代码如何写

  这篇文章主要介绍了使用css3做0.5px的细线的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• XHTML中框架标签使用是怎样的

  XHTML是可扩展超文本标记语言，被广泛运用到程序当中，而学习XHTML语言也不是件容易的事情。下面的时间就跟随小编来了解下“框架标签使用”内容吧！

• css3怎样实现彩虹按钮的样式？

  这篇文章给大家分享css3制作按钮的内容，我们知道按钮的样式有很多，本文分享的是实现彩虹按钮的样式的实例，实现效果及代码如下，接下来跟随小编来了解看看吧。

• CSS中层叠上下文怎样使用？特性有哪些？

  这篇文章主要给大家分享关于CSS中层叠上下文的内容，本文对层叠上下文的概念、特性及使用都有详细的介绍，感兴趣的朋友可以参考，接下来跟随小编来学习一下吧。