css实现雪狐行走动画效果代码
代码语言：html
所属分类：动画
代码描述：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%;
}
.log-inner:after {
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background-color: #E2DEE8;
transform-origin: bottom right;
transform: rotate(15deg);
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 5px;
background-image: linear-gradient(-15deg, #000000, #000000 9.5px, rgba(0, 0, 0, 0) 9.5px, rgba(0, 0, 0, 0));
}
.hind-log-inner {
bottom: calc(100% - 7px);
width: 15px;
left: -1px;
height: 80px;
transform-origin: bottom center;
-webkit-animation: hind-log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: hind-log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
background-color: #E2DEE8;
background-image: linear-gradient(to top, #000000, #000000 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0));
}
.hind-log-inner:before, .hind-log-inner:after {
content: '';
display: block;
position: absolute;
}
.hind-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%;
}
.hind-log-inner:after {
left: 100%;
left: 100%;
height: 100%;
width: 34px;
background-color: #E2DEE8;
border-bottom-right-radius: 100% 100%;
transform-origin: bottom left;
transform: skewY(-38deg);
background-image: linear-gradient(38deg, #000000, #000000 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0));
}
.hind-leg-outer + .hind-leg-outer .hind-log-inner:before {
background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #c7c3d0);
}
.leg-outer + .leg-outer {
z-index: 0;
}
.leg-outer + .leg-outer, .leg-outer + .leg-outer *, .leg-outer + .leg-outer *:after {
-webkit-animation-delay: -0.45s !important;
animation-delay: -0.45s !important;
}
.hind-paw:after {
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
}
.hind-leg-outer + .hind-leg-outer {
z-index: 0;
}
.hind-leg-outer + .hind-leg-outer, .hind-leg-outer + .hind-leg-outer *, .hind-leg-outer + .hind-leg-outer *:after {
-webkit-animation-delay: -0.675s;
animation-delay: -0.675s;
}
.hind-leg-outer + .hind-leg-outer .hind-log-inner, .hind-leg-outer + .hind-leg-outer .hind-log-inner:after {
background-color: #C7C3D0;
}
.body {
top: 50%;
left: 170px;
height: 90px;
width: 173px;
background: #E2DEE8;
border-top-left-radius: 25% 50%;
border-bottom-left-radius: 25% 50%;
border-bottom-right-radius: 25% 50%;
transform-origin: right center;
-webkit-animation: body 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: body 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-duration: 0.45s;
animation-duration: 0.45s;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
}
@-webkit-keyframes body {
from, to {
transform: rotate(-1deg);
}
50% {
transform: rotate(1deg);
}
}
@keyframes body {
from, to {
transform: rotate(-1deg);
}
50% {
transform: rotate(1deg);
}
}
.body:before {
content: '';
display: block;
position: absolute;
height: 50px;
width: 50px;
background: #E2DEE8;
z-index: 1;
border-top-right-radius: 10px;
right: 3px;
top: -3px;
transform: rotate(15deg);
}
.head {
position: absolute;
height: 87px;
width: 112px;
bottom: 89%;
left: 65%;
border-top-left-radius: 40% 60%;
border-top-right-radius: 60% 20%;
background: #E2DEE8;
-webkit-animation: head 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: head 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-duration: 0.45s;
animation-duration: 0.45s;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: center bottom;
z-index: 0;
transform-style: preserve-3d;
}
@-webkit-keyframes head {
from, to {
transform: rotate(0);
}
50% {
transform: translateY(2px) rotate(-2deg);
}
}
@keyframes head {
from, to {
transform: rotate(0);
}
50% {
transform: translateY(2px) rotate(-2deg);
}
}
.head:before, .head:after {
content: '';
display: block;
position: absolute;
}
.head:before {
width: 15px;
height: 15px;
right: 100%;
bottom: 9px;
background-image: radial-gradient(ellipse farthest-side at top left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8 99.1%);
}
.head:after {
width: 50px;
height: 40px;
top: calc(100% - 1px);
left: 50%;
background-image: radial-gradient(ellipse farthest-side at bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #f0e9ec 99.1%);
}
.face {
width: 84px;
height: 72px;
bottom: 0;
right: 5px;
background: #F0E9EC;
border-top-left-radius: 60% 100%;
border-top-right-radius: 40% 10%;
z-index: 2;
-webkit-animation: face 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: face 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes face {
from, to {
transform: translateX(0);
}
50% {
transform: translateX(-2px);
}
}
@keyframes face {
from, to {
transform: translateX(0);
}
50% {
transform: translateX(-2px);
}
}
.face:before, .face:after {
content: '';
display: block;
position: absolute;
background: black;
-webkit-animation: eye 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: eye 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes eye {
from, to {
transform: rotate(-12deg);
}
50% {
transform: translateX(-2px) rotate(-12deg);
}
}
@keyframes eye {
from, to {
transform: rotate(-12deg);
}
50% {
transform: translateX(-2px) rotate(-12deg);
}
}
.face:before {
height: 4px;
width: 25px;
border-radius: 2px;
top: 13px;
right: 10px;
}
.face:after {
height: 10px;
width: 10px;
border-radius: 50%;
top: 23px;
right: 15px;
}
.snout {
width: 36px;
height: 24px;
left: calc(100% - 5px);
bottom: 0;
border-bottom-right-radius: 100%;
background-color: #F0E9EC;
background-image: radial-gradient(circle 6px at top right, #000000, #000000 99%, rgba(0, 0, 0, 0) 99%);
transform-origin: right;
-webkit-animation: snout 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: snout 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes snout {
from, to {
transform: scale(1);
}
50% {
transform: scaleX(1.05);
}
}
@keyframes snout {
from, to {
transform: scale(1);
}
50% {
transform: scaleX(1.05);
}
}
.snout:before, .snout:after {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 5px;
width: calc(100% - 5px);
height: 40px;
background-image: radial-gradient(ellipse farthest-side at top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8 99.1%);
}
.snout:before {
-webkit-animation: snout-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: snout-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes snout-outer {
50% {
transform: scaleX(0.93);
}
}
@keyframes snout-outer {
50% {
transform: scaleX(0.93);
}
}
.snout:after {
background-image: radial-gradient(ellipse farthest-side at top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #f0e9ec 99.1%);
left: 0;
}
.tail {
border-radius: 50%;
background: #E2DEE8;
width: 1rem;
height: 1rem;
}
.body > .tail {
height: 20;
width: 20;
left: 10px;
transform: rotate(58deg);
}
.body > .tail .tail {
right: 100%;
border-color: green;
z-index: -1;
}
.body > .tail > .tail {
height: 36px;
width: 36px;
top: -8px;
-webkit-animation: tail-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 10px);
transform: rotate(0);
}
@-webkit-keyframes tail-2 {
from, to {
transform: rotate(0);
}
50% {
transform: rotate(0);
}
}
@keyframes tail-2 {
from, to {
transform: rotate(0);
}
50% {
transform: rotate(0);
}
}
.body > .tail > .tail:before, .body > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 26.83282px;
display: block;
background: #E2DEE8;
}
.body > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-16.60156deg);
}
.body > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(16.60156deg);
}
.body > .tail > .tail2 > .tail {
height: 70px;
width: 70px;
top: -25px;
-webkit-animation: tail2-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail2-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 10px);
transform: rotate(-30deg);
}
@-webkit-keyframes tail2-2 {
from, to {
transform: rotate(-33deg);
}
50% {
transform: rotate(-30deg);
}
}
@keyframes tail2-2 {
from, to {
transform: rotate(-33deg);
}
50% {
transform: rotate(-30deg);
}
}
.body > .tail > .tail2 > .tail:before, .body > .tail > .tail2 > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 37.41657px;
display: block;
background: #E2DEE8;
}
.body > .tail > .tail2 > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-33.74902deg);
}
.body > .tail > .tail2 > .tail:before {
transform-origin: bottom left;
transform: rotate(33.74902deg);
}
.body > .tail > .tail > .tail {
height: 93px;
width: 93px;
top: -28.5px;
-webkit-animation: tail-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -0.225s;
animation-delay: -0.225s;
transform-origin: calc(100% + 18px);
transform: rotate(-24deg);
}
@-webkit-keyframes tail-3 {
from, to {
transform: rotate(-30deg);
}
50% {
transform: rotate(-24deg);
}
}
@keyframes tail-3 {
from, to {
transform: rotate(-30deg);
}
50% {
transform: rotate(-24deg);
}
}
.body > .tail > .tail > .tail:before, .body > .tail > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
height: 50%;
width: 57.8619px;
display: block;
background: #E2DEE8;
}
.body > .tail > .tail > .tail:after {
bottom: 0;
transform-origin: top left;
transform: rotate(-26.22267deg);
}
.body > .tail > .tail > .tail:before {
transform-origin: bottom left;
transform: rotate(26.22267deg);
}
.body > .tail > .tail2 > .tail > .tail {
height: 120px;
width: 120px;
top: -25px;
-webkit-animation: tail2-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
animation: tail2-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
-webkit-animation-delay: -425ms;
animation-delay: -425ms;
background: linear-gradient(45deg, #f0e9ec 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(135deg, #f0e9ec 25%, rgba(0, 0, 0, 0) 25%) 0 0, linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 66%, #f0e9ec 66%);
background-size: 40px 40px, 40px 40px, 100%;
background-position: center;
background-color: #E2DEE8;
background-repeat: repeat-y;
transform-origin: calc(100% + 35px);
transform: rotate(-30deg);
}
@-webkit-keyframes tail2-3 {
from, to {
transform: rotate(-35deg);
}
50% {
transform: rotate(-30deg);
}
}
@keyframes tail2-3 {
from, to {
transform: rotate(-35deg);
}
50% {
transform: rotate(-30deg);
}
}
.body > .tail > .tail2 > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail:after {
content: '';
left: 50%;
position: absolute;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0