用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app,那么就有机会利用css3去实现一些很酷的效果,这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。

方案1,图片辅助

传统做法是直接用动态的GIF图片,这个方案是用PNG图片加上背景颜色来模拟静止的加载图片,然后利用css中的animation处理图片的旋转。相比传统方案,这个方案的好处是可以直接通过修改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;
}

具体效果查看这里:Demo1

这个方案,只有safari可以很好地支持。chrome下支持不是很好,所以这是一个不太成熟的方案。

方案2, 纯CSS实现

方案的思路是,首先用css渲染12个静态的bar,每个bar间隔30度的角度,给每个bar添加背景变淡的动画,但是相邻bar的动画效果延迟1/12秒,来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。

这个旋转效果是伪旋转,所有的bar都没有真正做到旋转。

@-webkit-keyframes fade {from {opacity: 1;}to {opacity: 0.25;}
}
div.spinner {position: relative;width: 30px;height: 30px;display: inline-block;
}
div.spinner div {width: 20%;height: 40%;background: #000;position: absolute;left: 100%;top: 100%;opacity: 0;-webkit-animation: fade 1s linear infinite;-webkit-border-radius: 30px;
}
div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%);-webkit-animation-delay: 0s;
}
[......]
div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;
}

具体效果查看这里:Demo2

safari和chrome都能很好地渲染这个效果,并且也很容易定义实际大小,因为所有的bar的高度,宽度有是用百分比来定义的。缺点也很明显,需要定义12个bar,并且每个bar都要定义独立的css,相对来说html和css的代码量有点多。

方案3,这个方案类似sencha touch中实现的效果

方案的基本思想是:首先利用html和css呈现4个bar,再通过css的伪元素: before和:after定义每个bar的前后内容,这样使得由原始的4个bar产生12个bar的效果,其次通过css设置让12个bar的透明度逐渐递减,最后应用css3中旋转动画达到实际loading的效果。

.x-loading-spinner {font-size: 250%;height: 1em;width: 1em;position: relative;-webkit-transform-origin: 0.5em 0.5em;
}
.x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after {display: block;position: absolute;width: 0.1em;height: 0.25em;top: 0;-webkit-transform-origin: 0.05em 0.5em;-webkit-border-radius: 0.05em;border-radius: 0.05em;content: " ";
}
.x-loading-spinner > span.x-loading-top {background-color: rgba(170, 170, 170, 0.99);
}
.x-loading-spinner > span.x-loading-top::after {background-color: rgba(170, 170, 170, 0.9);
}
.x-loading-spinner > span.x-loading-left::before {background-color: rgba(170, 170, 170, 0.8);
}
.x-loading-spinner > span.x-loading-left {background-color: rgba(170, 170, 170, 0.7);
}
.x-loading-spinner > span.x-loading-left::after {background-color: rgba(170, 170, 170, 0.6);
}
.x-loading-spinner > span.x-loading-bottom::before {background-color: rgba(170, 170, 170, 0.5);
}
.x-loading-spinner > span.x-loading-bottom {background-color: rgba(170, 170, 170, 0.4);
}
.x-loading-spinner > span.x-loading-bottom::after {background-color: rgba(170, 170, 170, 0.35);
}
.x-loading-spinner > span.x-loading-right::before {background-color: rgba(170, 170, 170, 0.3);
}
.x-loading-spinner > span.x-loading-right {background-color: rgba(170, 170, 170, 0.25);
}
.x-loading-spinner > span.x-loading-right::after {background-color: rgba(170, 170, 170, 0.2);
}
.x-loading-spinner > span.x-loading-top::before {background-color: rgba(170, 170, 170, 0.15);
}
.x-loading-spinner > span {left: 50%;margin-left: -0.05em;
}
.x-loading-spinner > span.x-loading-top {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);
}
.x-loading-spinner > span.x-loading-right {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);
}
.x-loading-spinner > span.x-loading-bottom {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);
}
.x-loading-spinner > span.x-loading-left {-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);
}
.x-loading-spinner > span::before {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);
}
.x-loading-spinner > span::after {-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);
}
.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;
}@-webkit-keyframes x-loading-spinner-rotate {from {-webkit-transform: rotate(30deg);}to {-webkit-transform: rotate(330deg);}
}

具体效果查看这里:Demo3

这个方案是3个方案中应用css技术最彻底的一个,html的代码最少,并且也真正做到了旋转效果。缺点是不易扩展,chrome浏览器支持不是很理想。

综上分析,方案1浏览器支持不好,但是实现简单,方案2的html代码太多,但扩展好,浏览器支持不错,方案3的扩展性不好,浏览器支持也不好,但是较好地利用了css的特性。

如果开发桌面web系统,推荐方案2,如果是mobile系统,则方案2和方案3各有优势。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548528.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

精通ASP.NET MVC ——模型绑定

模型绑定(Model Binding)是指,用浏览器以Http请求方式发送的数据来创建.Net对象的过程。 准备示例项目 新建一个空的MVC项目,名叫MvcModels,接下去会以此项目来演示各种功能。 在Models文件夹中创建一个Person.cs类…

C# 数据库连接池 线程安全 单例模式 的实现

本文介绍3种线程安全模式 1,lock 2,Mutex 3,MethodImpl 以前写的一个MYSQL数据库连接池ConnectionPool.CS using System; using System.Collections.Generic; using System.Linq; using System.Text;using System.IO; using System.Threading…

精通ASP.NET MVC ——模型验证

文章内容较长,用于记录自己学习。模型验证(Model Vaildation)是确保应用程序所接受的数据适合于绑定到模型,并且在不合适时给用户提供有用的信息,以帮助他们修正问题的过程。 准备示例项目 新建一个空的MVC项目&…

