使用CSS如何loading吃豆人的效果，方法是什么？

发布时间：2023-08-22 14:51:11 所属栏目：语言来源：

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

HTML布局

这篇文章给大家分享一个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);

      }

    }

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!