整体制作还是非常有难度的，但是用在自己的 404 页面，确实也是非常的酷炫。这个效果，我最早见于 Yusuke Nakaya 大神，完整的代码你可以戳这里：CodePen -- Only CSS: 404 Rolling Box
立方体进度条嗯，下面这个还是借助了立方体。我们来实现一个立方体进度条~
首先，实现一个立方体，结构如下：
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
我们可以把这个立方体想象成一个立体的进度条容器，通过控制 6 面的颜色，我们可以巧妙的得到一种 3D 进度条效果。
当然，其实我们不需要那么多面，4 个面即可，去掉左右，然后利用渐变修改一下立方体各个面的颜色，去掉 border，核心的 CSS 代码如下：
.demo-cube { position: relative; .cube { position: absolute; top: 50%; left: 50%; width: 300px; height: 100px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(-33.5deg); li { position: absolute; width: 300px; height: 100px; background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6)); } .top { transform: rotateX(90deg) translateZ(50px); } .bottom { transform: rotateX(-90deg) translateZ(50px); } .front { transform: translateZ(50px); } .back { transform: rotateX(-180deg) translateZ(50px); } } }
我们就可以得到一个非常酷炫的 3D 进度条效果：
利用 CSS Property 给 3D 进度条加上动画
当然，进度条嘛，它需要一个填充动画。由于我们使用的是渐变实现的进度条的进度，需要去控制其中的颜色百分比变化。
而正常而言，CSS 是不支持渐变的动画的，不过这也难不倒我们，因为我们可以使用 CSS @Property 。
简单改造一下代码：
@property --per { syntax: '<percentage>'; inherits: false; initial-value: 0%; } .demo-cube .cube { .top, .front, .bottom, .back { background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1)); animation: perChange 6s infinite; } } @keyframes perChange { 0% { --per: 0%; } 90%, to { --per: 80%; } }
这样，我们就实现了一个会动的 3D 进度条，只需要控制 --per CSS 自定义属性即可，效果如下：
对于 CSS @Property 不算很了解的，可以看看作者的这篇文章 -- CSS @property，让不可能变可能，它的出现，让 CSS 极大的提升了制作各种动画的能力。
上述的完整代码，你可以猛击这里：CSS 灵感 -- 3D 立方体进度条
总结一下感谢阅读到此，如果认真看完上述内容，相信你一定会惊叹于 CSS 的神奇。希望本文的内容能够让你：
1.了解 CSS 3D 的各种用途
2.激发你新的灵感，感受动画之美提
3.升你的 CSS 动画制作水平
当然，新奇有趣的 CSS 3D 内容还有很多，我还有非常多个有意思的 DEMO 没有贴出来，当然对于本文的内容，我觉得已经足够充实，剩下的下次继续分享。
仅使用 CSS 能制作出多惊艳的动画？我觉得这个问题没有答案，随着 CSS 语言不断发展，各种新特性的持续加入，虽然某些方面比不上一些更专业的语言，但是它也在便利性、易学性上有着自己的优势。