本文共 1936 字，大约阅读时间需要 6 分钟。

WebKit核心浏览器（如Safari和Chrome）对HTML5支持非常完善，尤其在移动平台上分别对应iOS和Android，提供了强大的CSS3支持。开发移动Web应用时，利用CSS3实现旋转加载动画成为可能，取代了传统依赖图片的方式。以下是三种常见实现方案的对比分析。

方案1：图片辅助

传统做法是使用动态GIF图片，但近期更倾向于通过PNG图片结合背景颜色模拟静止加载动画，再利用CSS实现旋转。这种方法的优点是可通过CSS直接调整背景色、大小和旋转速度。例如，以下CSS代码实现旋转动画：

@-webkit-keyframes rotate {    from {-webkit-transform: rotate(0deg)} to {-webkit-transform: rotate(360deg)}}

p#spinner {    height: 30px;    width: 30px;    overflow: hidden;    background: #000;    -webkit-mask-image: url("data:image/png[...]");    -webkit-mask-size: 30px 30px;    -webkit-animation-name: rotate;    -webkit-animation-duration: 1.5s;    -webkit-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;}

支持情况：仅Safari表现优异，Chrome支持有限，整体方案不够成熟。

方案2：纯CSS实现

这一方案通过创建12个静态条带，每个条带间隔30度，利用CSS实现变淡动画，确保条带按顺序亮起后逐渐变暗，模拟旋转效果。这种方法的优势在于浏览器支持较好（Safari和Chrome均能流畅渲染），且条带大小可通过百分比方便定义。具体实现如下：

@-webkit-keyframes fade {    from { opacity: 1; } to { opacity: 0.25; }}.spinner div {    width: 20%;    height: 40%;    background: #000;    position: absolute;    opacity: 0;    -webkit-animation: fade 1s linear infinite;    -webkit-border-radius: 30px;}.bar1 { animation-delay: 0s; }....bar12 { animation-delay: -0.0833s; }

优点：支持广泛，代码易维护。缺点：需要定义多个条带，代码量较大。

方案3：伪元素结合旋转

该方案借鉴Sencha Touch的实现思路，通过HTML和CSS创建4个条带，再利用::before和::after伪元素扩展成12个条带。通过透明度递减和旋转动画，模拟实际加载效果。具体实现如下：

.x-loading-spinner span::before,.x-loading-spinner span::after {    -webkit-transform: rotate(30deg) / -30deg;}@-webkit-keyframes x-loading-spinner-rotate {    from { -webkit-transform: rotate(30deg); } to { -webkit-transform: rotate(330deg); }}.x-loading-spinner {    -webkit-animation-name: x-loading-spinner-rotate;    -webkit-animation-duration: 0.5s;    -webkit-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;}

优点：CSS技术应用最为彻底，代码量最少。缺点：扩展性差，Chrome支持有限。

选型建议

• 桌面端：方案2支持广泛且扩展性强。
• 移动端：方案2和方案3均可选择，根据具体需求权衡代码简洁性与效果复杂度。

这三种方案各有优劣，开发者应根据实际需求、目标平台及浏览器支持情况选择最适合的方案。

转载地址：http://dgufz.baihongyu.com/