CSS中loading效果之吃豆人的实现方法

这篇文章主要介绍CSS中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效果之吃豆人的实现方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！