CSS3动画——快看，这有一只荡秋千的坤，哦不，是鸡

懒羊羊大王呀

于 2024-08-29 23:56:51 发布

阅读量464

点赞数 15

分类专栏： css3 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/m0_73777400/article/details/141690995

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS3 加载动画——“坤哥”荡秋千

使用 svg 实现的 “坤哥”荡秋千的加载动画效果，演示视频如下：

坤哥荡秋千

欢迎关注“前端小工坊”公众号获取更多知识：
在这里插入图片描述

源代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>坤哥荡秋千</title>
  <style>
    /* 引入字体 */
    @import url(https://fonts.bunny.net/css?family=lemon:400);

    *,
    *:before {
      box-sizing: border-box
    }

    @supports (-ms-accelerator:true) {
      body:before {
        position: fixed;
        left: 0;
        right: 0;
        display: block;
        color: #985538;
        background: #fff;
        content: "抱歉，IE/Edge目前不支持SVG动画转换";
        font: normal 120%/1.5 sans-serif;
      }
    }

    html,
    body {
      font: normal 100%/1.5 cursive, serif;
      height: 100%vh;
      margin: 0;
      text-align: center;
      background: #DFBD99;
      transform: scale(85%);
      overflow: hidden;
    }

    .center {
      height: 100%;
    }

    .center:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .centered {
      display: inline-block;
      vertical-align: middle;
      width: 33%;
      min-width: 300px
    }


    .chicken {
      fill: #985538
    }

    .swing {
      fill: #f5f5f5
    }

    #swinging {
      transform-origin: top center;
      animation: swingme 2s ease-in-out 0s infinite;
    }

    @keyframes swingme {

      0%,
      100% {
        transform: rotate(10deg);
      }

      50% {
        transform: rotate(-10deg);
      }
    }

    #shadow {
      fill: #333;
      fill-opacity: .1;
      animation: shadow 2s ease-in-out 0s infinite;
    }

    @keyframes shadow {

      0%,
      100% {
        transform: translateX(-2em);
      }

      50% {
        transform: translateX(2em);
      }
    }

    #loading {
      font-family: 'Lemon', Chalk board, cursive, serif;
      font-size: 40px;
      font-weight: bold;
      font-style: italic;
      fill: #985538;
      color: #985538;
    }
  </style>
</head>

<body>
  <div class="center">

    <svg class="centered translateno" viewBox="0 0 346 512" version="1.1" role="img">
      <title>坤哥荡秋千</title>
      <desc>快看,这有一只荡秋千的坤，哦不，是鸡</desc>
      <g id="swinging">
        <path id="body" class="chicken"
          d="M 184.9 401.6 C 184.9 401.6 187 399.4 189.3 400.3 C 191.5 401.2 193.9 401.6 193.9 401.6 C 193.9 401.6 192.4 397.1 189.3 396.7 C 186.1 396.2 186.1 398.6 184.4 396.8 C 183.3 395.7 182.4 390.8 181.9 386.8 L 184.3 385.7 L 185.8 382.1 C 228.6 386.3 214.4 334.6 214.4 334.6 L 205.8 330.6 C 203.3 335.8 200.9 341.7 200.5 342.7 C 200 343.9 164.3 357.8 157.9 346.9 C 152.5 337.6 144.8 334.6 144.8 334.6 C 144.8 334.6 141.1 351.2 148.6 365.7 C 156 380.3 172.8 380.8 172.8 380.8 L 176.6 389.4 L 178.1 388.6 L 180.3 397.8 L 175.9 398 L 174.1 401.6 L 178.9 400.7 L 184.9 401.6 Z" />
        <path id="head" class="chicken"
          d="M 214.4 335.6 C 214.4 335.6 219.2 337.5 219.1 333 L 224.2 331.2 L 218.2 328.7 L 218.1 328.8 C 216.8 325.2 215.3 323.8 213.6 323.3 C 213.9 322.8 214.1 322.3 214.2 321.6 C 214.9 317.7 213.2 316.4 211.6 317 C 210.1 317.5 210.3 321.1 209.1 319.1 C 207.9 317 208.5 315.7 206.7 316 C 204.7 316.3 204.8 320.4 204.8 320.4 C 204.8 320.4 204.8 316.8 201.4 317.4 C 198 317.9 204.4 321.6 202 321.2 C 199.6 320.8 198.5 323.3 199.8 324.3 L 203.7 326 C 201.3 331.1 205.8 334.1 207.4 335.1 C 208.5 335.9 214.4 335.6 214.4 335.6 Z" />
        <path id="swing" class="swing"
          d="M 173 383.6 L 173 384 L 182.5 402 L 162.5 402 L 172 384 L 172 383.9 C 172.2 383.8 172.5 383.7 172.7 383.7 L 173 383.6 ZM 187.4 402 L 175.8 381.9 C 176.7 381 177.2 379.9 176.9 379 C 176.7 378.1 176 377.5 175 377.2 L 175 8 L 170 8 L 170 377.8 C 168 378.8 166.7 380.5 167.1 382 C 167.2 382.6 167.6 383.1 168.3 383.5 L 157.6 402 L 148 402 L 148 409 L 197 409 L 197 402 L 187.4 402 Z" />
      </g>
      <g id="shadow">
        <path id="shadow"
          d="M 145 497.5 C 145 495 157.8 493 173.5 493 C 189.2 493 202 495 202 497.5 C 202 500 189.2 502 173.5 502 C 157.8 502 145 500 145 497.5 Z" />
      </g>
      <g id="frame">
        <path
          d="M 173 2 C 159.2 2 148.3 8.7 142.2 20.1 L 142 20 L 141.7 21.1 C 139.8 24.9 137.6 29 137.2 33.3 L 0.1 512 L 9 512 L 141.5 48 L 205 48 L 337.1 512 L 346 512 L 208.8 32.8 C 208.3 28.8 206.2 25.1 204.6 21.6 L 204.1 20 L 203.8 20.1 C 197.7 8.7 186.8 2 173 2 ZM 173 10.2 C 183.8 10.2 192.1 15.3 196.7 24.2 L 200.7 34.8 C 200.8 35.5 200.8 37 200.8 37 L 145.2 37 C 145.2 37 145.2 35.8 145.2 35.2 L 149.5 23.8 C 154.2 15.1 162.4 10.2 173 10.2 Z"
          class="swing" />
      </g>
      <text id="loading" x="67" y="465" width="220">
        <tspan>
          <![CDATA[Loading…]]>
        </tspan>
      </text>
    </svg>

  </div>
</body>

</html>