一个div+css实现奔跑的兔子动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：一个div+css实现奔跑的兔子动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          background: linear-gradient(to bottom, #ccc, #737373) 50% 50%/100% 50% no-repeat, linear-gradient(25deg, rgba(255, 255, 255, 0.0001) calc(50% - 100px), #f7797d 50%), linear-gradient(to bottom, rgba(255, 255, 255, 0.0001) calc(50% + 50px), #f7797d calc(50% + 50px)), repeating-linear-gradient(to right, #f7797d 10px, rgba(255, 255, 255, 0.0001) 15px, rgba(255, 255, 255, 0.0001) 30px, #f7797d 35px, #f7797d 50px) 0px 50%, repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 2px, #f7797d 2px, #f7797d 10px, rgba(255, 255, 255, 0.25) 10px, rgba(255, 255, 255, 0.25) 12px), #f7797d;
          display: grid;
          place-content: center;
          height: 100vh;
          -webkit-animation: speed 0.25s linear infinite, zoom 3s ease-in-out infinite alternate, blur 3s ease-in-out infinite alternate;
                  animation: speed 0.25s linear infinite, zoom 3s ease-in-out infinite alternate, blur 3s ease-in-out infinite alternate;
          overflow: hidden;
        }
        body:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 50%;
          top: calc(50% + 110px);
          -webkit-backdrop-filter: blur(4px) invert(1);
                  backdrop-filter: blur(4px) invert(1);
          z-index: 4;
        }
        @-webkit-keyframes speed {
          from {
            background-position: 50% calc(100% + 50px), 50% 50%, 50% 50%, 0px 50%, 50% 50%;
          }
          to {
            background-position: 50% calc(100% + 50px), 50% 50%, 50% 50%, -120px 50%, 50% 50%;
          }
        }
        @keyframes speed {
          from {
            background-position: 50% calc(100% + 50px), 50% 50%, 50% 50%, 0px 50%, 50% 50%;
          }
          to {
            background-position: 50% calc(100% + 50px), 50% 50%, 50% 50%, -120px 50%, 50% 50%;
          }
        }
        @-webkit-keyframes zoom {
          0% {
            transform: scale(1) translate(0px, -20px);
          }
          40% {
            transform: scale(0.85) translate(50px, -20px);
          }
          50% {
            transform: scale(1.15) translate(50px, -30px);
          }
          100% {
            transform: scale(1.15) translate(50px, -30px);
          }
        }
        @keyframes zoom {
          0% {
            transform: scale(1) translate(0px, -20px);
          }
          40% {
            transform: scale(0.85) translate(50px, -20px);
          }
          50% {
            transform: scale(1.15) translate(50px, -30px);
          }
          100% {
            transform: scale(1.15) translate(50px, -30px);
          }
        }
        @-webkit-keyframes blur {
          40% {
            filter: blur(0px);
          }
          45% {
            filter: blur(6px);
          }
          50% {
            filter: blur(0px);
          }
          100% {
            filter: blur(0px);
          }
        }
        @keyframes blur {
          40% {
            filter: blur(0px);
          }
          45% {
            filter: blur(6px);
          }
          50% {
            filter: blur(0px);
          }
          100% {
            filter: blur(0px);
          }
        }
        body > div {
          z-index: 3;
          width: 300px;
          height: 300px;
          box-sizing: border-box;
          -webkit-box-reflect: below -50px linear-gradient(rgba(0, 0, 0, 0.015), rgba(0, 0, 0, 0.05));
          background: radial-gradient(circle at center, #666 3px, rgba(255, 255, 255, 0.0001) 2px) calc(50% + 95px) calc(50% - 35px), radial-gradient(circle at bottom, #fff 35px, rgba(255, 255, 255, 0.0001) 35px) 75px -180px, radial-gradient(ellipse at top, #fff 35px, rgba(255, 255, 255, 0.0001) 35px) 150px 120px/150px 24px, radial-gradient(circle at bottom, #fff 75px, rgba(255, 255, 255, 0.0001) 75px) -25px -150px, radial-gradient(ellipse at top, #fff 75px, rgba(255, 255, 255, 0.0001) 75px) 50px 150px/150px 25px, radial-gradient(circle at center, #fff 40px, rgba(255, 255, 255, 0.0001) 40px) -60px 15px/100%, radial-gradient(ellipse at center, #fff 20px, rgba(255, 255, 255, 0.0001) 20px) -50px -10px/150% 120%, radial-gradient(ellipse at bottom left, #fff 35px, rgba(255, 255, 255, 0.0001) 15px) calc(50% + 120px) calc(50% - 0px)/200px 100px, radial-gradient(circle at center, #fff 8px, rgba(255, 255, 255, 0.0001) 8px) calc(50% + 20px) calc(50% + 40px), radial-gradient(circle at center, #fff 8px, rgba(255, 255, 255, 0.0001) 8px) calc(50% + 48px) calc(50% + 50px.........完整代码请登录后点击上方下载按钮下载查看