PS+SASS+JS打造HTML渐变进度圆环教程

本篇教程详细介绍了如何使用Adobe Photoshop（PS）、SASS和JavaScript结合来制作HTML进度圆环的过程。首先，从Photoshop部分开始，作者提到在CC版本中，为了创建一个直径为100px的圆环，你需要设置画布宽度为10000px，以适应圆环的100%宽度。使用圆形工具绘制圆环后，通过图层样式设置渐变，包括底色和高亮色，通过时间轴实现动画效果，即从左侧开始逐渐填充圆环，最后达到100%。这一步中，使用了98帧来模拟圆环的渐进过程。 接着，HTML部分展示了用于显示进度的HTML结构，使用`.ringBox`类来包裹圆环元素，并包含一个内联样式`.ringNumber`来显示进度百分比，如23.34%。这表明设计者打算根据JavaScript动态更新圆环进度。 SASS部分则是样式编译语言，通过变量 `$ringSize` 设定圆环直径（100px），并使用循环 (`@for`) 来定义多个CSS类 `.pct-#{$i}`，每个类对应圆环进度的1%。这些类通过CSS的`background-position`属性控制圆环的填充进度，通过索引 `$i` 实现动态变化。 最后，JavaScript部分提到了名为 `ringWithPic` 的函数，它接收三个参数：`.ringBox` 元素的选择器、`.ringNumber` 元素的选择器以及一个布尔值（可能是用于动画是否开启的标志）。这个函数可能是用于驱动整个动态圆环效果，根据实际需求更新HTML元素的样式，比如进度值，以与PS中的动画同步。 通过这种方式，设计师能够创建出一个动态的、视觉上具有渐进效果的HTML进度圆环，不仅美观，而且可由后台脚本控制，增加了交互性和动态性。这是一套完整且实用的技术栈应用实例，适用于许多网页或应用中的进度条、加载指示器等场景。