div+css布局实现3d美女跑步动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css布局实现3d美女跑步动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
width: 100vw; height: 100vh;
margin: 0;
background: #FF8F8F;
overflow: hidden;
}
.scene {
width: 100vw; height: 100vh;
font-size: 1vmin;
--t: .7s;
--animation: var(--t) linear infinite;
--skin: #f1eae2;
--hair: #f4e27f;
--clothes: #508D69;
--socks: #FFB6D9;
--noise10: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg"><filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB"><feTurbulence type="turbulence" baseFrequency="1 1" numOctaves="10" seed="10" stitchTiles="stitch" result="turbulence"/><feDisplacementMap in="SourceGraphic" in2="displacementMap" scale="1.5" xChannelSelector="A" yChannelSelector="A" x="0%" y="0%" width="100%" height="100%" result="displacementMap2"/></filter></svg>#filter');
filter: var(--noise10)
}
.scene::before, .scene::after, .scene *, .scene *::before, .scene *::after {
content: '';
position: absolute;
display: block;
transform-style: preserve-3d;
}
.scene::before {
top: 50%; left: 50%;
width: 300em; height: 300em;
background: radial-gradient(#ffc1c1 20%, #FF8F8F 60%);
border-radius: 50%;
filter: blur(10em);
transform: translate(-50%, calc(-50% + 49em)) rotateX(80deg);
}
.dummy-wrapper {
top: calc(50% + -2em); left: 50%;
rotate: y 0deg;
animation: wrapper 3s ease-in-out infinite;
}
@keyframes wrapper {
from { rotate: y -30deg; }
to { rotate: y 330deg; }
}
.dummy {
top: 0; left: 0;
transform-origin: center center;
transform: translate(-.8vmin, 2vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-30deg);
animation: dummy var(--animation);
}
@keyframes dummy {
0%, 100% { /* 0 */ transform: translate(-.8vmin, 2vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-30deg); }
7.1% { /* 1 */ transform: translate(-.8vmin, 3vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-30deg); }
14.2% { /* 2 */ transform: translate(-.8vmin, 2.4vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-30deg); }
21.3% { /* 3 */ transform: translate(-0.8vmin, 1.1vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-36deg); }
28.4% { /* 4 */ transform: translate(-0.9vmin, -1vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-40deg); }
35.5% { /* 5 */ transform: translate(-1.1vmin, -2.2vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-43deg); }
42.6% { /* 6 */ transform: translate(-0.9vmin, -1.5vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-39deg); }
49.7% { /* 7 */ transform: translate(-0.7vmin, 2.1vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-27deg); }
56.8% { /* 8 */ transform: translate(-0.8vmin, 2.9vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-28deg); }
63.9% { /* 9 */ transform: translate(-1vmin, 2.3vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-31deg); }
71.0% { /* 10 */ transform: translate(-0.9vmin, 0.6vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-34deg); }
78.1% { /* 11 */ transform: translate(-0.9vmin, -1.4vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-37deg); }
85.2% { /* 12 */ transform: translate(-0.7vmin, -1.7vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-45deg); }
92.3% { /* 13 */ transform: translate(-1vmin, 0.4vmin) rotateX(90deg) rotateZ(-68deg) rotateX(-42deg); }
}
/* BELLY */
.dummy__belly {
top: 0; left: 0;
width: 9.5em; height: 8em;
transform-origin: center center;
translate: -50% -50%;
rotate: 21deg;
animation: dummy__belly var(--animation);
}
@keyframes dummy__belly {
0%, 100% { /* 0 */ rotate: 21deg; }
7.1% { /* 1 */ rotate: 19deg; }
14.2% { /* 2 */ rotate: 12deg; }
21.3% { /* 3 */ rotate: 12deg; }
28.4% { /* 4 */ rotate: 8deg; }
35.5% { /* 5 */ rotate: 3deg; }
42.6% { /* 6 */ rotate: 2deg; }
49.7% { /* 7 */ rotate: 5deg; }
56.8% { /* 8 */ rotate: 8deg; }
63.9% { /* 9 */ rotate: 11deg; }
71.0% { /* 10 */ rotate: 13deg; }
78.1% { /* 11 */ rotate: 13deg; }
85.2% { /* 12 */ rotate: 24deg; }
92.3% { /* 13 */ rotate: 26deg; }
}
.dummy__belly::before {
top: 0; left: 0;
width: 100%; height: 3.74em;
background: color-mix(in srgb, var(--skin) 68%, black);
clip-path: polygon(1.94em 0, 7.74em 0, 7.44em 3.74em, 2.14em 3.74em);
transform-origin: top left;
rotate: x 73deg;
}
.dummy__belly::after {
top: 0; left: 0;
width: 3.7em; height: 100%;
background: color-mix(in srgb, var(--skin) 85%, black);
clip-path: polygon(3.7em 6em, 0 5.6em, 0 2em, 3.7em 2.38em);
transform-origin: top left;
rotate: y -76deg;
}
.dummy__belly-1 {
width: 100%; height: 100%;
translate: 0 0 3.6em;
}
.dummy__belly-1::before {
top: 0; right: 0;
width: 3.7em; height: 100%;
background: color-mix(in srgb, var(--skin) 85%, black);
clip-path: polygon(0 5.7em, 3.7em 5.2em, 3.7em 2em, 0 2.6em);
transform-origin: right center;
translate: 0 0 -3.6em;
rotate: y 76deg;
}
.dummy__belly-1::after {
bottom: 0; left: 0;
width: 100%; height: 3.6em;
background: var(--skin);
clip-path: polygon(2.5em 3.6em, 7em 3.6em, 6.9em 0, 2.6em 0);
transform-origin: bottom left;
rotate: x -84deg;
translate: 0 0 -3.6em;
}
.dummy__belly-2 {
top: 100%; left: 2.5em;
width: 4.5em; height: 3.7em;
background: color-mix(in srgb, var(--skin) 90%, black);
clip-path: polygon(0 0, 0.15em 3.6em, 2.55em 3.6em, 3.47em 0);
transform-origin: top left;
transform: rotateX(90deg) rotateY(-136deg) rotateX(-5.3deg);
}
.dummy__belly-3 {
top: 100%; left: 7em;
width: 3.8em; height: 3.7em;
background: color-mix(in srgb, var(--skin) 90%, black);
clip-path: polygon(0 0, 0.21em 3.6em, 2.78em 3.6em, 3.76em 0);
transform-origin: top left;
transform: rotateX(90deg) rotateY(-48.3deg) rotateX(5.4deg);
}
.dummy__belly-4 {
top: 0; left: 1.95em;
width: 3.8em; height: 3.7em;
background: color-mix(in srgb, var(--skin) 75%, black);
clip-path: polygon(2.8em 0, 2.44em 3.7em, 0.65em 3.7em, 0 0);
transform-origin: top left;
transform: rotateX(90deg) rotateY(-225.7deg) rotateX(14.2deg);
}
.dummy__belly-5 {
top: 0; left: 7.75em;
width: 2.7em; height: 3.7em;
background: color-mix(in srgb, var(--skin) 75%, black);
clip-path: polygon(2.67em 0, 2.53em 3.7em, 0.61em 3.7em, 0 0);
transform-origin: top left;
transform: rotateX(90deg) rotateY(48.7deg) rotateX(-15deg);
}
/* TORSO */
.dummy__torso {
top: 1.1em; left: 0.9em;
width: 7.7em; height: 6.5em;
transform-origin: center center;
translate: 0 0 3.57em;
rotate: 8deg;
animation: dummy__torso var(--animation);
}
@keyframes dummy__torso {
0%, 100% { /* 0 */ rotate: 8deg; }
7.1% { /* 1 */ rotate: 5deg; }
14.2% { /* 2 */ rotate: 1deg; }
21.3% { /* 3 */ rotate: 1deg; }
28.4% { /* 4 */ rotate: -4deg; }
35.5% { /* 5 */ rotate: -5deg; }
42.6% { /* 6 */ rotate: -3deg; }
49.7% { /* 7 */ rotate: -6deg; }
56.8% { /* 8 */ rotate: -5deg; }
63.9% { /* 9 */ rotate: -3deg; }
71.0% { /* 10 */ rotate: 1deg; }
78.1% { /* 11 */ rotate: 3deg; }
85.2% { /* 12 */ rotate: 12deg; }
92.3% { /* 13 */ rotate: 14deg; }
}
.dummy__torso-1 {
top: 0; left: -1em;
width: 10em; height: 4em;
background: linear-gradient(88deg, transparent 40%, color-mix(in srgb, var(--clothes) 63%, black) 0 75%, transparent 0), linear-gradient(-88deg, transparent 40%, color-mix(in srgb, var(--clothes) 63%, black) 0 77%, transparent 0);
transform-origin: top left;
rotate: x 91deg;
}
.dummy__torso-1 > div {
top: 100%; left: -1.2em;
width: 12.1em; height: 7.2em;
background: color-mix(in srgb, var(--clothes) 63%, black);
background: linear-gradient(-87deg, transparent 40%, color-mix(in srgb, var(--clothes) 63%, black) 0 72.5%, transparent 0), linear-gradient(87deg, transparent 40%, color-mix(in srgb, var(--clothes) 63%, black) 0 73.7%, transparent 0);
transform-origin: top left;
rotate: x 5deg;
}
.dummy__torso-1 > div > div {
top: 100%; left: 0;
width: 100%; height: 2.75em;
background: color-mix(in srgb, var(--clothes) 63%, black);
clip-path: polygon(3em 0em, 9.2em 0em, 9.65em 2em, 7.7em 2.75em, 3.6em 2.75em, 2em 1.85em);
transform-origin: top left;
rotate: x -18deg;
}
.dummy__torso-2 {
top: 100%; left: -0.4em;
width: 8.5em; height: 2.1em;
background: linear-gradient(-90deg, transparent 25%, var(--clothes) 0 75%, transparent 0);
transform-origin: top left;
rotate: x 91deg;
}
.dummy__torso-2 > div {
top: 100%; left: -1.2em;
width: 11em; height: 4.2em;
background: conic-gradient(from 150deg at 50% 40%, var(--clothes) 50deg, transparent 0), linear-gradient(-80deg, transparent 50%, var(--clothes) 0 71.8%, transparent 0), linear-gradient(80deg, transparent 50%, var(--clothes) 0 70.7%, transparent 0);
transform-origin: top left;
rotate: x -28deg;
}
.dummy__torso-2 > div > div {
top: 100%; left: -0.8em;
width: 12.3em; height: 4.2em;
background: linear-gradient(-100deg, transparent 40%, var(--clothes) 0 68.5%, transparent 0), linear-gradient(100deg, transparent 40%, var(--clothes) 0 69.8%, transparent 0);
transform-origin: top left;
rotate: x 50deg;
}
.dummy__torso-2 > div > div > div {
top: 100%; left: 0.6em;
width: 11.5em; height: 4.9em;
background: linear-gradient(-94deg, transparent 40%, var(--clothes) 0 67.7%, transparent 0), linear-gradient(96deg, transparent 40%, var(--clothes) 0 65%, transparent 0);
transform-origin: top left;
rotate: x 6deg;
}
.dummy__torso-3 {
top: 0; left: 0;
width: 2.1em; height: 6.6em;
background: linear-gradient(7deg, transparent 40%, color-mix(in srgb, var(--clothes) 85%, black) 0 72.5%, transparent 0), linear-gradient(-189deg, transparent 40%, color-mix(in srgb, var(--clothes) 85%, black) 0 70.6%, transparent 0);
transform-origin: top left;
rotate: y -99deg;
}
.dummy__torso-3 > div {
top: -0.5em; left: 100%;
width: 5.9em; height: 8.86em;
background: conic-gradient(from -136deg at 80% 50%, color-mix(in srgb, var(--clothes) 85%, black) 50deg, transparent 0) 100% 0 / 35% 100% no-repeat, linear-gradient(-220deg, transparent 32%, color-mix(in srgb, var(--cl.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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