一只加载中的小飞猪_css3 拖尾动画-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73777400/article/details/141232230
一只加载中的小飞猪

基于 SVG 的加载中的小飞猪，带有彩虹拖尾，动画效果十足，全部动画使用 CSS3 实现，算是对本人博客前面的内容的强化，个人认为还是很锻炼动手能力的，源代码可以参见本人上传的资源。效果如下图（拖尾末端在浏览器运行是清晰的，只不过这里视频的压缩有问题，不太清晰）：
一只加载中的小飞猪
源代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入字体 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
  <title>加载中的小飞猪</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      /*
      这里的宽高不能使用100%，因为 body 会继承 html 的宽高，
      但是html的宽高是由内容撑起来的
      */
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgb(10, 9, 22) radial-gradient(circle at center, rgb(21, 19, 51) 0%, rgb(10, 9, 22) 80%) no-repeat;
      /* background: #fff; */
      fonT: 0.9em "Press Start 2P";
      color: #fff;
      overflow: hidden;
    }

    /* 容器 */
    .loader-container {
      width: 100%;
      height: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .loader-state {
      width: 100%;

    }

    /* 设置字体 */
    .loader-text {
      user-select: none;
      opacity: 0;
      transform: translate(10px, calc(20px*1.5));
      animation: loader-text-blink 0.4s ease-in-out infinite alternate;
    }

    /* 在屏幕宽度不够时隐藏字体 */
    @media screen and (max-width:350px) {
      .loader-text {
        display: none;
      }
    }

    /* 设置文字闪动特效 */
    @keyframes loader-text-blink {
      to {
        opacity: 1;
      }
    }

    /* 设置主体的动作 */
    svg {
      position: relative;
      width: 100%;
      max-width: 400px;
      mask-image: linear-gradient(to left, #0a0916 65%, transparent 85%);
      animation: moves-like-japper 0.4s ease-in-out infinite alternate;
    }

    /* 设置整体浮动动画 */
    @keyframes moves-like-japper {
      to {
        transform: translateY(20px);
      }
    }

    /* 设置彩虹的颜色 */
    .rainbow rect {
      width: 5px;
      height: 6px;
      stroke: transparent;
      fill: url(#rainbow-colors)
    }

    /* 设置彩虹跳动动画 */
    .rainbow rect:nth-child(1) {
      transform: translate(25px, 8.4px);
      animation: over-the-rainbow 0.4s ease-in-out 0.666666666666s infinite alternate;
    }

    @keyframes over-the-rainbow {
      to {
        transform: translate(25px, 9.0666666667px);
      }
    }

    .rainbow rect:nth-child(2) {
      transform: translate(20.2px, 8.3px);
      animation: over-the-rainbow-2 0.4s ease-in-out 0.13333333333333s infinite alternate;
    }


    @keyframes over-the-rainbow-2 {
      to {
        transform: translate(20.2px, 9.6333333333px);
      }
    }

    .rainbow rect:nth-child(3) {
      transform: translate(15.4px, 8.2px);
      animation: over-the-rainbow-3 0.4s ease-in-out 0.2s infinite alternate;
    }

    @keyframes over-the-rainbow-3 {
      to {
        transform: translate(15.4px, 10.2px);
      }
    }

    .rainbow rect:nth-child(4) {
      transform: translate(10.6px, 8.1px);
      animation: over-the-rainbow-4 0.4s ease-in-out 0.2666666667s infinite alternate;
    }

    @keyframes over-the-rainbow-4 {
      to {
        transform: translate(10.6px, 10.7666666667px);
      }
    }

    .rainbow rect:nth-child(5) {
      transform: translate(5.8px, 8px);
      animation: over-the-rainbow-5 0.4s ease-in-out 0.3333333333s infinite alternate;
    }

    @keyframes over-the-rainbow-5 {
      to {
        transform: translate(5.8px, 11.3333333333px);
      }
    }

    .rainbow rect:nth-child(6) {
      transform: translate(1px, 7.9px);
      animation: over-the-rainbow-6 0.4s ease-in-out 0.4s infinite alternate;
    }

    @keyframes over-the-rainbow-6 {
      to {
        transform: translate(1px, 11.9px);
      }
    }

    /* 定义颜色变量 */
    svg {
      --body1: #f19183;
      --body2: #fcd8d7;
      --stains: #fac4b8;
      --eyes: #0c0b0b;
      --ears: #f19183;
      --snout1: #f79197;
      --snout2: #f66b79;
      --snout-holes: #e73b36;
    }

    /* 为小猪上色 */
    .pig {
      position: relative;
      transform: translateX(-29px);
    }

    .body2 {
      fill: var(--body2);
    }

    .pig:hover {
      cursor: pointer;
    }

    .pig .body1,
    .tail,
    .foot {
      fill: var(--body1)
    }

    .stains {
      fill: var(--stains)
    }

    .snout {
      stroke: transparent;
      transform: translate(52px);
      animation: sniff-sniff 2s ease-in-out infinite;
    }

    .snout {
      stroke: transparent;
      transform: translate(52px);
      animation: sniff-sniff 2s ease-in-out infinite;
    }

    .snout .snout1 {
      fill: var(--snout1);
    }

    .snout .snout2 {
      fill: var(--snout2);
    }

    .snout .snout-holes {
      fill: var(--snout-holes);
    }

    /* 猪猪鼻子动画 */
    @keyframes sniff-sniff {

      0%,
      5%,
      15%,
      25% {
        transform: translate(52px);
      }

      10%,
      20% {
        transform: translate(52.5px);
      }
    }

    .tail {
      transform: translate(52.25px);
      transform-origin: center;
    }

    .tail rect:nth-child(2) {
      transform: translate(3.25px, 10.5px);
      animation: fairy-tail 0.4s ease-in-out infinite alternate;
    }

    @keyframes fairy-tail {
      to {
        transform: translate(3.25px, 10px);
      }
    }

    .foot {
      transform: translate(52px);
      animation: hypnotic-feet 0.4s ease-in-out infinite alternate;
    }

    @keyframes hypnotic-feet {
      to {
        transform: translate(52.5px);
      }
    }

    .ears {
      fill: var(--ears);
    }

    .eyes {
      transform: translate(52px);
    }

    .eyes {
      fill: var(--eyes);
      animation: blinky-blinky 2s step-start infinite;
    }

    /* 猪猪眨眼bulingbuling */
    @keyframes blinky-blinky {
      5% {
        opacity: 1;
      }

      10% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <main class="loader-container">
    <div class="loader-state">
      <!-- 设置viewBox是控制放大比例 -->
      <svg viewBox="0 0 45 22.5">
        <defs>
          <!-- 设置彩虹的颜色开始 -->
          <linearGradient id="rainbow-colors" x1="50%" y1="0%" x2="50%" y2="100%">
            <stop offset="0" stop-color="#e12523" />
            <stop offset="0.1667" stop-color="#e12523" />
            <stop offset="0.1667" stop-color="#dc8d30" />
            <stop offset="0.3334" stop-color="#dc8d30" />
            <stop offset="0.3334" stop-color="#deeb44" />
            <stop offset="0.5" stop-color="#deeb44" />
            <stop offset="0.5" stop-color="#01eb3e" />
            <stop offset="0.6667" stop-color="#01eb3e" />
            <stop offset="0.6667" stop-color="#138fe9" />
            <stop offset="0.8334" stop-color="#138fe9" />
            <stop offset="0.8334" stop-color="#7127ee" />
            <stop offset="1" stop-color="#7127ee" />
          </linearGradient>
        </defs>
        <!-- 设置彩虹颜色结束 -->

        <!-- 设置彩虹拖尾开始 -->
        <g class="rainbow">
          <rect></rect>
          <rect></rect>
          <rect></rect>
          <rect></rect>
          <rect></rect>
          <rect></rect>
        </g>
        <!-- 设置彩虹拖尾结束 -->

        <!-- 猪猪开始 -->
        <g class=" pig">
          <!-- 脚开始 -->
          <g class="foot" transform="translate(52)">
            <rect width="1" height="3" transform="translate(6 13)" />
            <rect width="1" height="3" transform="translate(8 13)" />
            <rect width="1" height="3" transform="translate(14 13)" />
            <rect width="1" height="3" transform="translate(12 13)" />
          </g>
          <!-- 脚结束 -->

          <!-- 尾巴开始 -->
          <g class="tail">
            <rect width="1" height="1" transform="translate(4 10)" />
            <rect width="1" height="1" transform="translate(3 11)" />
          </g>
          <!-- 尾巴结束 -->

          <!-- 身体 -->
          <g transform="translate(52)">
            <rect class="body1" width="8" height="8" transform="translate(7 6)" />
            <rect class="body1" width="10" height="8" transform="translate(6 7)" />
            <rect class="body1" width="12" height="6" transform="translate(5 8)" />
            <rect class="body2" width="10" height="6" transform="translate(6 8)" />
            <rect class="body2" width="8" height="6" transform="translate(7 7)" />
            <rect class="stains" width="4" height="1" transform="translate(7 13)" />
            <rect class="stains" width="2" height="1" transform="translate(8 12)" />
            <rect class="stains" width="2" height="1" transform="translate(6 9)" />
            <rect class="stains" width="3" height="1" transform="translate(6 8)" />
            <rect class="stains" width="3" height="1" transform="translate(7 7)" />
            <rect class="stains" width="1" height="1" transform="translate(14 7)" />
          </g>
          <!-- 身体结束 -->

          <!-- 耳朵开始 -->
          <g class="ears" transform="translate(52)">
            <rect width="1" height="3" transform="translate(10 5)" />
            <rect width="1" height="3" transform="translate(15 5)" />
          </g>
          <!-- 耳朵结束 -->

          <!-- 鼻子开始 -->
          <g class="snout">
            <rect class="snout1" width="5" height="3" transform="translate(13 10)" />
            <rect class="snout-holes" width="1" height="3" transform="translate(17 11) rotate(90)" />
            <rect class="snout2" width="1" height="1" transform="translate(16 11) rotate(90)" />
          </g>
          <!-- 鼻子结束 -->

          <!-- 眼睛开始 -->
          <g class="eyes">
            <rect width="1" height="1" transform="translate(12 9)" />
            <rect width="1" height="1" transform="translate(15 9)" />
          </g>
          <!-- 眼睛结束 -->
        </g>
        <!-- 猪猪结束 -->
      </svg>
    </div>
    <!-- 设置文字开始 -->
    <span class="loader-text">LOADING...</span>
    <!-- 设置文字结束 -->
  </main>
</body>

</html>