<style>
/* 一级容器 ：提供景深（基于Z轴）*/
.pa {
width: 1024px;
height: 800px;
border: thick double gray;
perspective: 2000px; /* 景深 */
margin: 20px auto 0;
position: relative;
}
/* 二级容器 ：提供3d舞台 */
.ma {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d; /* 3d场景 */
}
/* .ma伪元素 ：模拟柱子 */
.ma::before {
content: '';
width: 40px;
height: 100%;
left: calc(50% - 20px);
background: linear-gradient(90deg, silver, gray, silver);
border-radius: 20px;
transform: rotateY(45deg);
position: absolute;
}
/* 目标元素 ：3d场景中的演员 */
.son {
left: calc(50% - 30px);
top: calc(35%);
width: 60px;
height: 60px;
background: linear-gradient(135deg, lightgreen, yellow);
box-shadow: 2px 2px 16px rgba(0,0,0,.25);
border-radius: 50%;
animation: move 10s linear infinite;
position: absolute;
}
/* 动画路径中均摊位置 */
.son:nth-of-type(2) { animation-delay: -2s; }
.son:nth-of-type(3) { animation-delay: -4s; }
.son:nth-of-type(4) { animation-delay: -6s; }
.son:nth-of-type(5) { animation-delay: -8s; }
/* 关键帧动画 ：相抵路径动画 + 3d变换（Z轴位置）*/
@keyframes move {
0% { transform: translateZ(0) rotateZ(0) translateX(200px); }
25% { transform: translateZ(420px) rotateZ(90deg) translateX(200px); }
50% { transform: translateZ(0) rotateZ(180deg) translateX(200px); }
75% { transform: translateZ(-1600px) rotateZ(270deg) translateX(200px); }
100% { transform: translateZ(0) rotateZ(360deg) translateX(200px); }
}
</style>
<div class="pa">
<div class="ma">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</div>
| 
发表于