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(--clothes) 85%, black) 0 43%, transparent 0) 100% 100% / 33% 60% no-repeat, linear-gradient(14deg, color-mix(in srgb, var(--clothes) 85%, black) 23.8%, transparent 0) 100% 0 / 68% 50% no-repeat, linear-gradient(19deg, color-mix(in srgb, var(--clothes) 85%, black) 40%, transparent 0) 0 0 / 34% 50% no-repeat, linear-gradient(200deg, transparent 6%, color-mix(in srgb, var(--clothes) 85%, black) 0 43.5%, transparent 0) 0 100% / 67.5% 60% no-repeat;
transform-origin: top left;
rotate: y -9deg;
}
.dummy__torso-3 > div > div {
top: -0.4em; left: 100%;
width: 4.9em; height: 8.4em;
background: linear-gradient(-23deg, transparent 49.4%, color-mix(in srgb, var(--clothes) 85%, black) 0 55%, transparent 0), linear-gradient(-203deg, transparent 43%, color-mix(in srgb, var(--clothes) 85%, black) 0 49%, transparent 0);
transform-origin: top left;
rotate: y 29deg;
}
.dummy__torso-3 > div > div > div {
top: 0.3em; left: 100%;
width: 2.9em; height: 5.8em;
background: var(--clothes);
clip-path: polygon(0em 1.7em, 1.24em 0em, 2.9em 0.35em, 2.9em 4.55em, 0em 2.95em);
transform-origin: top left;
rotate: y 52deg;
}
.dummy__torso-4 {
top: 0; left: 100%;
width: 2.1em; height: 6.6em;
background: linear-gradient(-351deg, transparent 40%, color-mix(in srgb, var(--clothes) 85%, black) 0 73.6%, transparent 0), linear-gradient(-190deg, transparent 40%, color-mix(in srgb, var(--clothes) 85%, black) 0 67%, transparent 0);
transform-origin: top left;
rotate: y -81deg;
}
.dummy__torso-4 > div {
top: -0.5em; left: 100%;
width: 5.9em; height: 8.86em;
background: conic-gradient(from 227deg at 100% 48.4%, color-mix(in srgb, var(--clothes) 85%, black) 57deg, transparent 0) 100% 0 / 33% 100% no-repeat, linear-gradient(9.5deg, transparent 55%, color-mix(in srgb, var(--clothes) 85%, black) 0 61.5%, transparent 0) 100% 0 / 65.5% 100% no-repeat, linear-gradient(18.5deg, transparent 45%, color-mix(in srgb, var(--clothes) 85%, black) 0 68.5%, transparent 0) 0 0 / 34.5% 100% no-repeat, linear-gradient(199deg, transparent 38%, color-mix(in srgb, var(--clothes) 85%, black) 0 60%, transparent 0) 0 0 / 67% 100% no-repeat;
transform-origin: top left;
rotate: y 9deg;
}
.dummy__torso-4 > div > div {
top: -0.4em; left: 100%;
width: 4.9em; height: 8.5em;
background: linear-gradient(-22.5deg, transparent 49.2%, color-mix(in srgb, var(--clothes) 85%, black) 0 53%, transparent 0) 0 0 / 41.7% 100% no-repeat, linear-gradient(-20.5deg, transparent 54.4%, color-mix(in srgb, var(--clothes) 85%, black) 0 58.7%, transparent 0) 0 0 / 72% 100% no-repeat, linear-gradient(-26deg, transparent 60.7%, color-mix(in srgb, var(--clothes) 85%, black) 0 62.4%, transparent 0) 100% 0 / 58% 100% no-repeat, linear-gradient(-18deg, transparent 67%, color-mix(in srgb, var(--clothes) 85%, black) 0 69%, transparent 0) 100% 0 / 28% 100% no-repeat;
transform-origin: top left;
rotate: y -29deg;
}
.dummy__torso-4 > div > div > div {
top: 0.3em; left: 100%;
width: 3.5em; height: 5.8em;
background: var(--clothes);
clip-path: polygon(0em 2.02em, 0em 2.2em, 3.85em 5.1em, 3.5em 0.25em, 1.65em 0.15em);
transform-origin: top left;
rotate: y -57.6deg;
}
.dummy__torso-5 {
top: 100%; left: 5.97em;
width: 3.2em; height: 2.1em;
background: linear-gradient(77deg, color-mix(in srgb, var(--clothes) 90%, black) 82.5%, transparent 0);
transform-origin: top left;
transform: rotateX(90deg) rotateY(-47deg) rotateX(0deg);
}
.dummy__torso-5 > div {
top: 100%; left: -0.88em;
width: 3.93em; height: 4.15em;
background: linear-gradient(282deg, transparent 40%, color-mix(in srgb, var(--clothes) 90%, black) 0 82%, transparent 0), linear-gradient(92deg, transparent 40%, color-mix(in srgb, var(--clothes) 90%, black) 0 96%, transparent 0);
transform-origin: top left;
rotate: x -25.7deg;
}
.dummy__torso-5 > div > div {
top: 100%; left: 0em;
width: 6.93em; height: 4.2em;
background: linear-gradient(81deg, transparent 40%, color-mix(in srgb, var(--clothes) 90%, black) 0 80%, transparent 0) 0 100% / 100% 53% no-repeat, linear-gradient(49.2deg, transparent 40%, color-mix(in srgb, var(--clothes) 90%, black) 0 63.5%, transparent 0) 0 0 / 100% 48% no-repeat, linear-gradient(-99.5deg, transparent 50%, color-mix(in srgb, var(--clothes) 90%, black) 0 91%, transparent 0);
transform-origin: top left;
rotate: x 49.1deg;
}
.dummy__torso-5 > div > div > div {
top: 100%; left: 0.6em;
width: 5.9em; height: 4.6em;
background: color-mix(in srgb, var(--clothes) 90%, black);
clip-path: polygon(0.1em 0em, 5.24em 0em, 5.9em 3.11em, 1.45em 4.6em);
transform-origin: top left;
rotate: x 1.6deg;
}
.dummy__torso-6 {
top: 100%; left: 1.75em;
width: 2.9em; height: 2.1em;
background: linear-gradient(77deg, color-mix(in srgb, var(--clothes) 90%, black) 84.5%, transparent 0);
transform-origin: top left;
transform: rotateX(90deg) rotateY(-137deg) rotateX(-1deg);
}
.dummy__torso-6 > div {
top: 100%; left: -0.74em;
width: 3.63em; height: 4.2em;
background: linear-gradient(280deg, transparent 40%, color-mix(in srgb, var(--clothes) 90%, black) 0 83%, transparent 0), linear-gradient(92deg, transparent 40%, color-mix(in srgb, var(--clothes) 90%, black) 0 96.5%, transparent 0);
transform-origin: top left;
rotate: x 28deg;
}
.dummy__torso-6 > div > div {
top: 100%; left: 0em;
width: 6.63em; height: 4.2em;
background: linear-gradient(83deg, transparent 50%, color-mix(in srgb, var(--clothes) 90%, black) 0 76.9%, transparent 0) 0 100% / 100% 53% no-repeat, linear-gradient(52deg, transparent 30%, color-mix(in srgb, var(--clothes) 90%, black) 0 61.5%, transparent 0) 0 0 / 100% 47% no-repeat, linear-gradient(-97.5deg, transparent 50%, color-mix(in srgb, var(--clothes) 90%, black) 0 92%, transparent 0);
transform-origin: top left;
rotate: x -50deg;
}
.dummy__torso-6 > div > div > div {
top: 100%; left: 0.6em;
width: 6.1em; height: 4.6em;
background: color-mix(in srgb, var(--clothes) 90%, black);
clip-path: polygon(0em 0em, 4.7em 0em, 5.15em 3.05em, 1.45em 4.85em);
transform-origin: top left;
rotate: x -1.6deg;
}
.dummy__torso-7 {
top: 0; left: 6.47em;
width: 3.35em; height: 4em;
background: linear-gradient(64.3deg, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 63.2%, transparent 0), linear-gradient(77.3deg, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 66.8%, transparent 0);
transform-origin: top left;
transform: rotateX(90deg) rotateY(50deg) rotateX(1deg);
}
.dummy__torso-7 > div {
top: 100%; left: -0.15em;
width: 4.8em; height: 3.74em;
background: linear-gradient(-88.5deg, transparent 30%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 97.6%, transparent 0), linear-gradient(71deg, transparent 30%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 78.4%, transparent 0);
transform-origin: top left;
rotate: x 6.5deg;
}
.dummy__torso-7 > div > div {
top: 100%; left: -0.4em;
width: 5.2em; height: 3.45em;
background: linear-gradient(-87deg, transparent 40%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 93%, transparent 0), linear-gradient(112deg, transparent 40%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 77%, transparent 0);
transform-origin: top left;
rotate: x -2deg;
}
.dummy__torso-7 > div > div > div {
top: 100%; left: -0.4em;
width: 4.2em; height: 1.95em;
background: linear-gradient(166deg, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 76%, transparent 0) 1.2em 0 / 59% 100% no-repeat, conic-gradient(from -63deg at 87% 70%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 85deg, transparent 0), conic-gradient(from -17deg at 29% 100%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 74deg, transparent 0);
transform-origin: top left;
rotate: x -2deg;
}
.dummy__torso-8 {
top: 0; left: 1.3em;
width: 3.5em; height: 4em;
background: linear-gradient(64deg, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 76%, transparent 0) 0 100% / 100% 52% no-repeat, linear-gradient(78deg, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 64%, transparent 0) 0 0 / 100% 52% no-repeat;
transform-origin: top left;
transform: rotateX(90deg) rotateY(128deg) rotateX(-2deg);
}
.dummy__torso-8 > div {
top: 100%; left: -0.27em;
width: 5.8em; height: 3.7em;
background: linear-gradient(-87deg, transparent 40%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 95.5%, transparent 0), linear-gradient(68deg, transparent 40%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 72.4%, transparent 0);
transform-origin: top left;
rotate: x -3.5deg;
}
.dummy__torso-8 > div > div {
top: 100%; left: -0.5em;
width: 5.8em; height: 3.5em;
background: linear-gradient(272.5deg, transparent 40%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 90.5%, transparent 0), linear-gradient(115deg, transparent 40%, color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black) 0 77.4%, transparent 0);
transform-origin: top left;
rotate: x -1deg;
}
.dummy__torso-8 > div > div > div {
top: 100%; left: 0.4em;
width: 3.7em; height: 2em;
background: color-mix(in srgb, color-mix(in srgb, var(--clothes) 85%, black) 90%, black);
clip-path: polygon(0em 0em, 3.7em 0em, 3em 1.5em, 0.9em 1.9em);
transform-origin: top left;
rotate: x -11deg;
}
/* NECK */
.dummy__neck {
top: -0.3em; left: 1.4em;
width: 4.5em; height: 4.8em;
transform-origin: center center;
translate: 0 0 13.8em;
}
.dummy__neck::before {
top: 0; left: 0;
width: 4.5em; height: 5em;
background: color-mix(in srgb, var(--skin) 70%, black);
clip-path: polygon(0.6em 0em, 4.1em 0em, 3.1em 5em, 1.6em 5em);
transform-origin: top left;
rotate: x 84deg;
}
.dummy__neck::after {
top: 0; left: 0;
width: 5em; height: 4.8em;
background: color-mix(in srgb, var(--skin) 80%, black);
clip-path: polygon(0em 1.6em, 5em 2em, 5em 2.95em, 0em 3.15em);
transform-origin: top left;
rotate: y -78deg;
}
.dummy__neck-1 {
width: 100%; height: 100%;
translate: 0 0 3em;
}
.dummy__neck-1::after {
bottom: 0.03em; left: 0;
width: 4.5em; height: 5em;
background: color-mix(in srgb, var(--skin) 90%, black);
clip-path: polygon(1.6em 0em, 3.1em 0em, 4.1em 5em, 0.6em 5em);
transform-origin: bottom left;
rotate: x -86deg;
translate: 0 0 -3em;
}
.dummy__neck-2 {
top: 100%; left: 4.1em;
width: 2.7em; height: 5em;
background: color-mix(in srgb, var(--skin) 85%, black);
clip-path: polygon(0em 0em, 2.56em 0em, 2.1em 5em, 0em 5em);
transform-origin: top left;
transform: rotateX(90deg) rotateY(-70deg) rotateX(12deg);
}
.dummy__neck-3 {
top: 100%; left: 0.57em;
width: 2.65em; height: 5em;
background: color-mix(in srgb, var(--skin) 85%, black);
clip-path: polygon(0em 0em, 2.63em 0em, 2.15em 5em, 0em 5em);
transform-origin: top left;
transform: rotateX(90deg) rotateY(251deg) rotateX(-12deg);
}
.dummy__neck-4 {
top: 0; left: 0.6em;
width: 2.75em; height: 5em;
background: color-mix(in srgb, var(--skin) 80%, black);
clip-path: polygon(0em 0em, 2.5em 0em, 2.2em 5em, 0.15em 5em);
transform-origin: top left;
transform: rotateX(90deg) rotateY(-249deg) rotateX(12.8deg);
}
.dummy__neck-5 {
top: 0; left: 4.1em;
width: 4.1em; height: 5em;
background: color-mix(in srgb, var(--skin) 80%, black);
clip-path: polygon(0em 0em, 2.6em 0em, 2.2em 5em, 0.1em 5em);
transform-origin: top left;
transform: rotateX(90deg) rotateY(70deg) rotateX(-12.6deg);
}
/* HEAD */
.dummy__head {
top: 0.2em; left: -2.5em;
width: 9.5em; height: 7.8em;
transform-origin: center 6em;
translate: 0 0 2em;
transform: rotateX(26deg);
}
.dummy__head-1 {
top: 100%; left: 50%;
width: 6.3em; height: 7em;
background: linear-gradient(182.5deg, transparent 50%, color-mix(in srgb, var(--skin) 95%, black) 0 60.5%, transparent 0), linear-gradient(46deg, color-mix(in srgb, var(--skin) 95%, black) 0 78%, transparent 0) 0 0 / 100% 57% no-repeat;
transform-origin: top left;
transform: rotateX(71deg) rotateY(-55deg);
}
.dummy__head-1 > div {
top: 0; left: 0;
width: 4em; height: 5.5em;
background: linear-gradient(-145deg, color-mix(in srgb, var(--skin) 85%, black) 34%, transparent 0);
transform-origin: top left;
transform: rotateX(105deg) rotateX(0deg);
}
.dummy__head-2 {
top: 100%; right: 50%;
width: 6.3em; height: 7em;
background: linear-gradient(-2.5deg, transparent 39%, color-mix(in srgb, var(--skin) 95%, black) 0 50%, transparent 0), linear-gradient(-43deg, color-mix(in srgb, var(--skin) 95%, black) 0 78%, transparent 0) 0 0 / 100% 57% no-repeat;
transform-origin: top right;
transform: rotateX(71deg) rotateY(55deg);
}
.dummy__head-2 > div {
top: 0; right: 0;
width: 4em; height: 5.5em;
background: linear-gradient(145deg, color-mix(in srgb, var(--skin) 85%, black) 34%, transparent 0);
transform-origin: top left;
transform: rotateX(105deg) rotateX(0deg);
}
.dummy__head-3 {
top: 9.1em; left: 50%;
width: 6.1em; height: 5.5em;
background: linear-gradient(89deg, var(--skin) 100%, transparent 0) 0 100% / 100% 63% no-repeat, linear-gradient(18deg, var(--skin) 49.5%, transparent 0) 0 0 / 100% 38% no-repeat;
transform-origin: top left;
transform: translateZ(3.8em) rotateX(90deg) rotateY(-53deg);
}
.dummy__head-3 > div {
top: 100%; left: 0;
width: 6.1em; height: 2.5em;
background: linear-gradient(173deg, color-mix(in srgb, var(--skin) 95%, black) 86%, transparent 0) 100% 0 / 54% 100% no-repeat, linear-gradient(223deg, color-mix(in srgb, var(--skin) 95%, black) 50%, transparent 0) 0 0 / 47% 100% no-repeat;
transform-origin: top left;
transform: rotateX(56deg);
}
.dummy__head-3 > div > div {
top: 100%; right: 0;
width: 3.3em; height: 3.3em;
background: var(--skin);
clip-path: polygon(0em 0em, 3.3em 0em, 2.4em 2.8em, 0.5em 3.3em);
transform-origin: top left;
transform: rotateX(38deg);
}
.dummy__head-4 {
top: 9.1em; right: 50%;
width: 6.1em; height: 5.5em;
background: linear-gradient(-18deg, var(--skin) 72.5%, transparent 0);
transform-origin: top right;
transform: translateZ(3.8em) rotateX(90deg) rotateY(53deg);
}
.dummy__head-4 > div {
top: 100%; left: 0;
width: 6.1em; height: 2.5em;
background: linear-gradient(187deg, color-mix(in srgb, var(--skin) 95%, black) 86%, transparent 0) 0 0 / 55% 100% no-repeat, linear-gradient(138deg, color-mix(in srgb, var(--skin) 95%, black) 50%, transparent 0) 100% 0 / 46% 100% no-repeat;
transform-origin: top left;
transform: rotateX(56deg);
}
.dummy__head-4 > div > div {
top: 100%; left: 0;
width: 3.3em; height: 3.3em;
background: color-mix(in srgb, var(--skin) 85%, black);
clip-path: polygon(0em 0em, 3.3em 0em, 2.7em 3.3em, 2em 3.3em, 0.1em 1.6em);
transform-origin: top left;
transform: rotateX(38deg);
}
.dummy__head-5 {
top: 0.1em; right: 50%;
width: 2.5em; height: 5.5em;
background: color-mix(in srgb, var(--skin) 80%, black);
transform-origin: top right;
transform: translateZ(1em) rotateX(111deg) rotateY(-20deg);
}
.dummy__head-5::before {
top: 0; right: 0;
width: 3.6em; height: 3.7em;
background: color-mix(in srgb, var(--skin) 80%, black);
transform-origin: top right;
transform: rotateX(-115deg);
}
.dummy__head-5::after {
top: 0em; right: 100%;
width: 6.2em; height: 6.3em;
background: linear-gradient(158deg, color-mix(in srgb, var(--skin) 90%, black) 86%, transparent 0) 100% 100% / 70% 54% no-repeat, linear-gradient(-74deg, color-mix(in srgb, var(--skin) 90%, black) 80%, transparent 0) 0 100% / 70% 54% no-repeat, linear-gradient(-58deg, color-mix(in srgb, var(--skin) 90%, black) 65%, transparent 0) 0 0 / 100% 46% no-repeat;
transform-origin: top right;
transform: rotateY(-58deg);
}
.dummy__head-5 > div {
top: 100%; right: 0;
width: 2.5em; height: 3.5em;
background: linear-gradient(100deg, color-mix(in srgb, var(--skin) 85%, black) 81%, transparent 0);
transform-origin: top right;
transform: rotateX(-30deg);
}
.dummy__head-6 {
top: 0.1em; left: 50%;
width: 2.5em; height: 5.5em;
background: color-mix(in srgb, var(--skin) 80%, black);
transform-origin: top left;
transform: translateZ(1em) rotateX(111deg) rotateY(20deg);
}
.dummy__head-6::before {
top: 0; left: 0;
width: 3.6em; height: 3.7em;
background: color-mix(in srgb, var(--skin) 80%, black);
transform-origin: top right;
transform: rotateX(-115deg);
}
.dummy__head-6::after {
top: 0em; left: 100%;
width: 6.2em; height: 6.3em;
background: linear-gradient(59deg, color-mix(in srgb, var(--skin) 90%, black) 42%, transparent 0) 100% 0 / 51% 46% no-repeat, linear-gradient(73deg, color-mix(in srgb, var(--skin) 90%, black) 73%, transparent 0) 100% 100% / 51% 55% no-repeat, linear-gradient(-117deg, color-mix(in srgb, var(--skin) 90%, black) 93%, transparent 0) 0 0 / 50% 100% no-repeat;
transform-origin: top left;
transform: rotateY(-302deg);
}
.dummy__head-6 > div {
top: 100%; right: 0;
width: 2.5em; height: 3.5em;
background: linear-gradient(-100deg, color-mix(in srgb, var(--skin) 85%, black) 79%, transparent 0);
transform-origin: top right;
transform: rotateX(-30deg);
}
/* LEFT SHOULDER */
.dummy__leftShoulder {
top: 1em; left: -3.8em;
width: 2.1em; height: 4em;
background: var(--skin);
transform-origin: right center;
translate: 0 0 12.5em;
animation: dummy__leftShoulder var(--animation);
}
@keyframes dummy__leftShoulder {
0%, 100% { /* 0 */ rotate: x -74deg; }
7.1% { /* 1 */ rotate: x -58deg; }
14.2% { /* 2 */ rotate: x -26deg; }
21.3% { /* 3 */ rotate: x 54deg; }
28.4% { /* 4 */ rotate: x 85deg; }
35.5% { /* 5 */ rotate: x 95deg; }
42.6% { /* 6 */ rotate: x 87deg; }
49.7% { /* 7 */ rotate: x 67deg; }
56.8% { /* 8 */ rotate: x -3deg; }
63.9% { /* 9 */ rotate: x -29deg; }
71.0% { /* 10 */ rotate: x -31deg; }
78.1% { /* 11 */ rotate: x -34deg; }
85.2% { /* 12 */ rotate: x -47deg; }
92.3% { /* 13 */ rotate: x -57deg; }
}
.dummy__leftShoulder::before {
top: 0; left: 0em;
width: 3em; height: 14.5em;
background: linear-gradient(93deg, transparent 40%,
color-mix(in srgb, var(--skin) 75%, black) 0 86.5%, transparent 0) 0 100% / 100% 81.1% no-repeat, linear-gradient(-91deg, transparent 40%,
color-mix(in srgb, var(--skin) 75%, black) 0 93.9%, transparent 0) 0 100% / 100% 81.1% no-repeat, linear-gradient(-77deg,
color-mix(in srgb, var(--skin) 75%, black) 87.1%, transparent 0) 0 6.3% / 100% 13.5% no-repeat, linear-gradient(-56deg,
color-mix(in srgb, var(--skin) 75%, black) 71.8%, transparent 0) 0 0 / 100% 5.6% no-repeat;
transform-origin: top left;
transform: rotateX(-90deg) translateX(-1em);
}
.dummy__leftShoulder::after {
top: 4em; left: -0.9em;
width: 3em; height: 14.3em;
background: linear-gradient(93deg, transparent 40%, var(--skin) 0 86.5%, transparent 0) 0 100% / 100% 81.1% no-repeat, linear-gradient(-91deg, transparent 40%, var(--skin) 0 93.9%, transparent 0) 0 100% / 100% 81.1% no-repeat, linear-gradient(-77deg, var(--skin) 87.1%, transparent 0) 0 6.3% / 100% 13.5% no-repeat, linear-gradient(-56deg, var(--skin) 71.8%, transparent 0) 0 0 / 100% 5.6% no-repeat;
transform-origin: top left;
transform: rotateX(-90deg);
}
.dummy__leftShoulder-helper {
top: 0; left: 0;
width: 3em; height: 100%;
transform-origin: top left;
rotate: y 90deg;
}
.dummy__leftShoulder-helper::before {
top: 0; left: 0;
width: 1em; height: 100%;
background: var(--skin);
transform-origin: top left;
rotate: y 33deg;
}
.dummy__leftShoulder-helper::after {
top: 0; left: 100%;
width: 2.2em; height: 100%;
background: var(--skin);
transform-origin: top left;
rotate: y 188.9deg;
translate: 0 0 -0.9em;
}
.dummy__leftShoulder-helper > div {
top: 0; left: 100%;
width: 11.5em; height: 100%;
background: color-mix(in srgb, var(--skin) 95%, black);
transform-origin: top right;
rotate: y -1deg;
translate: 0 0 -0.7em;
}
.dummy__leftShoulder-helper > div::before {
top: 0; left: -2.9em;
width: 14.4em; height: 100%;
background: color-mix(in srgb, var(--skin) 85%, black);
transform-origin: top left;
transform: translateZ(3.1em) rotateY(4deg);
}
/* LEFT ARM */
.dummy__leftArm {
top: 0; left: 100%;
translate: 0 0 2.2em;
rotate: z 60deg;
animation: dummy__leftArm var(--animation);
}
@keyframes dummy__leftArm {
0%, 100% { /* 0 */ rotate: z 60deg; }
7.1% { /* 1 */ rotate: z 76deg; }
14.2% { /* 2 */ rotate: z 96deg; }
21.3% { /* 3 */ rotate: z 99deg; }
28.4% { /* 4 */ rotate: z 89deg; }
35.5% { /* 5 */ rotate: z 84deg; }
42.6% { /* 6 */ rotate: z 80deg; }
49.7% { /* 7 */ rotate: z 70deg; }
56.8% { /* 8 */ rotate: z 104deg; }
63.9% { /* 9 */ rotate: z 114deg; }
71.0% { /* 10 */ rotate: z 103deg; }
78.1% { /* 11 */ rotate: z 63deg; }
85.2% { /* 12 */ rotate: z 33deg; }
92.3% { /* 13 */ rotate: z 35deg; }
}
.dummy__leftArm-1 {
top: 0; left: 0;
width: 1.5em; height: 4em;
background: linear-gradient(-187deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 95.5%, transparent 0), linear-gradient(4deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 97%, transparent 0);
transform-origin: top left;
transform: rotateY(-10deg);
}
.dummy__leftArm-1::before {
top: 0; left: 100%;
width: 11.5em; height: 4em;
background: conic-gradient(from -100deg at 50% 50%, color-mix(in srgb, var(--skin) 85%, black) 20deg, transparent 0), linear-gradient(5deg, transparent 45%, color-mix(in srgb, var(--skin) 85%, black) 0 77.3%, transparent 0), linear-gradient(175.6deg, transparent 43%, color-mix(in srgb, var(--skin) 85%, black) 0 78%, transparent 0);
transform-origin: top left;
transform: rotateY(17deg);
}
.dummy__leftArm-2 {
top: 0; left: 0;
width: 1.5em; height: 4em;
background: linear-gradient(-187deg, transparent 40%, color-mix(in srgb, var(--skin) 95%, black) 0 95.5%, transparent 0), linear-gradient(4deg, transparent 40%, color-mix(in srgb, var(--skin) 95%, black) 0 97%, transparent 0);
transform-origin: top left;
transform: translateZ(-2.3em) rotateY(20deg);
}
.dummy__leftArm-2::before {
top: 0; left: 100%;
width: 12em; height: 4em;
background: conic-gradient(from -100deg at 50% 50%, color-mix(in srgb, var(--skin) 90%, black) 20deg, transparent 0), linear-gradient(5deg, transparent 45%, color-mix(in srgb, var(--skin) 90%, black) 0 77.3%, transparent 0), linear-gradient(175deg, transparent 43%, color-mix(in srgb, var(--skin) 90%, black) 0 76%, transparent 0);
transform-origin: top left;
transform: rotateY(-22deg);
}
.dummy__leftArm-3 {
top: 0; left: 0;
width: 12.9em; height: 3.2em;
background: conic-gradient(from -94deg at 75% 60%, color-mix(in srgb, var(--skin) 75%, black) 12deg, transparent 0), linear-gradient(-353deg, transparent 49%, color-mix(in srgb, var(--skin) 75%, black) 0 68.5%, transparent 0) 100% 0 / 88.5% 100% no-repeat, linear-gradient(-182.6deg, transparent 60%, color-mix(in srgb, var(--skin) 75%, black) 0 84%, transparent 0) 100% 0 / 88.5% 100% no-repeat, linear-gradient(-159deg, transparent 40%, color-mix(in srgb, var(--skin) 75%, black) 0 84%, transparent 0) 0 0 / 11.5% 100% no-repeat, linear-gradient(-9deg, transparent 40%, color-mix(in srgb, var(--skin) 75%, black) 0 92%, transparent 0) 0 0 / 11.5% 100% no-repeat;
transform-origin: top left;
transform: translateZ(0.3em) rotat.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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