纯CSS电风扇动画

            
            $t: rgba(255, 255, 255, 0.0001);
$b: #a4e2e2;
$br: #b9ab7d;
$r: #f06864;

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: radial-gradient(circle at top, $t 400px, darken($br, 30%)) 50%
      100% / 100% calc(50% - 100px) no-repeat,
    linear-gradient(
      to bottom,
      $t calc(50% + 100px),
      darken($br, 15%) calc(50% + 100px),
      $br
    ),
    linear-gradient(
      to top,
      $t calc(50% - 100px),
      rgba(0, 0, 0, 0.25) calc(50% - 100px),
      $t calc(50% + 100px)
    ),
    radial-gradient(ellipse at 50% calc(50% + 100px), $r, darken($r, 40%));
  div {
    width: 250px;
    height: 250px;
    border-radius: 100%;
    background: linear-gradient(
          to right,
          $t calc(50% - 1px),
          #efefef calc(50% - 1px),
          #efefef calc(50% + 1px),
          $t calc(50% + 1px)
        )
        50% 50% / 215px 215px no-repeat,
      linear-gradient(
          to bottom,
          $t calc(50% - 1px),
          #efefef calc(50% - 1px),
          #efefef calc(50% + 1px),
          $t calc(50% + 1px)
        )
        50% 50% / 140px 140px no-repeat,
      radial-gradient(
        circle at center,
        $t 43px,
        #efefef 43px,
        #ccc 45px,
        $t 45px,
        $t 70px,
        #efefef 70px,
        #ccc 72px,
        $t 72px,
        $t 100px
      ),
      radial-gradient(
        circle at center,
        #ccc,
        #fff 100px,
        $b 100px,
        $b 110px,
        darken($b, 10%) 110px
      );
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 150% -100px;
    animation: turn 5s ease-in-out infinite alternate;
    @keyframes turn {
      from {
        transform: translateY(-100px) rotateY(-20deg);
        box-shadow: 20px 0 0 $b, 30px 30px 40px -30px lighten($b, 10%),
          60px 30px 0 -30px darken($b, 5%);
      }
      to {
        transform: translateY(-100px) rotateY(20deg);
        box-shadow: -20px 0 0 $b, -30px 30px 40px -30px lighten($b, 10%),
          -60px 30px 0 -30px darken($b, 5%);
      }
    }
    &:before,
    &:after {
      transform-style: preserve-3d;
      content: "";
      position: absolute;
    }
    &:after {
      transform-origin: 50% 100% 20px;
      width: 100%;
      height: 400px;
      top: 0;
      background: radial-gradient(
            circle at top,
            #efefef,
            #ccc 11.5px,
            #999 11.5px,
            darken($b, 10%) 12.5px,
            $t 15px
          )
          50% 290px / 40px 40px no-repeat,
        linear-gradient(
            to right,
            $t calc(50% - 12.5px),
            #ccc calc(50% - 12.5px),
            #efefef,
            #ccc calc(50% + 12.5px),
            $t calc(50% + 15px)
          )
          100% 50% / 100% 200px no-repeat,
        radial-gradient(ellipse at bottom, lighten($b, 15%), $b 50%, $t 50%) 50%
          calc(100% - 60px) / 120px 100px no-repeat,
        radial-gradient(ellipse at center, lighten($b, 15%), $b 50%, $t 50%) 50%
          calc(100% - 30px) / 120px 60px no-repeat,
        radial-gradient(ellipse at center, darken($b, 10%) 65%, $t 50%) 50%
          340px / 250px 30px no-repeat,
        linear-gradient(to top, $b 30px, $t 20px) 50% calc(50% - 15px) /
          calc(100% - 20px) 100% no-repeat,
        radial-gradient(ellipse at center, $b 65%, $t 50%) 50% 370px / 250px
          30px no-repeat;
      animation: donotturn 5s ease-in-out infinite alternate;
      -webkit-box-reflect: below -30px linear-gradient(rgba(
              255,
              255,
              255,
              0.0001
            )
            50%, rgba(255, 255, 255, 0.25));
      @keyframes donotturn {
        from {
          transform: translateZ(-120px) rotateY(25deg);
        }
        to {
          transform: translateZ(-120px) rotateY(-25deg);
        }
      }
    }
    &:before {
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      background: radial-gradient(
          circle at center,
          $t 43px,
          #efefef 43px,
          #ccc 45px,
          $t 45px,
          $t 70px,
          #efefef 70px,
          #ccc 72px,
          $t 72px,
          $t 100px,
          #efefef 100px,
          #ccc 102px,
          $t 102px
        ),
        radial-gradient(circle at center, #ccc, #dfdfdf 25px, $t 20px),
        linear-gradient(
            95deg,
            $t calc(50% - 10px),
            #ccc calc(50% - 10px),
            #ccc calc(50% + 10px),
            $t calc(50% + 10px)
          )
          50% / 100% 75% no-repeat,
        linear-gradient(
            -95deg,
            $t calc(50% - 10px),
            #ccc calc(50% - 10px),
            #ccc calc(50% + 10px),
            $t calc(50% + 10px)
          )
          50% / 100% 75% no-repeat,
        linear-gradient(
            5deg,
            $t calc(50% - 10px),
            #ccc calc(50% - 10px),
            #ccc calc(50% + 10px),
            $t calc(50% + 10px)
          )
          50% / 75% 100% no-repeat,
        linear-gradient(
            -5deg,
            $t calc(50% - 10px),
            #ccc calc(50% - 10px),
            #ccc calc(50% + 10px),
            $t calc(50% + 10px)
          )
          50% / 75% 100% no-repeat,
        radial-gradient(circle at bottom, #ccc 20px, $t 20px) 50% 0px / 35px
          35px no-repeat,
        radial-gradient(circle at top, #ccc 20px, $t 20px) 50% 100% / 35px 35px
          no-repeat,
        radial-gradient(circle at right, #ccc 20px, $t 20px) 0% 50% / 35px 35px
          no-repeat,
        radial-gradient(circle at left, #ccc 20px, $t 20px) 100% 50% / 35px 35px
          no-repeat;
      animation: spin 0.5s linear infinite;
      @keyframes spin {
        from {
          transform: scale(0.9) translateZ(50px) rotate(0deg);
        }
        to {
          transform: scale(0.9) translateZ(50px) rotate(360deg);
        }
      }
    }
  }
}