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 动效,这插件还挺值得研究的。