单个div+css实现摇头电风扇动画效果代码-html代码-BFW代码库

单个div+css实现摇头电风扇动画效果代码

代码语言：html

代码描述：单个div+css实现摇头电风扇动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          display: grid;
          place-items: center;
          height: 100vh;
          background: radial-gradient(circle at top, rgba(255, 255, 255, 0.0001) 400px, #665b37) 50% 100%/100% calc(50% - 100px) no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0.0001) calc(50% + 100px), #988752 calc(50% + 100px), #b9ab7d), linear-gradient(to top, rgba(255, 255, 255, 0.0001) calc(50% - 100px), rgba(0, 0, 0, 0.25) calc(50% - 100px), rgba(255, 255, 255, 0.0001) calc(50% + 100px)), radial-gradient(ellipse at 50% calc(50% + 100px), #f06864, #7c0f0c);
        }
        body div {
          width: 250px;
          height: 250px;
          border-radius: 100%;
          background: linear-gradient(to right, rgba(255, 255, 255, 0.0001) calc(50% - 1px), #efefef calc(50% - 1px), #efefef calc(50% + 1px), rgba(255, 255, 255, 0.0001) calc(50% + 1px)) 50% 50%/215px 215px no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0.0001) calc(50% - 1px), #efefef calc(50% - 1px), #efefef calc(50% + 1px), rgba(255, 255, 255, 0.0001) calc(50% + 1px)) 50% 50%/140px 140px no-repeat, radial-gradient(circle at center, rgba(255, 255, 255, 0.0001) 43px, #efefef 43px, #ccc 45px, rgba(255, 255, 255, 0.0001) 45px, rgba(255, 255, 255, 0.0001) 70px, #efefef 70px, #ccc 72px, rgba(255, 255, 255, 0.0001) 72px, rgba(255, 255, 255, 0.0001) 100px), radial-gradient(circle at center, #ccc, #fff 100px, #a4e2e2 100px, #a4e2e2 110px, #7dd6d6 110px);
          position: relative;
          transform-style: preserve-3d;
          transform-origin: 50% 150% -100px;
          -webkit-animation: turn 5s ease-in-out infinite alternate;
                  animation: turn 5s ease-in-out infinite alternate;
        }
        @-webkit-keyframes turn {
          from {
            transform: translateY(-100px) rotateY(-20deg);
            box-shadow: 20px 0 0 #a4e2e2, 30px 30px 40px -30px #cbeeee, 60px 30px 0 -30px #91dcdc;
          }
          to {
            transform: translateY(-100px) rotateY(20deg);
            box-shadow: -20px 0 0 #a4e2e2, -30px 30px 40px -30px #cbeeee, -60px 30px 0 -30px #91dcdc;
          }
        }
        @keyframes turn {
          from {
            transform: translateY(-100px) rotateY(-20deg);
            box-shadow: 20px 0 0 #a4e2e2, 30px 30px 40px -30px #cbeeee, 60px 30px 0 -30px #91dcdc;
          }
          to {
            transform: translateY(-100px) rotateY(20deg);
            box-shadow: -20px 0 0 #a4e2e2, -30px 30px 40px -30px #cbeeee, -60px 30px 0 -30px #91dcdc;
          }
        }
        body div:before, body div:after {
          transform-style: preserve-3d;
          content: "";
          position: absolute;
        }
        body div: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, #7dd6d6 12.5px, rgba(255, 255, 255, 0.0001) 15px) 50% 290px/40px 40px no-repeat, linear-gradient(to right, rgba(255, 255, 255, 0.0001) calc(50% - 12.5px), #ccc calc(50% - 12.5px), #efefef, #ccc calc(50% + 12.5px), rgba(255, 255, 255, 0.0001) calc(50% + 15px)) 100% 50%/100% 200px no-repeat, radial-gradient(ellipse at bottom, #def4f4, #a4e2e2 50%, rgba(255, 255, 255, 0.0001) 50%) 50% calc(100% - 60px)/120px 100px no-repeat, radial-gradient(ellipse at center, #def4f4, #a4e2e2 50%, r.........完整代码请登录后点击上方下载按钮下载查看