css实现雪狐行走动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现雪狐行走动画效果代码

代码标签： css 雪狐

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        .fox {
          width: 470px;
          height: 335px;
          min-width: 470px;
          min-height: 335px;
        }
        .fox * {
          position: absolute;
        }
        .fox:after {
          content: '';
          display: block;
          position: absolute;
          width: 80%;
          height: 20px;
          border-radius: 100%;
          background: rgba(0, 0, 0, 0.2);
          bottom: -10px;
          left: 10%;
          z-index: -1;
        }
        
        @-webkit-keyframes log {
          from, to {
            transform: rotate(-30deg);
          }
          50% {
            transform: rotate(25deg);
          }
        }
        
        @keyframes log {
          from, to {
            transform: rotate(-30deg);
          }
          50% {
            transform: rotate(25deg);
          }
        }
        @-webkit-keyframes log-inner {
          from, to {
            transform: rotate(15deg);
          }
          50% {
            transform: rotate(-15deg);
          }
        }
        @keyframes log-inner {
          from, to {
            transform: rotate(15deg);
          }
          50% {
            transform: rotate(-15deg);
          }
        }
        @-webkit-keyframes hind-log {
          from, to {
            transform: rotate(-20deg);
          }
          50% {
            transform: rotate(15deg);
          }
        }
        @keyframes hind-log {
          from, to {
            transform: rotate(-20deg);
          }
          50% {
            transform: rotate(15deg);
          }
        }
        @-webkit-keyframes hind-log-inner {
          from, to {
            transform: rotate(50deg);
          }
          50% {
            transform: rotate(30deg);
          }
        }
        @keyframes hind-log-inner {
          from, to {
            transform: rotate(50deg);
          }
          50% {
            transform: rotate(30deg);
          }
        }
        .leg-outer {
          bottom: 0;
          right: 127px;
          -webkit-animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          z-index: 1;
        }
        @-webkit-keyframes leg-outer {
          0%, 100% {
            transform: translateX(0);
          }
          50% {
            transform: translateX(-76px);
          }
        }
        @keyframes leg-outer {
          0%, 100% {
            transform: translateX(0);
          }
          50% {
            transform: translateX(-76px);
          }
        }
        .hind-leg-outer {
          bottom: 0;
          right: 263px;
          -webkit-animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          -webkit-animation-delay: -0.225s;
                  animation-delay: -0.225s;
          z-index: 1;
        }
        
        .leg {
          bottom: 0;
          -webkit-animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
        }
        @-webkit-keyframes leg {
          75% {
            transform: translateY(-20px);
          }
          from, 40%, to {
            transform: translateY(0);
          }
        }
        @keyframes leg {
          75% {
            transform: translateY(-20px);
          }
          from, 40%, to {
            transform: translateY(0);
          }
        }
        .hind-leg-outer2 {
          bottom: 0;
          -webkit-animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          -webkit-animation-delay: -0.225s;
                  animation-delay: -0.225s;
        }
        
        .paw, .hind-paw {
          bottom: 100%;
          width: 10px;
          height: 12px;
          transform-origin: bottom center;
          border-radius: 5px;
          background: #000;
        }
        .paw:after, .hind-paw:after {
          -webkit-animation: paw 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: paw 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          content: '';
          position: absolute;
          display: block;
          left: 0;
          bottom: 0;
          height: 100%;
          width: 200%;
          background: #000;
          border-radius: 100px;
          transform-origin: 5px center;
        }
        @-webkit-keyframes paw {
          10%, to {
            transform: rotate(10deg);
          }
          20%, 40% {
            transform: rotate(10deg);
          }
          70% {
            transform: rotate(120deg);
          }
        }
        @keyframes paw {
          10%, to {
            transform: rotate(10deg);
          }
          20%, 40% {
            transform: rotate(10deg);
          }
          70% {
            transform: rotate(120deg);
          }
        }
        .hind-paw {
          -webkit-animation-delay: -0.225s;
                  animation-delay: -0.225s;
        }
        
        .log, .hind-log {
          bottom: calc(100% - 5px);
          width: 10px;
          height: 44px;
          transform-origin: bottom center;
          transform: rotate(5deg);
          background: black;
          border-bottom-right-radius: 50% 100%;
          border-top-right-radius: 5px;
          border-top-left-radius: 5px;
        }
        .log:after, .hind-log:after {
          content: '';
          display: block;
          position: absolute;
          height: 100%;
          width: 75%;
          right: 0;
          background: black;
          transform-origin: right bottom;
          transform: rotate(9deg);
          border-top-right-radius: 8px;
        }
        
        .log {
          -webkit-animation: log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
        }
        
        .hind-log {
          -webkit-animation: hind-log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: hind-log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          -webkit-animation-delay: -0.225s;
                  animation-delay: -0.225s;
        }
        
        .log-inner, .hind-log-inner {
          z-index: 1;
        }
        
        .log-inner {
          bottom: calc(100% - 8px);
          width: 15px;
          height: 65px;
          transform-origin: bottom center;
          -webkit-animation: log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
                  animation: log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          background-color: #E2DEE8;
          background-image: linear-gradient(to top, #000000, #000000 10px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0));
          border-bottom-right-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        .leg-outer + .leg-outer .log-inner, .leg-outer + .leg-outer .log-inner:after {
          background-color: #C7C3D0;
        }
        .leg-outer + .leg-outer .log-inner:before {
          background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #c7c3d0);
        }
        .log-inner:before, .log-inner:after {
          content: '';
          display: block;
          position: absolute;
        }
        .log-inner:before {
          right: 100%;
          background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8);
          height: 90%;
          bottom: 0;
          width: 240%;
          border-top-left-radius: 100%;
        }
   .........完整代码请登录后点击上方下载按钮下载查看