效果演示
创建了一个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。