大卫眼睛3D模型石膏素材
这是一款大卫眼睛3D模型石膏素材,该素材呈现了眼睛石材样式的自动旋转的动画效果,可鼠标拖动,生动有趣,欢迎大家下载。
css
.scene {
position: relative;
transform-style: preserve-3d;
}
.scene *, .scene *::before, .eye::after {
position: absolute;
display: block;
transform-origin: top left;
transform-style: preserve-3d;
background-repeat: no-repeat;
}
.scene *::before, .eye::after {
content: '';
width: 100%; height: 100%;
}
.eye {
top: 53vh; left: 50vw;
width: 100.5em; height: 69.3em;
font-size: min(0.5vh, 0.5vw);
transform-origin: center;
transform: translateX(-50%) rotateX(75deg) rotateZ(0.2turn);
--color: #615656;
animation: eye 20s ease infinite;
}
@keyframes eye {
50% {
transform: translateX(-50%) rotateX(75deg) rotateZ(-0.1turn);
}
}
.eye::before {
background-color: color-mix(in oklch, var(--color), black 70%);
clip-path: polygon(0% 0%, 100% 0%, 100% 37.9%, 91.5% 45.7%, 74.5% 50.7%, 61.5% 56.4%, 51.1% 58.1%, 38.1% 61.8%, 21.5% 65.2%, 11.9% 82.9%, 2.5% 98.9%, 0% 100%);
}
.eye::after {
height: 80.3em;
background-color: color-mix(in oklch, var(--color), black 56%);
transform: rotateX(90deg);
}
.eye-1 {
left: 100%;
width: 80.3em; height: 27.2em;
transform: rotateY(-90deg);
}
.eye-1::before {
background-color: color-mix(in oklch, var(--color), black 40%);
clip-path: polygon(0% 0%, 100% 0%, 100% 88.5%, 74.4% 100%, 48.2% 49%, 31.6% 62.9%, 11.3% 89.6%, 0% 96.5%);
}
.eye-1-1 {
left: 59.7em; top: 100%;
width: 20.9em; height: 12.5em;
transform: rotateZ(-8.7deg) rotateX(35.4deg);
}
.eye-1-1::before {
background-color: color-mix(in oklch, var(--color), black 14%);
clip-path: polygon(0% 0%, 100% 0%, 92.5% 100%);
}
.eye-1-1-1 {
width: 25.8em; height: 5.9em;
transform: rotateZ(32.8deg) rotateX(5deg);
}
.eye-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 9%);
clip-path: polygon(0% 0%, 89% 0%, 100% 100%);
}
.eye-1-1-1-1 {
width: 26.4em; height: 5.9em;
transform: rotateZ(12.8deg) rotateX(0deg);
}
.eye-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 5%);
clip-path: polygon(0% 0%, 100% 0%, 72.5% 100%);
}
.eye-1-1-1-1-1 {
width: 20.1em; height: 2em;
transform: rotateZ(17deg) rotateX(54deg);
}
.eye-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 0%);
clip-path: polygon(0% 0%, 100% 0%, 96% 100%);
}
.eye-1-2 {
left: 100%;
width: 100.5em; height: 57.9em;
transform: rotateY(-90deg);
}
.eye-1-2::before {
background-color: color-mix(in oklch, var(--color), black 0%);
clip-path: polygon(0% 0%, 100% 0%, 100% 92.4%, 97.1% 89.9%, 96% 84.3%, 92.4% 95.6%, 86.2% 100%, 65.2% 98.7%, 47.3% 78.4%, 25.2% 74.4%, 11.3% 67.9%, 7.2% 59.3%, 0% 41.8%);
}
.eye-1-2-1 {
left: 100%;
width: 80.3em; height: 69.3em;
transform: rotateY(-90deg);
}
.eye-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 40%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 76.6% 95.6%, 44.5% 87.2%, 36.8% 80.6%, 22.6% 84.3%, 0% 77.2%);
}
.eye-1-2-1-1 {
left: 100%; top: 100%;
width: 5.5em; height: 19.3em;
transform: rotateZ(99.3deg) rotateY(-104deg);
}
.eye-1-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 10%);
clip-path: polygon(0% 0%, 49% 1%, 100% 100%, 0% 96.7%);
}
.eye-1-2-1-1-1 {
top: 18.6em;
width: 8.8em; height: 26.6em;
transform: rotateZ(7.3deg) rotateX(3.4deg);
}
.eye-1-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 4%);
clip-path: polygon(0% 0%, 62% 0%, 88.6% 37.4%, 100% 98.5%, 43% 100%);
}
.eye-1-2-1-1-1-1 {
left: 3.8em; top: 26.6em;
width: 5.3em; height: 8.2em;
transform: rotateZ(-4.5deg) rotateX(23deg);
}
.eye-1-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 9%);
clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 21% 92%);
}
.eye-1-2-2 {
left: 86.6em; top: 100%;
width: 15.7em; height: 21.3em;
transform: rotateZ(92.2deg) rotateY(-74.2deg);
}
.eye-1-2-2::before {
background-color: color-mix(in oklch, var(--color), black 5%);
clip-path: polygon(0% 0%, 100% 23.9%, 98.6% 81.5%, 0% 100%);
}
.eye-1-2-2-1 {
left: 100%; top: 5.1em;
width: 19.2em; height: 11em;
transform: rotateZ(-162deg) rotateX(26deg);
}
.eye-1-2-2-1::before {
background-color: color-mix(in oklch, var(--color), black 12%);
clip-path: polygon(0% 0%, 86% 0%, 100% 57%, 4.8% 100%);
}
.eye-1-2-2-1-1 {
left: 0.9em; top: 100%;
width: 20.2em; height: 7.4em;
transform: rotateZ(-14.8deg) rotateX(38.5deg);
}
.eye-1-2-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 20%);
clip-path: polygon(0% 0%, 93.6% 0%, 100% 100%, 13.6% 84%);
}
.eye-1-2-2-2 {
left: 15.5em; top: 17.3em;
width: 20em; height: 23.4em;
transform: rotateZ(75.6deg) rotateY(-32.1deg);
}
.eye-1-2-2-2::before {
background-color: color-mix(in oklch, var(--color), black 2%);
clip-path: polygon(0% 0%, 100% 100%, 0% 68.4%);
}
.eye-1-2-2-2-1 {
width: 10.9em; height: 30.7em;
transform: rotateZ(-40.5deg) rotateY(30deg);
}
.eye-1-2-2-2-1::before {
background-color: color-mix(in oklch, var(--color), black 4%);
clip-path: polygon(0% 0%, 100% 74%, 0% 100%);
}
.eye-1-2-2-2-1-1 {
top: 100%;
width: 13.5em; height: 22.5em;
transform: rotateZ(-36.4deg) rotateX(-9.4deg);
}
.eye-1-2-2-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 0%);
clip-path: polygon(0% 0%, 100% 0%, 56% 96.6%, 10.7% 100%);
}
.eye-1-2-2-2-1-1-1 {
left: 1.4em; top: 100%;
width: 6.2em; height: 16.2em;
transform: rotateZ(-7deg) rotateX(24.1deg);
}
.eye-1-2-2-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 7%);
clip-path: polygon(0% 0%, 100% 0%, 99.7% 100%);
}
.eye-1-2-2-2-1-1-1-1 {
width: 17.3em; height: 7.7em;
transform: rotateZ(69.1deg) rotateX(-30deg);
}
.eye-1-2-2-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 0%);
clip-path: polygon(0% 0%, 100% 0%, 69.7% 100%);
}
.eye-1-2-2-2-1-1-1-2 {
left: 100%;
width: 4em; height: 16.2em;
transform: rotateZ(0.1deg) rotateY(-69.2deg);
}
.eye-1-2-2-2-1-1-1-2::before {
background-color: color-mix(in oklch, var(--color), black 0%);
clip-path: polygon(0% 0%, 100% 19%, 56% 99%, 0% 100%);
}
.eye-2 {
left: 92em; top: 31.6em;
width: 11.2em; height: 9.1em;
transform: rotateZ(-32.4deg) rotateX(98.5deg);
}
.eye-2::before {
background-color: color-mix(in oklch, var(--color), black 33%);
clip-path: polygon(0% 0%, 90% 0%, 100% 100%);
}
.eye-2-1 {
width: 28.1em; height: 18.2em;
transform: rotateZ(39deg) rotateX(17.9deg);
}
.eye-2-1::before {
background-color: color-mix(in oklch, var(--color), black 23%);
clip-path: polygon(0% 0%, 51% 0%, 100% 61%, 73% 100%, 33.5% 85%);
}
.eye-2-1-1 {
left: 28.8em; top: 10.4em;
width: 14.2em; height: 12.6em;
transform: rotateZ(47.2deg) rotateY(6.4deg);
}
.eye-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 15%);
clip-path: polygon(0% 7.7%, 100% 0%, 31.3% 100%, 0% 90.7%);
}
.eye-2-1-2 {
left: 0.1em;
width: 18.1em; height: 19.1em;
transform: rotateZ(58.9deg) rotateX(8.2deg);
}
.eye-2-1-2::before {
background-color: color-mix(in oklch, var(--color), black 33%);
clip-path: polygon(0% 0%, 100% 0%, 57.3% 100%, 22.8% 87.3%);
}
.eye-2-1-2-1 {
left: 4.1em; top: 16.6em;
width: 12.7em; height: 11.9em;
transform: rotateZ(21.5deg) rotateX(-5.5deg);
}
.eye-2-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 39%);
clip-path: polygon(0% 0%, 53.3% 0%, 100% 85.5%, 63.5% 100%);
}
.eye-2-1-2-1-1 {
left: 8em; top: 11.9em;
width: 9.1em; height: 9.8em;
transform: rotateZ(-20.2deg) rotateX(10deg);
}
.eye-2-1-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 46%);
clip-path: polygon(0% 0%, 55% 0%, 100% 74%, 34.5% 100%);
}
.eye-2-1-2-1-1-1 {
left: 1.7em; top: 10.4em;
width: 12.5em; height: 12.9em;
transform: rotateZ(-23deg) rotateX(-4.7deg);
}
.eye-2-1-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 41%);
clip-path: polygon(12.5% 0%, 64.5% 0%, 100% 99.5%, 0% 100%);
}
.eye-2-1-2-1-1-1-1 {
top: 100%;
width: 12.5em; height: 8.5em;
transform: rotateZ(-0.3deg) rotateX(22.2deg);
}
.eye-2-1-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 36%);
clip-path: polygon(0% 0%, 99.2% 0%, 45% 100%);
}
.eye-2-1-2-1-1-1-1-1 {
left: 99.2%;
width: 17.1em; height: 12.6em;
transform: rotateZ(38.6deg) rotateY(8.6deg);
}
.eye-2-1-2-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 31%);
clip-path: polygon(0% 0%, 100% 41.5%, 68.3% 100%, 0% 86.4%);
}
.eye-2-1-2-1-1-1-1-1-1 {
left: 11.7em; top: 100%;
width: 13.5em; height: 12.8em;
transform: rotateZ(-53.7deg) rotateX(12deg);
}
.eye-2-1-2-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 27%);
clip-path: polygon(0% 0%, 67.5% 0%, 100% 100%);
}
.eye-3 {
left: 21.6em; top: 45.2em;
width: 7.8em; height: 16em;
transform: rotateZ(38.2deg) rotateY(-144deg);
}
.eye-3::before {
background-color: color-mix(in oklch, var(--color), black 48%);
clip-path: polygon(0% 0%, 100% 3.4%, 0% 100%);
}
.eye-3-1 {
top: 100%;
width: 22.4em; height: 13em;
transform: rotateZ(-63.2deg) rotateX(-25deg);
}
.eye-3-1::before {
background-color: color-mix(in oklch, var(--color), black 31%);
clip-path: polygon(0% 0%, 77.4% 0%, 100% 100%, 16.7% 69%);
}
.eye-3-1-1 {
width: 9.8em; height: 14.2em;
transform: rotateZ(67.3deg) rotateX(12deg);
}
.eye-3-1-1::before {
background-color: color-mix(in oklch, var(--color), black 37%);
clip-path: polygon(0% 0%, 100% 0%, 7.5% 100%);
}
.eye-3-1-2 {
left: 100%; top: 100%;
width: 8.6em; height: 19em;
transform: rotateZ(102.2deg) rotateY(40.6deg);
}
.eye-3-1-2::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 0%, 100% 33%, 0% 100%);
}
.eye-3-1-2-1 {
width: 15em; height: 15.1em;
transform: rotateZ(-53.9deg) rotateY(-11.5deg);
}
.eye-3-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 28%);
clip-path: polygon(0% 0%, 79% 2%, 100% 100%, 0% 70.5%);
}
.eye-3-1-2-1-1 {
left: 100%; top: 100%;
width: 15.1em; height: 10.6em;
transform: rotateZ(-102.1deg) rotateX(27.5deg);
}
.eye-3-1-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 23%);
clip-path: polygon(0% 0%, 100% 0%, 35.4% 100%);
}
.eye-3-1-2-1-1-1 {
left: 5.4em; top: 100%;
width: 18.1em; height: 14.7em;
transform: rotateZ(153.5deg) rotateY(-2.4deg);
}
.eye-3-1-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 20%);
clip-path: polygon(0% 0%, 100% 100%, 0% 81%);
}
.eye-3-1-2-1-1-1-1 {
width: 8.4em; height: 23.3em;
transform: rotateZ(-50.9deg) rotateY(41.6deg);
}
.eye-3-1-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 31%);
clip-path: polygon(0% 0%, 100% 84.8%, 0% 100%);
}
.eye-4 {
left: 38.6em; top: 42.8em;
width: 7.3em; height: 21.9em;
transform: rotateZ(82deg) rotateY(-132.3deg);
}
.eye-4::before {
background-color: color-mix(in oklch, var(--color), black 43%);
clip-path: polygon(0% 0%, 100% 32.3%, 85% 100%, 0% 78.4%);
}
.eye-4-1 {
left: 85%; top: 100%;
width: 14.9em; height: 9.8em;
transform: rotateZ(-85.8deg) rotateX(-14deg);
}
.eye-4-1::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 0%, 100% 0%, 52.2% 100%);
}
.eye-4-1-1 {
width: 12.5em; height: 11.8em;
transform: rotateZ(51.8deg) rotateX(-7.4deg);
}
.eye-4-1-1::before {
background-color: color-mix(in oklch, var(--color), black 21%);
clip-path: polygon(0% 0%, 100% 0%, 59.5% 100%);
}
.eye-4-1-1-1 {
left: 100%;
width: 15.5em; height: 12.8em;
transform: rotateZ(23deg) rotateY(-10deg);
}
.eye-4-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 31%);
clip-path: polygon(0% 0%, 100% 74.5%, 0% 100%);
}
.eye-4-1-1-1-1 {
top: 100%;
width: 15.8em; height: 5.2em;
transform: rotateZ(-11.9deg) rotateX(-21deg);
}
.eye-4-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 36%);
clip-path: polygon(0% 0%, 100% 0%, 67.5% 100%);
}
.eye-4-1-1-1-1-1 {
left: 100%;
width: 18.6em; height: 10.8em;
transform: rotateZ(45deg) rotateY(7deg);
}
.eye-4-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 29%);
clip-path: polygon(0% 0%, 22.5% 4.5%, 100% 30.5%, 74% 100%, 0% 83%);
}
.eye-4-1-1-1-1-1-1 {
left: 4.1em; top: 0.5em;
width: 9.1em; height: 16.2em;
transform: rotateZ(-79deg) rotateY(46.3deg);
}
.eye-4-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 39%);
clip-path: polygon(0% 0%, 100% 57.5%, 100% 100%, 0% 91.1%);
}
.eye-4-1-1-1-1-1-1-1 {
left: 100%; top: 100%;
width: 6.9em; height: 18.2em;
transform: rotateZ(-89.8deg) rotateX(-4.8deg);
}
.eye-4-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 33%);
clip-path: polygon(0% 0%, 100% 0%, 46.6% 100%);
}
.eye-1-2-1-1-2 {
left: 2.7em; top: 0.2em;
width: 12.3em; height: 19.3em;
transform: rotateZ(-8.3deg) rotateY(-60deg);
}
.eye-1-2-1-1-2::before {
background-color: color-mix(in oklch, var(--color), black 31%);
clip-path: polygon(0% 0%, 100% 59%, 0% 100%);
}
.eye-1-2-1-1-2-1 {
left: 100%; top: 11.35em;
width: 14.9em; height: 20em;
transform: rotateZ(57.2deg) rotateY(-4.8deg);
}
.eye-1-2-1-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 20%);
clip-path: polygon(0% 0%, 100% 19.9%, 59.4% 100%, 0% 73.2%);
}
.eye-1-2-1-1-2-1-1 {
left: 100%; top: 3.9em;
width: 15.7em; height: 21.3em;
transform: rotateZ(20.6deg) rotateY(-8.5deg);
}
.eye-1-2-1-1-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 22%);
clip-path: polygon(0% 0%, 96.4% 18.5%, 100% 100%, 0% 80.8%);
}
.eye-1-2-1-1-2-1-1-1 {
left: 100%; top: 100%;
width: 17.4em; height: 8.1em;
transform: rotateZ(-91.9deg) rotateX(6.9deg);
}
.eye-1-2-1-1-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 15%);
clip-path: polygon(0% 0%, 100% 0%, 4.3% 100%);
}
.eye-1-2-1-2 {
left: -0.4em; top: 53.4em;
width: 20.4em; height: 6.3em;
transform: rotateZ(15.1deg) rotateX(116.8deg);
}
.eye-1-2-1-2::before {
background-color: color-mix(in oklch, var(--color), black 9%);
clip-path: polygon(2.2% 0%, 94.2% 0%, 100% 100%, 0% 51%);
}
.eye-1-2-1-2-1 {
left: 19.2em;
width: 11em; height: 8.2em;
transform: rotateZ(-10.7deg) rotateY(-26.8deg);
}
.eye-1-2-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 14%);
clip-path: polygon(0% 0%, 100% 54%, 83% 100%, 0% 78%);
}
.eye-1-2-1-2-2 {
left: 100%; top: 100%;
width: 3.5em; height: 21.1em;
transform: rotateZ(98.6deg) rotateY(-42deg);
}
.eye-1-2-1-2-2::before {
background-color: color-mix(in oklch, var(--color), black 17%);
clip-path: polygon(0% 0%, 92% 17%, 100% 100%, 0% 97.9%);
}
.eye-1-2-1-2-2-1 {
left: 3.2em; top: 3.6em;
width: 9.7em; height: 8.3em;
transform: rotateZ(-132.2deg) rotateX(27.7deg);
}
.eye-1-2-1-2-2-1::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 0%, 50% 0%, 100% 96%, 4% 100%);
}
.eye-1-2-2-3 {
left: 100%; top: 4em;
width: 14.9em; height: 13.4em;
transform: rotateZ(1.1deg) rotateY(-52.5deg);
}
.eye-1-2-2-3::before {
background-color: color-mix(in oklch, var(--color), black 6%);
clip-path: polygon(0% 7.5%, 100% 0%, 77% 96.5%, 0% 100%);
}
.eye-1-2-2-3-1 {
top: 1em;
width: 9.7em; height: 16.4em;
transform: rotateZ(-93.8deg) rotateY(-8.2deg);
}
.eye-1-2-2-3-1::before {
background-color: color-mix(in oklch, var(--color), black 8%);
clip-path: polygon(0% 0%, 97% 34.6%, 100% 100%, 0% 91%);
}
.eye-1-2-2-3-1-1 {
left: 9.4em; top: 5.7em;
width: 6.3em; height: 10.9em;
transform: rotateZ(-1.5deg) rotateY(-56.4deg);
}
.eye-1-2-2-3-1-1::before {
background-color: color-mix(in oklch, var(--color), black 23%);
clip-path: polygon(0% 0%, 99% 23.4%, 100% 100%, 0% 98.1%);
}
.eye-1-2-2-3-2 {
left: -1.1em; top: 100%;
width: 12.9em; height: 48.6em;
transform: rotateZ(-2.5deg) rotateX(19.5deg);
}
.eye-1-2-2-3-2::before {
background-color: color-mix(in oklch, var(--color), black 0%);
clip-path: polygon(8% 0%, 97% 0%, 100% 51.7%, 37.3% 100%, 0% 97.5%, 20.6% 51.1%);
}
.eye-1-2-2-3-3 {
left: 16.4em; top: -5.6em;
width: 23.8em; height: 41.6em;
transform: rotateZ(14.9deg) rotateY(-48.7deg);
}
.eye-1-2-2-3-3::before {
background-color: color-mix(in oklch, var(--color), black 24%);
clip-path: polygon(0% 14%, 100% 0%, 96.8% 43.6%, 47% 100%, 0% 46.1%);
}
.eye-1-2-2-3-3-1 {
left: 100%;
width: 24.6em; height: 9.7em;
transform: rotateZ(-193.6deg) rotateX(13.3deg);
}
.eye-1-2-2-3-3-1::before {
background-color: color-mix(in oklch, var(--color), black 29%);
clip-path: polygon(0% 0%, 100% 0%, 92% 100%);
}
.eye-1-2-2-3-3-1-1 {
width: 24.6em; height: 5.8em;
transform: rotateZ(23.1deg) rotateX(44deg);
}
.eye-1-2-2-3-3-1-1::before {
background-color: color-mix(in oklch, var(--color), black 40%);
clip-path: polygon(0% 0%, 100% 0%, 89.5% 100%);
}
.eye-1-2-2-3-3-1-1-1 {
width: 22.8em; height: 9.2em;
transform: rotateZ(14.7deg) rotateX(-78.3deg);
}
.eye-1-2-2-3-3-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 45%);
clip-path: polygon(0% 0%, 100% 0%, 7% 100%);
}
.eye-1-2-2-3-3-1-1-1-1 {
left: 100%;
width: 8.4em; height: 23.2em;
transform: rotateZ(66.6deg) rotateY(36.3deg);
}
.eye-1-2-2-3-3-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 36%);
clip-path: polygon(0% 0%, 100% 88.9%, 0% 100%);
}
.eye-1-2-2-3-3-2 {
left: 11.1em; top: 100%;
width: 26.4em; height: 8.3em;
transform: rotateZ(-63deg) rotateX(-32deg);
}
.eye-1-2-2-3-3-2::before {
background-color: color-mix(in oklch, var(--color), black 30%);
clip-path: polygon(0% 0%, 100% 0%, 47.7% 100%);
}
.eye-1-2-2-3-3-2-1 {
width: 15.1em; height: 16.8em;
transform: rotateZ(33.4deg) rotateX(0.3deg);
}
.eye-1-2-2-3-3-2-1::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 0%, 100% 0%, 77.3% 90.1%, 2% 100%);
}
.eye-1-2-2-3-3-2-1-1 {
left: 0.4em; top: 100%;
width: 11.4em; height: 16.3em;
transform: rotateZ(-8.5deg) rotateX(-18.9deg);
}
.eye-1-2-2-3-3-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 22%);
clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 24% 68.5%);
}
.eye-1-2-2-3-3-2-1-1-1 {
left: 2.7em; top: 11.1em;
width: 12.1em; height: 8.5em;
transform: rotateZ(31.4deg) rotateX(17.4deg);
}
.eye-1-2-2-3-3-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 18%);
clip-path: polygon(0% 0%, 82% 0%, 100% 100%);
}
.eye-1-2-2-3-3-2-1-1-1-1 {
left: 9.95em;
width: 11.8em; height: 16.5em;
transform: rotateZ(-14.3deg) rotateY(9.4deg);
}
.eye-1-2-2-3-3-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 14%);
clip-path: polygon(0% 0%, 100% 100%, 0% 53.5%);
}
.eye-1-3 {
left: 59.7em; top: 100%;
width: 15.3em; height: 29.1em;
transform: rotateZ(123.4deg) rotateY(-44.9deg);
}
.eye-1-3::before {
background-color: color-mix(in oklch, var(--color), black 20%);
clip-path: polygon(0% 0%, 84.2% 41.1%, 100% 100%, 0% 87.5%);
}
.eye-1-3-1 {
left: 12.9em; top: 12.1em;
width: 19.2em; height: 19.4em;
transform: rotateZ(-137deg) rotateX(17deg);
}
.eye-1-3-1::before {
background-color: color-mix(in oklch, var(--color), black 4%);
clip-path: polygon(0% 0%, 92.5% 0%, 100% 100%, 13.5% 98.5%);
}
.eye-1-3-1-1 {
left: 100%; top: 100%;
width: 12.1em; height: 16.6em;
transform: rotateZ(91deg) rotateY(-17.1deg);
}
.eye-1-3-1-1::before {
background-color: color-mix(in oklch, var(--color), black 5%);
clip-path: polygon(0% 0%, 100% 26%, 99% 98%, 0% 100%);
}
.eye-1-3-1-1-1 {
left: 100%; top: 4.3em;
width: 14.2em; height: 20.8em;
transform: rotateZ(1deg) rotateY(-10.8deg);
}
.eye-1-3-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 8%);
clip-path: polygon(0% 0%, 100% 100%, 0% 57.1%);
}
.eye-1-3-1-2 {
width: 19.4em; height: 7.6em;
transform: rotateZ(82.3deg) rotateX(11.5deg);
}
.eye-1-3-1-2::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 0%, 100% 0%, 83% 95%, 6.5% 100%);
}
.eye-1-3-1-2-1 {
left: 16.1em; top: 7.2em;
width: 10.8em; height: 27.1em;
transform: rotateZ(-65.4deg) rotateX(16deg);
}
.eye-1-3-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 30%);
clip-path: polygon(0% 0%, 72.9% 0%, 100% 42.4%, 40% 100%, 47% 38.4%);
}
.eye-1-3-1-2-2 {
width: 10.1em; height: 13.8em;
transform: rotateZ(80.7deg) rotateX(3deg);
}
.eye-1-3-1-2-2::before {
background-color: color-mix(in oklch, var(--color), black 23%);
clip-path: polygon(0% 0%, 76.3% 0%, 100% 100%);
}
.eye-2-1-3 {
left: 20.4em; top: 100%;
width: 9.6em; height: 11.4em;
transform: rotateZ(103.9deg) rotateY(11deg);
}
.eye-2-1-3::before {
background-color: color-mix(in oklch, var(--color), black 30%);
clip-path: polygon(0% 0%, 100% 21.5%, 0% 100%);
}
.eye-2-1-3-1 {
top: 100%;
width: 13.1em; height: 15.3em;
transform: rotateZ(-43deg) rotateX(-10deg);
}
.eye-2-1-3-1::before {
background-color: color-mix(in oklch, var(--color), black 27%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.eye-2-1-3-1-1 {
width: 16.7em; height: 15.8em;
transform: rotateZ(66.8deg) rotateX(28.8deg);
}
.eye-2-1-3-1-1::before {
background-color: color-mix(in oklch, var(--color), black 30%);
clip-path: polygon(0% 0%, 100% 0%, 78.5% 100%);
}
.eye-2-1-3-1-1-1 {
left: 100%;
width: 16em; height: 17.9em;
transform: rotateZ(13deg) rotateY(-12.3deg);
}
.eye-2-1-3-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 34%);
clip-path: polygon(0% 0%, 65.4% 35.9%, 100% 45%, 73% 100%, 0% 90%);
}
.eye-2-1-3-1-1-1-1 {
left: 11.6em; top: 17.8em;
width: 12.5em; height: 7.6em;
transform: rotateZ(-65.8deg) rotateX(21.3deg);
}
.eye-2-1-3-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 38%);
clip-path: polygon(0% 0%, 85.5% 0%, 100% 81%, 30.5% 100%);
}
.eye-2-1-3-1-1-1-1-1 {
left: 3.8em; top: 100%;
width: 11.6em; height: 12.7em;
transform: rotateZ(-10deg) rotateX(5deg);
}
.eye-2-1-3-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 43%);
clip-path: polygon(0% 0%, 76% 0%, 100% 100%, 57% 94.1%);
}
.eye-2-1-3-1-1-1-1-1-1 {
left: 6.7em; top: 11.6em;
width: 15.3em; height: 13.3em;
transform: rotateZ(12deg) rotateX(23.9deg);
}
.eye-2-1-3-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 39%);
clip-path: polygon(0% 4%, 0% 0%, 32% 0%, 100% 70%, 79% 100%);
}
.eye-2-1-3-1-1-1-1-1-1-1 {
left: 100%; top: 9.3em;
width: 13.2em; height: 8.7em;
transform: rotateZ(39deg) rotateY(-9.3deg);
}
.eye-2-1-3-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 34%);
clip-path: polygon(0% 0%, 81% 53%, 100% 100%, 0% 66%);
}
.eye-2-1-3-1-1-1-1-1-1-1-1 {
left: 13.3em; top: 9em;
width: 5.2em; height: 4.1em;
transform: rotateZ(-121.4deg) rotateX(3deg);
}
.eye-2-1-3-1-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 46%);
clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 100%);
}
.eye-2-1-1-1 {
top: 11.4em;
width: 21.6em; height: 22.5em;
transform: rotateZ(14.8deg) rotateX(-32.3deg);
}
.eye-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 0%, 21.4% 0%, 84.4% 57.6%, 100% 100%, 21.3% 39.7%);
}
.eye-2-1-1-1-1 {
left: 18.7em; top: 14.6em;
width: 10em; height: 16.1em;
transform: rotateZ(-19.5deg) rotateY(-28.2deg);
}
.eye-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 43%);
clip-path: polygon(0% 0%, 100% 79.6%, 53% 100%, 0% 54%);
}
.eye-2-1-1-1-1-1 {
left: 5.3em; top: 100%;
width: 9em; height: 16.3em;
transform: rotateZ(-35deg) rotateX(28deg);
}
.eye-2-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 50%);
clip-path: polygon(0% 0%, 92% 0%, 100% 100%, 7.5% 88%);
}
.eye-2-1-1-1-1-1-1 {
left: 0.7em; top: 14.3em;
width: 11.2em; height: 15.2em;
transform: rotateZ(12.9deg) rotateX(10.5deg);
}
.eye-2-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 45%);
clip-path: polygon(0% 0%, 77% 0%, 100% 100%, 33% 81.5%);
}
.eye-2-1-1-1-1-1-1-1 {
left: 100%; top: 100%;
width: 13.6em; height: 8em;
transform: rotateZ(111.7deg) rotateY(-35deg);
}
.eye-2-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 50%);
clip-path: polygon(0% 0%, 100% 50.5%, 0% 100%);
}
.eye-2-1-1-1-1-1-1-1-1 {
width: 11.5em; height: 14.2em;
transform: rotateZ(-73.4deg) rotateY(-5.5deg);
}
.eye-2-1-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 39%);
clip-path: polygon(0% 0%, 100% 99.3%, 0% 100%);
}
.eye-2-1-1-1-1-1-1-1-1-1 {
top: 100%;
width: 14.5em; height: 12.7em;
transform: rotateZ(-0.6deg) rotateX(25.7deg);
}
.eye-2-1-1-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 46%);
clip-path: polygon(0% 0%, 93% 0%, 100% 100%);
}
.eye-2-1-1-1-1-1-1-1-1-1-1 {
width: 19.3em; height: 3.4em;
transform: rotateZ(41.2deg) rotateX(14.2deg);
}
.eye-2-1-1-1-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 38%);
clip-path: polygon(0% 0%, 100% 0%, 78.5% 100%);
}
.eye-2-1-1-1-1-1-1-1-2 {
top: 100%;
width: 14.2em; height: 6.3em;
transform: rotateZ(-16.3deg) rotateX(71.5deg);
}
.eye-2-1-1-1-1-1-1-1-2::before {
background-color: color-mix(in oklch, var(--color), black 38%);
clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
}
.eye-2-1-1-1-1-1-1-1-2-1 {
left: 100%;
width: 16.4em; height: 6.9em;
transform: rotateZ(24.2deg) rotateY(-13.4deg);
}
.eye-2-1-1-1-1-1-1-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 33%);
clip-path: polygon(0% 0%, 95% 0%, 100% 64%, 0% 100%);
}
.eye-2-1-1-1-2 {
left: 100%; top: 100%;
width: 3.4em; height: 21.7em;
transform: rotateZ(128.5deg) rotateY(-115.9deg);
}
.eye-2-1-1-1-2::before {
background-color: color-mix(in oklch, var(--color), black 28%);
clip-path: polygon(0% 0%, 95.5% 5.4%, 100% 100%, 0% 100%);
}
.eye-2-1-1-1-2-1 {
left: 3.2em; top: 1.2em;
width: 4.3em; height: 9em;
transform: rotateZ(-159.5deg) rotateX(-6.4deg);
}
.eye-2-1-1-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 35%);
clip-path: polygon(0% 0%, 79% 0%, 100% 100%);
}
.eye-2-1-1-1-2-1-1 {
width: 10em; height: 3.4em;
transform: rotateZ(64.5deg) rotateX(-53deg);
}
.eye-2-1-1-1-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 41%);
clip-path: polygon(0% 0%, 100% 0%, 66% 100%);
}
.eye-2-1-1-1-2-1-1-1 {
left: 6.6em; top: 100%;
width: 5.3em; height: 14.5em;
transform: rotateZ(-46.5deg) rotateX(16.5deg);
}
.eye-2-1-1-1-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 38%);
clip-path: polygon(0% 0%, 91% 1%, 100% 100%, 15% 96.5%);
}
.eye-2-1-1-1-2-1-1-1-1 {
left: 100%; top: 100%;
width: 13em; height: 5.9em;
transform: rotateZ(96.1deg) rotateY(-0.6deg);
}
.eye-2-1-1-1-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 42%);
clip-path: polygon(0% 0%, 100% 7%, 75.5% 100%, 0% 77%);
}
.eye-2-1-1-1-2-2 {
top: 100%;
width: 3.4em; height: 9.8em;
transform: rotateX(22.1deg);
}
.eye-2-1-1-1-2-2::before {
background-color: color-mix(in oklch, var(--color), black 18%);
clip-path: polygon(0% 0%, 100% 0%, 54% 100%);
}
.eye-2-1-3-1-2 {
left: 100%;
width: 4.3em; height: 16.6em;
transform: rotateZ(23.2deg) rotateY(-81deg);
}
.eye-2-1-3-1-2::before {
background-color: color-mix(in oklch, var(--color), black 19%);
clip-path: polygon(0% 0%, 100% 94.5%, 0% 100%);
}
.eye-2-1-3-1-2-1 {
top: 100%;
width: 8.6em; height: 11.8em;
transform: rotateZ(-12.5deg) rotateX(-3.8deg);
}
.eye-2-1-3-1-2-1::before {
background-color: color-mix(in oklch, var(--color), black 15%);
clip-path: polygon(0% 0%, 51% 0%, 97.5% 88.2%, 45% 100%);
}
.eye-2-1-3-1-2-1-1 {
left: 3.9em; top: 11.8em;
width: 4.7em; height: 5.7em;
transform: rotateZ(-17.1deg) rotateX(-14.8deg);
}
.eye-2-1-3-1-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 20%);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
.eye-2-1-3-1-2-1-1-1 {
left: 100%;
width: 8em; height: 7.4em;
transform: rotateZ(39.6deg) rotateY(-2deg);
}
.eye-2-1-3-1-2-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 0%, 100% 87.5%, 0% 100%);
}
.eye-2-1-3-1-2-1-1-1-1 {
top: 100%;
width: 8em; height: 4.1em;
transform: rotateZ(-6.6deg) rotateX(-20.5deg);
}
.eye-2-1-3-1-2-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 23%);
clip-path: polygon(0% 0%, 100% 0%, 62% 100%);
}
.eye-2-1-3-1-2-1-1-1-1-1 {
left: 4.8em; top: 4.3em;
width: 5.4em; height: 12.9em;
transform: rotateZ(-53.2deg) rotateX(-7.9deg);
}
.eye-2-1-3-1-2-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 29%);
clip-path: polygon(4% 0%, 100% 0%, 100% 90%, 0% 100%);
}
.eye-2-1-3-1-2-1-1-1-1-1-1 {
width: 7.7em; height: 13.8em;
left: -2.1em; top: 13.3em;
transform: rotateZ(-13.5deg) rotateX(-29.7deg);
}
.eye-2-1-3-1-2-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 34%);
clip-path: polygon(26% 0%, 100% 0%, 53% 97.5%, 0% 100%);
}
.eye-2-1-3-1-2-1-1-1-1-1-1-1 {
top: 100%;
width: 4.2em; height: 11.5em;
transform: rotateZ(-5.4deg) rotateX(11.5deg);
}
.eye-2-1-3-1-2-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 40%);
clip-path: polygon(0% 0%, 98% 0%, 83% 82%, 23% 100%);
}
.eye-2-1-3-1-2-1-1-1-1-1-1-1-1 {
left: 3.5em; top: 9.4em;
width: 2em; height: 5.1em;
transform: rotateZ(50deg) rotateY(71deg);
}
.eye-2-1-3-1-2-1-1-1-1-1-1-1-1::before {
background-color: color-mix(in oklch, var(--color), black 29%);
clip-path: polygon(0% 0%, 100% 19%, 100% 100%, 0% 64%);
}
.eye-2-1-3-1-2-2 {
width: 8em; height: 16.3em;
transform: rotateZ(-15.3deg) rotateY(80deg);
}
.eye-2-1-3-1-2-2::before {
background-color: color-mix(in oklch, var(--color), black 20%);
clip-path: polygon(0% 0%, 100% 60%, 0% 100%);
}
.eye-2-1-3-1-2-2-1 {
width: 12.2em; height: 16.6em;
transform: rotateZ(-39.5deg) rotateY(21deg);
}
.eye-2-1-3-1-2-2-1::before {
background-color: color-mix(in oklch, var(--color), black 18%);
clip-path: polygon(0% 0%, 100% 100%, 0% 76%);
}
.eye-2-1-3-1-2-2-2 {
top: 100%;
width: 10.4em; height: 6.4em;
transform: rotateZ(-39.4deg) rotateX(-18deg);
}
.eye-2-1-3-1-2-2-2::before {
background-color: color-mix(in oklch, var(--color), black 12%);
clip-path: polygon(0% 0%, 100% 0%, 96.5% 100%, 12% 95%);
}
.eye-2-1-3-1-2-2-2-1 {
width: 6.2em; height: 9.2em;
transform: rotateZ(78deg) rotateX(39.8deg);
}
.eye-2-1-3-1-2-2-2-1::before {
background-color: color-mix(in oklch, var(--color), black 18%);
clip-path: polygon(0% 0%, 100% 0%, 99% 100%);
}
.eye-2-1-3-1-2-2-2-2 {
left: 100%;
width: 12em; height: 12.4em;
transform: rotateZ(3.5deg) rotateY(14deg);
}
.eye-2-1-3-1-2-2-2-2::before {
background-color: color-mix(in oklch, var(--color), black 12%);
clip-path: polygon(0% 0%, 100% 35%, 94% 74%, 50% 100%, 0% 80%);
}
.eye-2-1-3-1-2-2-2-2-1 {
left: 100%; top: 4.4em;
width: 3.05em; height: 6.8em;
transform: rotateZ(8.5deg) rotateY(-54deg);
}
.eye-2-1-3-1-2-2-2-2-1::before {
background-color: color-mix(in oklch, var(--color), black 22%);
clip-path: polygon(0% 0%, 100% 100%, 0% 71%);
}
.eye-2-1-3-1-2-2-2-2-1-1 {
top: 4.8em;
width: 16.45em; height: 5.75em;
transform: rotateZ(33.2deg) rotateX(42.8deg);
}
.eye-2-1-3-1-2-2-2-2-1-1::before {
background-color: color-mix(in oklch, var(--color), black 70%);
clip-path: polygon(22.5% 0%, 100% 100%, 0% 0%);
}
.eye-5 {
left: 49.8em; top: 40em;
width: 13.6em; height: 13.6em;
transform: translateZ(32.2em) rotateZ(0deg) rotateX(90deg);
}
.eye-5::before {
background-color: color-mix(in oklch, var(--color), black 0%);
clip-path: polygon( calc(6.8em + 6.8em * sin(2* 1* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 1* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 2* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 2* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 3* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 3* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 4* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 4* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 5* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 5* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 6* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 6* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 7* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 7* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 8* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 8* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 9* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 9* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 10* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 10* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 11* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 11* 3.14 / 12)), calc(6.8em + 6.8em * sin(2* 12* 3.14 / 12)) calc(6.8em + 6.8em * cos(2* 12* 3.14 / 12)));
}
.eye-5-1 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 1* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 1* 3.14 / 12));
transform: rotateZ(75deg) rotateY(-90deg);
}
.eye-5-2 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 2* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 2* 3.14 / 12));
transform: rotateZ(45deg) rotateY(-90deg);
}
.eye-5-2::before {
background-color: color-mix(in oklch, var(--color), black 20%);
}
.eye-5-3 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 3* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 3* 3.14 / 12));
transform: rotateZ(15deg) rotateY(-90deg);
}
.eye-5-3::before {
background-color: color-mix(in oklch, var(--color), black 30%);
}
.eye-5-4 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 4* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 4* 3.14 / 12));
transform: rotateZ(-15deg) rotateY(-90deg);
}
.eye-5-4::before {
background-color: color-mix(in oklch, var(--color), black 31%);
}
.eye-5-5 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 5* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 5* 3.14 / 12));
transform: rotateZ(-45deg) rotateY(-90deg);
}
.eye-5-5::before {
background-color: color-mix(in oklch, var(--color), black 30%);
}
.eye-5-6 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 6* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 6* 3.14 / 12));
transform: rotateZ(-75deg) rotateY(-90deg);
}
.eye-5-6::before {
background-color: color-mix(in oklch, var(--color), black 37%);
}
.eye-5-7 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 7* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 7* 3.14 / 12));
transform: rotateZ(-105deg) rotateY(-90deg);
}
.eye-5-7::before {
background-color: color-mix(in oklch, var(--color), black 35%);
}
.eye-5-8 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 8* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 8* 3.14 / 12));
transform: rotateZ(-135deg) rotateY(-90deg);
}
.eye-5-8::before {
background-color: color-mix(in oklch, var(--color), black 30%);
}
.eye-5-9 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 9* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 9* 3.14 / 12));
transform: rotateZ(195deg) rotateY(-90deg);
}
.eye-5-9::before {
background-color: color-mix(in oklch, var(--color), black 26%);
}
.eye-5-10 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 10* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 10* 3.14 / 12));
transform: rotateZ(165deg) rotateY(-90deg);
}
.eye-5-10::before {
background-color: color-mix(in oklch, var(--color), black 23%);
}
.eye-5-11 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 11* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 11* 3.14 / 12));
transform: rotateZ(135deg) rotateY(-90deg);
}
.eye-5-11::before {
background-color: color-mix(in oklch, var(--color), black 17%);
}
.eye-5-12 {
width: 12em; height: 3.5em;
left: calc(6.8em + 6.8em * sin(2* 12* 3.14 / 12));
top: calc(6.8em + 6.8em * cos(2* 12* 3.14 / 12));
transform: rotateZ(105deg) rotateY(-90deg);
}
.eye-5-12::before {
background-color: color-mix(in oklch, var(--color), black 30%);
}
.eye-6 {
left: 42.4em; top: 33em;
width: 15em; height: 15em;
transform: translateZ(23.2em) rotateX(90deg);
}
.eye-6::before {
background-color: color-mix(in oklch, var(--color), black 8%);
clip-path: polygon( calc(7.5em + 7.5em * sin(2* 1* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 1* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 2* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 2* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 3* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 3* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 4* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 4* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 5* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 5* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 6* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 6* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 7* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 7* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 8* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 8* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 9* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 9* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 10* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 10* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 11* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 11* 3.14 / 12)), calc(7.5em + 7.5em * sin(2* 12* 3.14 / 12)) calc(7.5em + 7.5em * cos(2* 12* 3.14 / 12)));
}
.eye-6-1 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 1* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 1* 3.14 / 12));
transform: rotateZ(75deg) rotateY(40deg);
}
.eye-6-1::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-2 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 2* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 2* 3.14 / 12));
transform: rotateZ(45deg) rotateY(40deg);
}
.eye-6-2::before {
top: -2em;
height: 7.9em;
background-color: green;
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-3 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 3* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 3* 3.14 / 12));
transform: rotateZ(15deg) rotateY(40deg);
}
.eye-6-3::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 10%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-4 {
width: 10em;
height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 4* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 4* 3.14 / 12));
transform: rotateZ(-15deg) rotateY(40deg);
}
.eye-6-4::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 7%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-5 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 5* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 5* 3.14 / 12));
transform: rotateZ(-45deg) rotateY(40deg);
}
.eye-6-5::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 3%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-6 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 6* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 6* 3.14 / 12));
transform: rotateZ(-75deg) rotateY(40deg);
}
.eye-6-6::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 3%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-7 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 7* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 7* 3.14 / 12));
transform: rotateZ(-105deg) rotateY(40deg);
}
.eye-6-7::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 3%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-8 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 8* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 8* 3.14 / 12));
transform: rotateZ(-135deg) rotateY(40deg);
}
.eye-6-8::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 3%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-9 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 9* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 9* 3.14 / 12));
transform: rotateZ(195deg) rotateY(40deg);
}
.eye-6-9::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 7%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-10 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 10* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 10* 3.14 / 12));
transform: rotateZ(165deg) rotateY(40deg);
}
.eye-6-10::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 10%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-11 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 11* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 11* 3.14 / 12));
transform: rotateZ(135deg) rotateY(40deg);
}
.eye-6-11::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 14%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-12 {
width: 10em; height: 3.9em;
left: calc(7.5em + 7.5em * sin(2* 12* 3.14 / 12));
top: calc(7.5em + 7.5em * cos(2* 12* 3.14 / 12));
transform: rotateZ(105deg) rotateY(40deg);
}
.eye-6-12::before {
top: -2em;
height: 7.9em;
background-color: color-mix(in oklch, var(--color), black 20%);
clip-path: polygon(0% 26%, 100% 0%, 100% 100%, 0% 74%);
}
.eye-6-1-1 {
left: 100%; top: -10.2em;
width: 5.5em; height: 16.5em;
transform: rotateY(-105deg);
}
.eye-6-1-1::before {
background-color: color-mix(in oklch, var(--color), black 34%);
clip-path: polygon(0% 21.5%, 100% 12.5%, 69% 100%, 0% 97.6%);
}
.eye-6-3-1 {
left: 100%; top: -2.5em;
width: 8em; height: 13.95em;
transform: rotateY(-104deg);
}
.eye-6-3-1::before {
background-color: color-mix(in oklch, var(--color), black 26%);
clip-path: polygon(0% 3.5%, 100% 0%, 48% 100%, 0% 93.6%);
}
.eye-6-4-1 {
left: 100%; top: -2.7em;
width: 4.8em; height: 8.6em;
transform: rotateY(-87.7deg);
}
.eye-6-4-1::before {
background-color: color-mix(in oklch, var(--color), black 25%);
clip-path: polygon(0% 8%, 100% 17%, 0% 100%);
}
.eye-6-5-1 {
left: 100%; top: -2.7em;
width: 5.7em; height: 9.3em;
transform: rotateY(-87.8deg);
}
.eye-6-5-1::before {
background-color: color-mix(in oklch, var(--color), black 45%);
clip-path: polygon(0% 7%, 100% 0%, 100% 23%, 0% 93%);
}
.eye-6-6-1 {
left: 100%; top: -2.7em;
width: 5.5em; height: 10.6em;
transform: rotateY(-94deg);
}
.eye-6-6-1::before {
background-color: color-mix(in oklch, var(--color), black 55%);
clip-path: polygon(0% 6%, 76% 16%, 86% 100%, 0% 81%);
}
.eye-6-7-1 {
left: 100%; top: -2.7em;
width: 5.5em; height: 10em;
transform: rotateY(-105deg);
}
.eye-6-7-1::before {
background-color: color-mix(in oklch, var(--color), black 55%);
clip-path: polygon(0% 6%, 69% 0%, 44% 100%, 0% 86%);
}
.eye-6-8-1 {
left: 100%; top: -2.7em;
width: 8.5em; height: 9.3em;
transform: rotateY(-105deg);
}
.eye-6-8-1::before {
background-color: color-mix(in oklch, var(--color), black 51%);
clip-path: polygon(0% 7%, 47% 0%, 70% 100%, 0% 92%);
}
.eye-6-9-1 {
left: 100%; top: -2.7em;
width: 7.5em; height: 9.3em;
transform: rotateY(-105deg);
}
.eye-6-9-1::before {
background-color: color-mix(in oklch, var(--color), black 46%);
clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 92%);
}
.eye-6-10-1 {
left: 100%; top: -2.9em;
width: 16.3em; height: 16.7em;
transform: rotateY(-105deg);
}
.eye-6-10-1::before {
background-color: color-mix(in oklch, var(--color), black 42%);
clip-path: polygon(0% 5.5%, 40% 0%, 100% 100%, 41.7% 58.2%, 0% 52.5%);
}
.eye-6-11-1 {
left: 100%; top: -2.7em;
width: 6.9em; height: 9.3em;
transform: rotateY(-105deg);
}
.eye-6-11-1::before {
background-color: color-mix(in oklch, var(--color), black 39%);
clip-path: polygon(0% 8%, 85% 0%, 100% 100%, 0% 92%);
}
.eye-6-12-1 {
left: 100%; top: -2.7em;
width: 5.5em; height: 9.3em;
transform: rotateY(-105deg);
}
.eye-6-12-1::before {
background-color: color-mix(in oklch, var(--color), black 36%);
clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 92%);
}
.eye-6-3-1-1 {
left: 1.65em; top: 8.7em;
width: 3.2em; height: 5.7em;
transform: rotateZ(-22.6deg) rotateY(53.6deg);
}
.eye-6-3-1-1::before {
background-color: color-mix(in oklch, var(--color), black 18%);
clip-path: polygon(0% 0%, 100% 76%, 0% 100%);
}
.eye-6-4-1-1 {
left: 4.8em; top: 1.4em;
width: 7.5em; height: 8.7em;
transform: rotateZ(33.5deg) rotateY(-19.1deg);
}
.eye-6-4-1-1::before {
background-color: color-mix(in oklch, var(--color), black 22%);
clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 100%);
}
.eye-6-5-1-1 {
left: 6em; top: 1.8em;
width: 4.7em; height: 9.1em;
transform: rotateZ(41.4deg) rotateY(-7.6deg);
}
.eye-6-5-1-1::before {
background-color: color-mix(in oklch, var(--color), black 27%);
clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 100%);
}
.eye-6-7-1-1 {
left: 2.4em; top: -1.5em;
width: 3em; height: 11.7em;
transform: rotateY(14deg);
}
.eye-6-7-1-1::before {
background-color: color-mix(in oklch, var(--color), black 40%);
clip-path: polygon(0% 14%, 69% 0%, 100% 100%, 0% 100%);
}
.eye-6-8-1-1 {
left: 2.7em; top: -6.6em;
width: 4.8em; height: 15.5em;
transform: rotateY(26deg);
}
.eye-6-8-1-1::before {
background-color: color-mix(in oklch, var(--color), black 29%);
clip-path: polygon(0% 44%, 100% 0%, 100% 90%, 0% 100%);
}
.eye-6-9-1-1 {
width: 16em; height: 15.9em;
left: 8.8em; top: -4.2em;
transform: rotateZ(25deg) rotateY(51.6deg);
}
.eye-6-9-1-1::before {
background-color: color-mix(in oklch, var(--color), black 33%);
clip-path: polygon(0% 29%, 65% 0%, 100% 100%, 40% 53%, 0% 90%);
}
.eye-6-10-1-1 {
left: 6.28em;
width: 7.5em; height: 19em;
transform: rotateZ(-30.7deg) rotateY(91.6deg);
}
.eye-6-10-1-1::before {
background-color: color-mix(in oklch, var(--color), black 36%);
clip-path: polygon(0% 0%, 40% 0%, 100% 84%, 0% 100%);
}
.eye-6-11-1-1 {
left: 5.4em; top: 0.05em;
width: 2.7em; height: 10.55em;
transform: rotateZ(-5.9deg) rotateY(98.7deg);
}
.eye-6-11-1-1::before {
background-color: color-mix(in oklch, var(--color), black 46%);
clip-path: polygon(0% 0%, 53% 0%, 100% 100%, 0% 87%);
}
.eye-6-12-1-1 {
left: 3.4em; top: 0.2em;
width: 1.3em; height: 9.8em;
transform: rotateZ(-12.5deg) rotateY(108.8deg);
}
.eye-6-12-1-1::before {
background-color: color-mix(in oklch, var(--color), black 56%);
clip-path: polygon(0% 0%, 100% 100%, 0% 95%);
}html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Pure CSS 3D David Eye</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="scene rotate">
<div class="eye">
<div class="eye-1">
<div class="eye-1-1">
<div class="eye-1-1-1">
<div class="eye-1-1-1-1">
<div class="eye-1-1-1-1-1"></div>
</div>
</div>
</div>
<div class="eye-1-2">
<div class="eye-1-2-1">
<div class="eye-1-2-1-1">
<div class="eye-1-2-1-1-1">
<div class="eye-1-2-1-1-1-1"></div>
</div>
<div class="eye-1-2-1-1-2">
<div class="eye-1-2-1-1-2-1">
<div class="eye-1-2-1-1-2-1-1">
<div class="eye-1-2-1-1-2-1-1-1"></div>
</div>
</div>
</div>
</div>
<div class="eye-1-2-1-2">
<div class="eye-1-2-1-2-1"></div>
<div class="eye-1-2-1-2-2">
<div class="eye-1-2-1-2-2-1"></div>
</div>
</div>
</div>
<div class="eye-1-2-2">
<div class="eye-1-2-2-1">
<div class="eye-1-2-2-1-1"></div>
</div>
<div class="eye-1-2-2-2">
<div class="eye-1-2-2-2-1">
<div class="eye-1-2-2-2-1-1">
<div class="eye-1-2-2-2-1-1-1">
<div class="eye-1-2-2-2-1-1-1-1"></div>
<div class="eye-1-2-2-2-1-1-1-2"></div>
</div>
</div>
</div>
</div>
<div class="eye-1-2-2-3">
<div class="eye-1-2-2-3-1">
<div class="eye-1-2-2-3-1-1"></div>
</div>
<div class="eye-1-2-2-3-2"></div>
<div class="eye-1-2-2-3-3">
<div class="eye-1-2-2-3-3-1">
<div class="eye-1-2-2-3-3-1-1">
<div class="eye-1-2-2-3-3-1-1-1">
<div class="eye-1-2-2-3-3-1-1-1-1"></div>
</div>
</div>
</div>
<div class="eye-1-2-2-3-3-2">
<div class="eye-1-2-2-3-3-2-1">
<div class="eye-1-2-2-3-3-2-1-1">
<div class="eye-1-2-2-3-3-2-1-1-1">
<div class="eye-1-2-2-3-3-2-1-1-1-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-1-3">
<div class="eye-1-3-1">
<div class="eye-1-3-1-1">
<div class="eye-1-3-1-1-1"></div>
</div>
<div class="eye-1-3-1-2">
<div class="eye-1-3-1-2-1"></div>
<div class="eye-1-3-1-2-2"></div>
</div>
</div>
</div>
</div>
<div class="eye-2">
<div class="eye-2-1">
<div class="eye-2-1-1">
<div class="eye-2-1-1-1">
<div class="eye-2-1-1-1-1">
<div class="eye-2-1-1-1-1-1">
<div class="eye-2-1-1-1-1-1-1">
<div class="eye-2-1-1-1-1-1-1-1">
<div class="eye-2-1-1-1-1-1-1-1-1">
<div class="eye-2-1-1-1-1-1-1-1-1-1">
<div class="eye-2-1-1-1-1-1-1-1-1-1-1"></div>
</div>
</div>
<div class="eye-2-1-1-1-1-1-1-1-2">
<div class="eye-2-1-1-1-1-1-1-1-2-1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-2-1-1-1-2">
<div class="eye-2-1-1-1-2-1">
<div class="eye-2-1-1-1-2-1-1">
<div class="eye-2-1-1-1-2-1-1-1">
<div class="eye-2-1-1-1-2-1-1-1-1"></div>
</div>
</div>
</div>
<div class="eye-2-1-1-1-2-2"></div>
</div>
</div>
</div>
<div class="eye-2-1-2">
<div class="eye-2-1-2-1">
<div class="eye-2-1-2-1-1">
<div class="eye-2-1-2-1-1-1">
<div class="eye-2-1-2-1-1-1-1">
<div class="eye-2-1-2-1-1-1-1-1">
<div class="eye-2-1-2-1-1-1-1-1-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-2-1-3">
<div class="eye-2-1-3-1">
<div class="eye-2-1-3-1-1">
<div class="eye-2-1-3-1-1-1">
<div class="eye-2-1-3-1-1-1-1">
<div class="eye-2-1-3-1-1-1-1-1">
<div class="eye-2-1-3-1-1-1-1-1-1">
<div class="eye-2-1-3-1-1-1-1-1-1-1">
<div class="eye-2-1-3-1-1-1-1-1-1-1-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-2-1-3-1-2">
<div class="eye-2-1-3-1-2-1">
<div class="eye-2-1-3-1-2-1-1">
<div class="eye-2-1-3-1-2-1-1-1">
<div class="eye-2-1-3-1-2-1-1-1-1">
<div class="eye-2-1-3-1-2-1-1-1-1-1">
<div class="eye-2-1-3-1-2-1-1-1-1-1-1">
<div class="eye-2-1-3-1-2-1-1-1-1-1-1-1">
<div class="eye-2-1-3-1-2-1-1-1-1-1-1-1-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-2-1-3-1-2-2">
<div class="eye-2-1-3-1-2-2-1"></div>
<div class="eye-2-1-3-1-2-2-2">
<div class="eye-2-1-3-1-2-2-2-1"></div>
<div class="eye-2-1-3-1-2-2-2-2">
<div class="eye-2-1-3-1-2-2-2-2-1">
<div class="eye-2-1-3-1-2-2-2-2-1-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-3">
<div class="eye-3-1">
<div class="eye-3-1-1"></div>
<div class="eye-3-1-2">
<div class="eye-3-1-2-1">
<div class="eye-3-1-2-1-1">
<div class="eye-3-1-2-1-1-1">
<div class="eye-3-1-2-1-1-1-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-4">
<div class="eye-4-1">
<div class="eye-4-1-1">
<div class="eye-4-1-1-1">
<div class="eye-4-1-1-1-1">
<div class="eye-4-1-1-1-1-1">
<div class="eye-4-1-1-1-1-1-1">
<div class="eye-4-1-1-1-1-1-1-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="eye-5">
<div class="eye-5-1"></div>
<div class="eye-5-2"></div>
<div class="eye-5-3"></div>
<div class="eye-5-4"></div>
<div class="eye-5-5"></div>
<div class="eye-5-6"></div>
<div class="eye-5-7"></div>
<div class="eye-5-8"></div>
<div class="eye-5-9"></div>
<div class="eye-5-10"></div>
<div class="eye-5-11"></div>
<div class="eye-5-12"></div>
</div>
<div class="eye-6">
<div class="eye-6-1">
<div class="eye-6-1-1"></div>
</div>
<div class="eye-6-2"></div>
<div class="eye-6-3">
<div class="eye-6-3-1">
<div class="eye-6-3-1-1"></div>
</div>
</div>
<div class="eye-6-4">
<div class="eye-6-4-1">
<div class="eye-6-4-1-1"></div>
</div>
</div>
<div class="eye-6-5">
<div class="eye-6-5-1">
<div class="eye-6-5-1-1"></div>
</div>
</div>
<div class="eye-6-6">
<div class="eye-6-6-1"></div>
</div>
<div class="eye-6-7">
<div class="eye-6-7-1">
<div class="eye-6-7-1-1"></div>
</div>
</div>
<div class="eye-6-8">
<div class="eye-6-8-1">
<div class="eye-6-8-1-1"></div>
</div>
</div>
<div class="eye-6-9">
<div class="eye-6-9-1">
<div class="eye-6-9-1-1"></div>
</div>
</div>
<div class="eye-6-10">
<div class="eye-6-10-1">
<div class="eye-6-10-1-1"></div>
</div>
</div>
<div class="eye-6-11">
<div class="eye-6-11-1">
<div class="eye-6-11-1-1"></div>
</div>
</div>
<div class="eye-6-12">
<div class="eye-6-12-1">
<div class="eye-6-12-1-1"></div>
</div>
</div>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
页:
[1]