效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/oagrvz可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。https://scrimba.com/p/pEgDAM/cRbqJcD源代码下载每日前端实战系列的全部源代码请从 github 下载：https://github.com/comehope/front-end-daily-challenges代码解读定义 dom，只有 1 个元素：<div class=“spinner”></div>居中显示：body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: silver;}定义容器尺寸：.spinner { width: 50vmin; height: 50vmin; position: relative;}用 before 伪元素画出 1 个像宝路薄荷糖状的黑色圆环：.spinner::before { content: ‘’; position: absolute; box-sizing: border-box; width: inherit; height: inherit; border: 12.5vmin solid; border-radius: 50%;}接下来制作动画效果。设置透视景深：body { perspective: 400px;}让圆环在 z 轴上运动：.spinner::before { animation: spin 1.5s ease-in-out infinite both reverse;}@keyframes spin { 0%, 100% { transform: translateZ(10vmin); } 60% { transform: translateZ(-10vmin); }}让圆环在 z 轴距离较大时稍稍倾斜：@keyframes spin { 0%, 100% { transform: translateZ(10vmin) rotateX(25deg); } 60% { transform: translateZ(-10vmin); }}增加缩放效果：@keyframes spin { 0%, 100% { transform: translateZ(10vmin) rotateX(25deg); } 33% { transform: translateZ(-10vmin) scale(0.4); } 60% { transform: translateZ(-10vmin); }}用 after 伪元素再画出一个白色的圆环，并且让它的动画延迟动画总长的一半时间：.spinner::before,.spinner::after { /略/ animation: spin 1.5s ease-in-out infinite both reverse;}.spinner::after { border-color: white; animation-delay: -0.75s;}接下来制作容器的动画效果，为了不受子元素动画的影响，先暂时屏蔽伪元素的动画效果。.spinner::before,.spinner::after { /* animation: spin 1.5s ease-in-out infinite both reverse; */}增加容器沿 x 轴旋转的动画效果，动画时间为子元素动画时间的2倍：.spinner { animation: wobble 3s ease-in-out infinite;}@keyframes wobble { 0%, 100% { transform: rotateX(15deg); } 50% { transform: rotateX(60deg); }}增加容器沿 y 轴旋转的动画效果：@keyframes wobble { 0%, 100% { transform: rotateX(15deg) rotateY(60deg); } 50% { transform: rotateX(60deg) rotateY(-60deg); }}增加容器整体旋转的动画效果：@keyframes wobble { 0%, 100% { transform: rotateX(15deg) rotateY(60deg); } 50% { transform: rotateX(60deg) rotateY(-60deg) rotate(180deg); }}打开子元素的动画效果，使子元素的动画效果和容器的动画效果叠加：.spinner::before,.spinner::after { animation: spin 1.5s ease-in-out infinite both reverse;}最后，使子元素在 3d 空间上运动：.spinner { transform-style: preserve-3d;}大功告成！