CSS3 3D进度条加阴影效果
CSS3 的 3D 进度条加阴影效果，视觉上确实挺抓眼的。用transform做 3D 旋转，加上box-shadow的立体阴影，整体看起来就比普通进度条更高级了不少。你可以理解成一个会“呼吸”的进度条，不光有动态填充，还有那种“厚度感”。
结构上其实蛮，就是一个 阴影的话， 有些版本也搭了点 JavaScript，方便你动态改进度。比如监听 资源包 如果你对CSS3 的 transform或者box-shadow还不熟，可以先看下这篇CSS 阴影效果的例子，思路一下就通了。transform: rotateX(20deg)或translate3d()这些属性，能让平面的元素“立”起来。再加点perspective，那个 3D 味道就更足了。box-shadow可以玩出多花样。比如外阴影突出立体，内阴影做层次感。像box-shadow: inset 0 2px 5px rgba(0,0,0,0.3)这种配法，蛮常见的，效果也还不错。你可以多试试不同的模糊半径和颜色搭配。input或click事件，通过 JS 改 CSS 宽度或者 class 名。这种方式用在上传文件、表单验证这些场景，挺合适的。texiao8381_1560680950里应该有全套的 HTML、CSS 还有 JS 代码，直接看源码就能上手。要是你想给你的网站来点 3D 动效，这插件还挺值得研究的。
