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) rotateX(-90deg) rotateY(-5deg); } .dummy__leftArm-4 { top: 4em; left: 0; width: 12.9em; height: 3.2em; background: conic-gradient(from -94deg at 75% 60%, var(--skin) 12deg, transparent 0), linear-gradient(-353deg, transparent 49%, var(--skin) 0 68.5%, transparent 0) 100% 0 / 88.5% 100% no-repeat, linear-gradient(-182.6deg, transparent 60%, var(--skin) 0 84%, transparent 0) 100% 0 / 88.5% 100% no-repeat, linear-gradient(-159deg, transparent 40%, var(--skin) 0 84%, transparent 0) 0 0 / 11.5% 100% no-repeat, linear-gradient(-9deg, transparent 40%, var(--skin) 0 92%, transparent 0) 0 0 / 11.5% 100% no-repeat; transform-origin: top left; transform: translatez(0.3em) rotateX(-90deg) rotateY(5deg); } /* LEFT HAND */ .dummy__leftHand { top: 1.1em; left: 12.8em; width: 1.2em; height: 1.8em; transform-origin: top left; translate: 0 0 -1.1em; rotate: y 90deg; } .dummy__leftHand::before { top: -0.8em; left: 0; width: 8.2em; height: 2.9em; background: linear-gradient(364.5deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 89%, transparent 0) 1.9em 0 / 47% 100% no-repeat, linear-gradient(375deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 72%, transparent 0) 100% 0 / 30% 100% no-repeat, linear-gradient(177deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 94%, transparent 0) 100% 0 / 57% 100% no-repeat, linear-gradient(185deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 92%, transparent 0) 0 0 / 44% 100% no-repeat, linear-gradient(-24deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 76%, transparent 0) 0 0 / 24% 100% no-repeat; transform-origin: top left; rotate: y -87deg; } .dummy__leftHand::after { top: -0.8em; left: 100%; width: 8.2em; height: 2.9em; background: linear-gradient(365deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 89%, transparent 0) 1.9em 0 / 47% 100% no-repeat, linear-gradient(375deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 72%, transparent 0) 100% 0 / 30% 100% no-repeat, linear-gradient(177deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 94%, transparent 0) 100% 0 / 57% 100% no-repeat, linear-gradient(185deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 92%, transparent 0) 0 0 / 44% 100% no-repeat, linear-gradient(-24deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 76%, transparent 0) 0 0 / 24% 100% no-repeat; transform-origin: top left; rotate: y -92deg; } .dummy__leftHand-1 { top: -0.8em; left: 0; width: 1.2em; height: 3.7em; background: linear-gradient(92deg, transparent 40%, color-mix(in srgb, var(--skin) 75%, black) 0 85%, transparent 0), linear-gradient(-93deg, transparent 40%, color-mix(in srgb, var(--skin) 75%, black) 0 77%, transparent 0); transform-origin: top left; translate: 0 0 2em; rotate: x 85deg; } .dummy__leftHand-1::before { top: 0; left: 0; width: 1.2em; height: 2.1em; background: linear-gradient(448deg, transparent 40%, color-mix(in srgb, var(--skin) 78%, black) 0 95%, transparent 0), linear-gradient(273deg, transparent 40%, color-mix(in srgb, var(--skin) 78%, black) 0 90%, transparent 0); transform-origin: top left; rotate: x 209deg; } .dummy__leftHand-1::after { top: 100%; left: 0; width: 1.2em; height: 2.55em; background: linear-gradient(92deg, transparent 51%, color-mix(in srgb, var(--skin) 78%, black) 0 77%, transparent 0), linear-gradient(-93deg, transparent 40%, color-mix(in srgb, var(--skin) 78%, black) 0 68%, transparent 0); transform-origin: top left; rotate: x 350deg; } .dummy__leftHand-2 { top: 1.9em; left: 0; width: 1.2em; height: 3.7em; transform-origin: top left; rotate: x 87deg; } .dummy__leftHand-2::before { top: 100%; left: 0; width: 1.2em; height: 4.5em; background: linear-gradient(267deg, transparent 36%, var(--skin) 0 70%, transparent 0), linear-gradient(92deg, transparent 50%, var(--skin) 0 79%, transparent 0); transform-origin: top left; rotate: x 5deg; } .dummy__leftHand-2::after { top: 8.18em; left: 0.5em; width: 0.5em; height: 1.7em; background: color-mix(in srgb, var(--skin) 80%, black); transform-origin: top left; translate: 0 0 0.4em; rotate: x 93deg; } .dummy__leftHand-3 { top: 1.9em; left: 0; width: 1.2em; height: 3em; background: conic-gradient(from -8deg at 50% 57%, var(--skin) 20deg, transparent 0), linear-gradient(263deg, transparent 51%, var(--skin) 0 73%, transparent 0), linear-gradient(95deg, transparent 51%, var(--skin) 0 78%, transparent 0); transform-origin: top left; rotate: x 69deg; } .dummy__leftHand-3::before { top: 100%; left: 0; width: 1.2em; height: 2.45em; background: linear-gradient(-87deg, transparent 45%, var(--skin) 0 68%, transparent 0), linear-gradient(88deg, transparent 45%, var(--skin) 0 75%, transparent 0); transform-origin: top left; rotate: x 30deg; } .dummy__leftHand-3::after { top: 5.1em; left: 0.1em; width: 1em; height: 0.55em; background: linear-gradient(89deg, transparent 40%, color-mix(in srgb, var(--skin) 80%, black) 0 93%, transparent 0), linear-gradient(289deg, transparent 40%, color-mix(in srgb, var(--skin) 80%, black) 0 85%, transparent 0); transform-origin: top left; translate: 0 0 1.2em; rotate: x 110deg; } .dummy__leftHand-4 { top: 1.8em; left: 0; width: 5.2em; height: 1.3em; background: linear-gradient(170deg, color-mix(in srgb, var(--skin) 85%, black) 73%, transparent 0) 100% 0 / 46% 100% no-repeat, linear-gradient(202deg, color-mix(in srgb, var(--skin) 85%, black) 51%, transparent 0) 0 0 / 54% 100% no-repeat; transform-origin: top left; transform: rotateY(-90deg) rotateX(-20deg); } .dummy__leftHand-4::before { top: 0.5em; left: 0; width: 5.2em; height: 1.4em; background: linear-gradient(171deg, color-mix(in srgb, var(--skin) 90%, black) 65%, transparent 0) 100% 0 / 46% 100% no-repeat, linear-gradient(201deg, color-mix(in srgb, var(--skin) 90%, black) 47%, transparent 0) 0 0 / 54% 100% no-repeat; transform-origin: top left; translate: 0 0 -1.1em; transform: rotateX(35deg); } /* RIGHT SHOULDER */ .dummy__rightShoulder { top: 0; left: 9.3em; width: 2.1em; height: 4em; background: var(--skin); transform-origin: left center; translate: 0 0 12.5em; animation: dummy__rightShoulder var(--animation); } @keyframes dummy__rightShoulder { 0%, 100% { /* 0 */ rotate: x 86deg; } 7.1% { /* 1 */ rotate: x 52deg; } 14.2% { /* 2 */ rotate: x -13deg; } 21.3% { /* 3 */ rotate: x -33deg; } 28.4% { /* 4 */ rotate: x -43deg; } 35.5% { /* 5 */ rotate: x -43deg; } 42.6% { /* 6 */ rotate: x -43deg; } 49.7% { /* 7 */ rotate: x -50deg; } 56.8% { /* 8 */ rotate: x -38deg; } 63.9% { /* 9 */ rotate: x -18deg; } 71.0% { /* 10 */ rotate: x 12deg; } 78.1% { /* 11 */ rotate: x 62deg; } 85.2% { /* 12 */ rotate: x 102deg; } 92.3% { /* 13 */ rotate: x 104deg; } } .dummy__rightShoulder::before { top: 0; left: 0; width: 3em; height: 14.5em; background: color-mix(in srgb, var(--skin) 75%, black); transform-origin: top left; transform: rotateX(-90deg); } .dummy__rightShoulder::after { top: 0; left: 0; width: 3em; height: 14.3em; background: var(--skin); transform-origin: top left; transform: rotateX(-90deg) translateZ(4em); } .dummy__rightShoulder-helper { top: 0; left: 100%; width: 3em; height: 100%; background: var(--skin); transform-origin: top left; rotate: y 90deg; } .dummy__rightShoulder-helper::before { top: 0; left: 0; width: 1em; height: 100%; background: var(--skin); transform-origin: top left; rotate: y -33deg; } .dummy__rightShoulder-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__rightShoulder-helper > div { top: 0; left: 100%; width: 11.5em; height: 100%; background: color-mix(in srgb, var(--skin) 95%, black); transform-origin: top left; rotate: y 0deg; translate: 0 0 0.7em; } .dummy__rightShoulder-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(-2.7em); } /* RIGHT ARM */ .dummy__rightArm { top: 0; left: 100%; animation: dummy__rightArm var(--animation); } @keyframes dummy__rightArm { 0%, 100% { /* 0 */ rotate: z 63deg; } 7.1% { /* 1 */ rotate: z 73deg; } 14.2% { /* 2 */ rotate: z 103deg; } 21.3% { /* 3 */ rotate: z 103deg; } 28.4% { /* 4 */ rotate: z 90deg; } 35.5% { /* 5 */ rotate: z 40deg; } 42.6% { /* 6 */ rotate: z 35deg; } 49.7% { /* 7 */ rotate: z 32deg; } 56.8% { /* 8 */ rotate: z 52deg; } 63.9% { /* 9 */ rotate: z 97deg; } 71.0% { /* 10 */ rotate: z 117deg; } 78.1% { /* 11 */ rotate: z 97deg; } 85.2% { /* 12 */ rotate: z 71deg; } 92.3% { /* 13 */ rotate: z 58deg; } } .dummy__rightArm-1 { 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: rotateY(-10deg); } .dummy__rightArm-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) 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(175.6deg, transparent 43%, color-mix(in srgb, var(--skin) 90%, black) 0 78%, transparent 0); transform-origin: top left; transform: rotateY(17deg); } .dummy__rightArm-2 { 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: translateZ(-2.3em) rotateY(20deg); } .dummy__rightArm-2::before { top: 0; left: 100%; width: 11.3em; 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(174.6deg, transparent 43%, color-mix(in srgb, var(--skin) 85%, black) 0 77%, transparent 0); transform-origin: top left; transform: rotateY(-22.5deg); } .dummy__rightArm-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) rotateX(-90deg) rotateY(-5deg); } .dummy__rightArm-4 { top: 4em; left: 0; width: 12.9em; height: 3.2em; background: conic-gradient(from -94deg at 75% 60%, var(--skin) 12deg, transparent 0), linear-gradient(-353deg, transparent 49%, var(--skin) 0 68.5%, transparent 0) 100% 0 / 88.5% 100% no-repeat, linear-gradient(-182.6deg, transparent 60%, var(--skin) 0 84%, transparent 0) 100% 0 / 88.5% 100% no-repeat, linear-gradient(-159deg, transparent 40%, var(--skin) 0 84%, transparent 0) 0 0 / 11.5% 100% no-repeat, linear-gradient(-9deg, transparent 40%, var(--skin) 0 92%, transparent 0) 0 0 / 11.5% 100% no-repeat; transform-origin: top left; transform: translatez(0.3em) rotateX(-90deg) rotateY(5deg); } /* RIGHT HAND */ .dummy__rightHand { top: 1.1em; left: 12.7em; width: 1.2em; height: 1.8em; transform-origin: top left; translate: 0 0 -1.1em; rotate: y 90deg; } .dummy__rightHand::before { top: -0.8em; left: 0; width: 8.2em; height: 2.9em; background: linear-gradient(364.5deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 89%, transparent 0) 1.9em 0 / 47% 100% no-repeat, linear-gradient(375deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 72%, transparent 0) 100% 0 / 30% 100% no-repeat, linear-gradient(177deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 94%, transparent 0) 100% 0 / 57% 100% no-repeat, linear-gradient(185deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 92%, transparent 0) 0 0 / 44% 100% no-repeat, linear-gradient(-24deg, transparent 40%, color-mix(in srgb, var(--skin) 90%, black) 0 76%, transparent 0) 0 0 / 24% 100% no-repeat; transform-origin: top left; rotate: y -87deg; } .dummy__rightHand::after { top: -0.8em; left: 100%; width: 8.2em; height: 2.9em; background: linear-gradient(365deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 89%, transparent 0) 1.9em 0 / 47% 100% no-repeat, linear-gradient(375deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 72%, transparent 0) 100% 0 / 30% 100% no-repeat, linear-gradient(177deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 94%, transparent 0) 100% 0 / 57% 100% no-repeat, linear-gradient(185deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 92%, transparent 0) 0 0 / 44% 100% no-repeat, linear-gradient(-24deg, transparent 40%, color-mix(in srgb, var(--skin) 85%, black) 0 76%, transparent 0) 0 0 / 24% 100% no-repeat; transform-origin: top left; rotate: y -92deg; } .dummy__rightHand-1 { top: -0.8em; left: 0; width: 1.2em; height: 3.7em; background: linear-gradient(92deg, transparent 40%, color-mix(in srgb, var(--skin) 75%, black) 0 85%, transparent 0), linear-gradient(-93deg, transparent 40%, color-mix(in srgb, var(--skin) 75%, black) 0 77%, transparent 0); transform-origin: top left; translate: 0 0 2em; rotate: x 85deg; } .dummy__rightHand-1::before { top: 0; left: 0; width: 1.2em; height: 2.1em; background: linear-gradient(448deg, transparent 40%, color-mix(in srgb, var(--skin) 78%, black) 0 95%, transparent 0), linear-gradient(273deg, transparent 40%, color-mix(in srgb, var(--skin) 78%, black) 0 90%, transparent 0); transform-origin: top left; rotate: x 209deg; } .dummy__rightHand-1::after { top: 100%; left: 0; width: 1.2em; height: 2.55em; background: linear-gradient(92deg, transparent 51%, color-mix(in srgb, var(--skin) 78%, black) 0 77%, transparent 0), linear-gradient(-93deg, transparent 40%, color-mix(in srgb, var(--skin) 78%, black) 0 68%, transparent 0); transform-origin: top left; rotate: x 350deg; } .dummy__rightHand-2 { top: 1.9em; left: 0; width: 1.2em; height: 3.7em; transform-origin: top left; rotate: x 87deg; } .dummy__rightHand-2::before { top: 100%; left: 0; width: 1.2em; height: 4.5em; background: linear-gradient(267deg, transparent 36%, var(--skin) 0 70%, transparent 0), linear-gradient(92deg, transparent 50%, var(--skin) 0 79%, transparent 0); transform-origin: top left; rotate: x 5deg; } .dummy__rightHand-2::after { top: 8.18em; left: 0.5em; width: 0.5em; height: 1.7em; background: color-mix(in srgb, var(--skin) 80%, black); transform-origin: top left; translate: 0 0 0.4em; rotate: x 93deg; } .dummy__rightHand-3 { top: 1.9em; left: 0; width: 1.2em; height: 3em; background: conic-gradient(from -8deg at 50% 57%, var(--skin) 20deg, transparent 0), linear-gradient(263deg, transparent 51%, var(--skin) 0 73%, transparent 0), linear-gradient(95deg, transparent 51%, var(--skin) 0 78%, transparent 0); transform-origin: top left; rotate: x 69deg; } .dummy__rightHand-3::before { top: 100%; left: 0; width: 1.2em; height: 2.45em; background: linear-gradient(-87deg, transparent 45%, var(--skin) 0 68%, transparent 0), linear-gradient(88deg, transparent 45%, var(--skin) 0 75%, transparent 0); transform-origin: top left; rotate: x 30deg; } .dummy__rightHand-3::after { top: 5.1em; left: 0.1em; width: 1em; height: 0.55em; background: linear-gradient(89deg, transparent 40%, color-mix(in srgb, var(--skin) 80%, black) 0 93%, transparent 0), linear-gradient(289deg, transparent 40%, color-mix(in srgb, var(--skin) 80%, black) 0 85%, transparent 0); transform-origin: top left; translate: 0 0 1.2em; rotate: x 110deg; } .dummy__rightHand-4 { top: 1.8em; left: 0; width: 5.2em; height: 1.3em; background: linear-gradient(170deg, color-mix(in srgb, var(--skin) 90%, black) 73%, transparent 0) 100% 0 / 46% 100% no-repeat, linear-gradient(202deg, color-mix(in srgb, var(--skin) 90%, black) 51%, transparent 0) 0 0 / 54% 100% no-repeat; transform-origin: top left; transform: rotateY(-90deg) rotateX(-20deg); } .dummy__rightHand-4::before { top: 0.5em; left: 0; width: 5.2em; height: 1.4em; background: linear-gr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0