效果演示

创建了一个3D机器人摄像头效果。

HTML

<div class="modelViewPort"><div class="eva"><div class="head"><div class="eyeChamber"><div class="eye"></div><div class="eye"></div></div></div><div class="body"><div class="hand"></div><div class="hand"></div><div class="scannerThing"></div><div class="scannerOrigin"></div></div></div>
</div>

• modelViewPort类包含.eva类的div元素，它代表模型本身。
• .eva类又包含了.head和.body两个部分，分别代表模型的头部和身体。
• 头部包含两个.eye元素，代表眼睛。
• 身体包含两个.hand元素代表手，一个.scannerThing代表扫描器的光束，以及一个.scannerOrigin代表扫描器的起点。

CSS

.modelViewPort {perspective: 1000px;width: 20rem;aspect-ratio: 1;border-radius: 50%;display: flex;justify-content: center;align-items: center;background: #000;overflow: hidden;
}.eva {--EVA-ROTATION-DURATION: 4s;transform-style: preserve-3d;animation: rotateRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}.head {position: relative;width: 6rem;height: 4rem;border-radius: 48% 53% 45% 55% / 79% 79% 20% 22%;background: linear-gradient(to right, white 45%, gray);
}.eyeChamber {width: 4.5rem;height: 2.75rem;position: relative;left: 50%;top: 55%;border-radius: 45% 53% 45% 48% / 62% 59% 35% 34%;background-color: #0c203c;box-shadow: 0px 0px 2px 2px white, inset 0px 0px 0px 2px black;transform: translate(-50%, -50%);animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}.eye {width: 1.2rem;height: 1.5rem;position: absolute;border-radius: 50%;
}.eye:first-child {left: 12px;top: 50%;background: repeating-linear-gradient(65deg,#9bdaeb 0px,#9bdaeb 1px,white 2px);box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;transform: translate(0, -50%) rotate(-65deg);
}.eye:nth-child(2) {right: 12px;top: 50%;background: repeating-linear-gradient(-65deg,#9bdaeb 0px,#9bdaeb 1px,white 2px);box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;transform: translate(0, -50%) rotate(65deg);
}.body {width: 6rem;height: 8rem;position: relative;margin-block-start: 0.25rem;border-radius: 47% 53% 45% 55% / 12% 9% 90% 88%;background: linear-gradient(to right, white 35%, gray);
}.hand {position: absolute;left: -1.5rem;top: 0.75rem;width: 2rem;height: 5.5rem;border-radius: 40%;background: linear-gradient(to left, white 15%, gray);box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.25);transform: rotateY(55deg) rotateZ(10deg);
}.hand:first-child {animation: compensateRotation var(--EVA-ROTATION-DURATION) linear infinite alternate;
}.hand:nth-child(2) {left: 92%;background: linear-gradient(to right, white 15%, gray);transform: rotateY(55deg) rotateZ(-10deg);animation: compensateRotationRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}.scannerThing {width: 0;height: 0;position: absolute;left: 60%;top: 10%;border-top: 180px solid #9bdaeb;border-left: 250px solid transparent;border-right: 250px solid transparent;transform-origin: top left;mask: linear-gradient(to right, white, transparent 35%);animation: glow 2s cubic-bezier(0.86, 0, 0.07, 1) infinite;
}.scannerOrigin {position: absolute;width: 8px;aspect-ratio: 1;border-radius: 50%;left: 60%;top: 10%;background: #9bdaeb;box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite;
}@keyframes rotateRight {from {transform: rotateY(0deg);}to {transform: rotateY(25deg);}
}@keyframes moveRight {from {transform: translate(-50%, -50%);}to {transform: translate(-40%, -50%);}
}@keyframes compensateRotation {from {transform: rotateY(55deg) rotateZ(10deg);}to {transform: rotatey(30deg) rotateZ(10deg);}
}@keyframes compensateRotationRight {from {transform: rotateY(55deg) rotateZ(-10deg);}to {transform: rotateY(70deg) rotateZ(-10deg);}
}@keyframes glow {from {opacity: 0;}20% {opacity: 1;}45% {transform: rotate(-25deg);}75% {transform: rotate(5deg);}100% {opacity: 0;}
}

• modelViewPort类为模型提供了一个视口，设置了透视效果、尺寸、宽高比、边框半径、显示方式、背景颜色和溢出隐藏。
• .eva类定义了模型的3D变换样式，包括一个自定义属性–EVA-ROTATION-DURATION用于定义动画持续时间，以及一个无限循环的rotateRight动画。
• .head类定义了头部的位置、尺寸和背景渐变。
• .eyeChamber类定义了眼睛腔室的位置、尺寸、背景颜色和阴影，以及一个moveRight动画。
• .eye类定义了眼睛的基本样式。
• .body类定义了身体的位置、尺寸和背景渐变。
• .hand类定义了手的位置、尺寸和背景渐变，以及两个手的不同动画。
• .scannerThing和.scannerOrigin类定义了扫描器的样式和动画。
• @keyframes定义了所有的动画效果，包括rotateRight、moveRight、compensateRotation、compensateRotationRight和glow。