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

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

代码语言：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 {
.........完整代码请登录后点击上方下载按钮下载查看