CSS loading效果之 吃豆人

emmm 名字瞎想的2333

前言

這是一個用來練習的css demo，若是有哪裏寫的很差，還請各位指正，必定虛心接受。嘻嘻

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

---

總體如上所示，若是有看不懂的也歡迎直接回復...
目前持續更新中 https://github.com/ajycc20/ea... ，歡迎大佬們提出意見！！！ 以及，有個star會更好啊 （ hhhh 逃