[wbia 2.2] 对检索结果进行评估

评估对检索系统的性能: 由于我们这里的检索结果,是主要根据PageRank的排名,以及Lucene对文本的分词和相关性计算的最后得分,进行权值调整后得到的排名结果。 这里对我们检索系统的进行性能评估,这里主要评估的是检索结…

错误175:具有固定名称MySql.Data.MySqlClient的ADO.NET提供程序未在计算机或者应用程序配置文件中注册或者无法加载

背景: EF连接MySQL时报错,截图如下图所示: 网上翻阅了很多资料,感觉有一篇文章说的比较靠谱:点击阅读。解决问题的大致过程如下: 在尝试使用MySQL,ADO.NET(数据库优先)和…

防止刷票方法大全

1. IP限制 这是使用的最多,也是最广泛,不可少的刷票限制。而且由于专题都没有用户模块,使得这个方法,几乎成了唯一可行的手段。该方式,通过获取访问游客的IP地址,来限制其在一段时间内所能使用的票数。当然…

精通ASP.NET MVC ——URL和Ajax辅助器方法

Ajax(或者,如果你愿意,也可以称为AJAX)是 Asynchronous JavaScripts and XML(异步JavaScripts与XML)。其XML部分并不如它往常那样意义重大,但是异步部分却使AJax十分有用。这是后台请求服务器数据,而不必重载Web页面的一种模型。M…

九把巨剑,为什么会从天而降?

在那记忆的残片之中,他看到了九把巨剑从天而降的壮阔画面,还听到了长袍剑客对自己的嘱托。 九把巨剑,为什么会从天而降?这当中,究竟有何寓意? 那个长袍剑客,究竟又是什么人? 没有答案…

精通ASP.NET MVC ——控制器可扩展性

MVC中引导动作方法执行过程的请求流程管道中,有两个重要的部件:控制器工厂(Controller Factory) 和 动作调用器(Action Invoker)。控制器工厂负责创建对请求进行服务的控制器实例,动作调用器负责查找并调用控制器类中的…

永中向香港博览会主办方演示云办公(转载)

4月16号“香港国际资讯博览会”主办方香港贸发局对永中云办公产品非常感兴趣,由永中员工演示,并拍摄了演示视频。转载于:https://blog.51cto.com/premium/837675

Backbone.js学习笔记

为什么80%的码农都做不了架构师?>>> http://documentcloud.github.com/backbone var todoItem new TodoItem(); todoItem.url /todo; todoItem.fetch(); todoItem.get(description)var TodoItem Backbone.Model.extend({urlRoot: /todos }); var tod…

ASP.NET MVC中使用Autofac实现简单依赖注入

本文参考资料: 1、https://www.cnblogs.com/RayWang/p/11128554.html。 2、https://www.cnblogs.com/eedc/p/6127181.html 3、https://www.cnblogs.com/ancupofcoffee/p/5007649.html#top 前言 关于IoC和DI(依赖注入)的概念网上一搜一大把。简单来说,Io…

初探EntityFramework——来自数据库的EF设计器

本文通过简单的示例,先初步了解下EF四种设计模式之一:来自数据库的EF设计器。 来自数据库的EF设计器,顾名思义,需要有新建的数据库和表结构,才能生成EF设计器, 在本地新建数据库KTStore,并且新建…

【034】◀▶ 学习网站 问题解决

--------------------------------------------------------------------------------------------------------- ●● 目录: A1 ………… ArcGIS Engine 学习网站A2 ………… 其他 ArcGIS Engine 开发网站A3 ………… 程序开发技术博客A4 ………… 问题解决链接 —…

初探EntityFramework——空EF设计器模型

如果没有任何现存数据库架构,可以使用空的EF设计器模型。本文将通过简单示例,了解如何使用空EF设计器模型。 新建空的控制器应用程序EFDesignerDemo,如下图所示: 在项目中右键,选择“添加”,然后是“新建项…

Qt4小技巧——QTextEdit自动滚屏

CuteQt Blog Blog Archive Qt4小技巧——QTextEdit自动滚屏Qt4小技巧——QTextEdit自动滚屏本站所有文章由本站和原作者保留一切权力,仅在保留本版权信息、原文链接、原文作者的情况下允许转载,转载请勿删改原文内容, 并不得用于商业用途。…

初探EntityFramework——来自数据库的Code First

Entity Framkwork从第二版(EF4)开始,支持新的CodeFirst模式(程序代码优先),以自定义类定义数据模型。简化了EF的开发过程。本文章使用简单的示例来说明如何使用来自数据库的CodeFirst模式。 新建一个空的控…

CentOS上安装mysql5.5.23

mysql 5.5版本需要 cmake进行编译安装安装cmake工具需安装基础编译环境 下载安装软件包:mysql-5.5.23.tar.gzhttp://dev.mysql.com/get/Downloads/MySQL-5.5/mysql-5.5.23.tar.gz/from/http://mysql.he.net/cmake-2.8.*.tar.gzhttp://www.cmake.org/files/v2.8/cmak…

初探EntityFramework——空Code First模型

如果不是从现有的系统升级,想要创建全新的项目可以从“空Code First模型开始”。“空CodeFirst模型”要先创建类,Visual Studio会从项目第一次执行的时候根据连接自动创建需要的数据库结构。本文将简单示例说明如何使用“空CodeFirst模型”。 新建控制台…

初探EntityFramework——实体类结构映射

实体类与数据表的映射有一套专用的规则。Code First 采用的惯例优于预先设置的设计,在没有任何设置的情况下,自动检测模型结构并推导出默认设置以简化类的设计,因此不需要特别设置类的属性即可完成模型设计。 例如,当DbContext的模…