css3动画怎么实现旋转效果 - 网站源码_资源分享

杨开第创业精神贵阳中心

中高档IT劳工市场专业培训研究者

充斥HTML5得来的CSS3让后端小伙伴们可以用单纯的CSS式样方可写下动画电影效用来，而在这以后，一提及动画电影我们可能会想不到JavaScript，Flash，等。假如是用JavaScript那说来很差劲的事啦，但假如写下来的效用非要强逼应用领域流程加装服务器端应用领域流程就可以显示，即便不是很平庸。这也是为何Google会不失时机地推展他所主导力量的开放源码工程项目WebRTC (Web Real-Time Communication)，把动态通信的机能都做进应用领域流程，像音频收发这种的高阶应用领域直接在JavaScript里初始化几个应用领域流程API方可同时实现!这在从前想都不敢想。

再加之HTML5将许多之前须要倚赖内部流程或是须要开发人员们写大批JS来同时实现的东西技术标准了，两个目地是多样Web结构设计，全盘弃置服务器端应用领域流程，让应用领域流程乱七八糟。说了这么多，让我已经开始聊聊CSS3的动画电影。

表述动画电影

在CSS3中表述动画电影是件很方便快捷的事。基本原理类似于使用Adobe公司的Flash应用领域软件来制做动画电影。

比如说表述好两个球体的已经开始边线及状况，0秒的时候两个黄色50X50的正方形处在镜头华北局，再将镜头定坐落于本篇上3秒处，将正方形设为100X100黄色。再滑鼠加进单抄动画电影。这种两个单纯的动画电影便顺利完成了。像有关偏转，色调蓝紫色，甚至转动，3D效用等的动画电影，现在都可以用CSS来做了。

CSS中的@符号

首先我们来看一下CSS中的@符号。

当我首先看到这个东西的时候，完全搞不懂是什么意思。于是已经开始尝试去一探究竟。

请考虑这种一种情形，你想在Web页面使用结构设计师使用的一种字体，因为结构设计是那帮不懂Coding的平面结构设计师搞出来的，老板看了觉得还不错，剩下同时实现的问题就交给你了。因为这种字体不是很通用，所以用户电脑上有很大可能是没有装这一字体的，那就意味首页面在用户电脑上的呈现会不一致，页面找不到指定的字体会初始化系统默认的字体。

比如说下面我们在页面使用Adelle_Reg.otf字体。

通过打开查看可以得到Font name，然后基本我们会通过一句单纯的CSS来搞定：

但由于我系统里并没有Adelle Rg 这种的字体，所以页面会是这种的

所以我们考虑把字体文件包含到CSS里去，换句话说把字体文件发送到应用领域流程。于是同时实现要改，这时使用@font-face 来指定字体文件的路径，这个时候我们初次看到引入了两个@符号

所以改过之后的代码如上图。

· 先通过@font-face表述了两个取名叫customFont的font face，会在后面使用到

· 然后再通过给须要的页面元素指定font-family 为刚才表述的customFont

字体已经应用领域上且我们能够在Resource里面发现字体文件已经发送到了应用领域流程应用领域流程。

从上面我们大致可以这种理解此种情况下的@符号，虽然不太正确(比如说@import, @media)，通过它表述了两个特殊场合下的变量，这里是表述字体，在动画电影里是表述动画电影关键帧，然后我们会在CSS代码的其他地方使用这个表述好的变量。

关键帧

什么是关键帧。一如上面对Flash基本原理的描述一样，我们知道动画电影其实由许多静态镜头组成，第两个这种的静态画面可以表述为一帧。其中关键帧是在动画电影过程中体现了物理明显变化的那些帧。

比如说以后的例子中，元素div由50X50黄色的大小变化到状况100X100 黄色的过程中，这一头一尾的两个状况起到了对动画电影表述的关键作用。所以这两个状况是整个动画电影的关键帧。

@keyframes 表述动画电影关键帧

通过以后的胡说现在我们看到@keyframes就不会觉得这个@符号有多别扭了。我们使用它来表述动画电影的关键帧。

CSS代码中表述关键帧重要的两点是名称和时间点。

其中状况部分指定元素的式样，因此可以是各种你想要的CSS代码，色调尺寸透明度转动等。from指定了动画电影过程的已经开始状况，to指定了动画电影结束时元素的状况。所以整个动画电影也是从from指定的已经开始状况变化到to指定的状况的过程。

假使我们已经创建好了两个HTML文档，其结构很单纯只有两个用于呈现动画电影的div。

所以对于上面的例子，动画电影的表述大概是下面这个样子的：

· 表述的动画取名example

· 在from也是动画电影已经开始时指定元素长50px宽50px，背景色为黄色

· 在to也是动画电影结束时指定元素长100px宽100px，背景色为黄色

· 对于使用webkit内核的应用领域流程比如说Chrome,Safari须要使用-webkit-前缀，所以须要写两套代码，以保证在Chrome或Safari里能工作

当然对于状况的表述不局限于已经开始和结束两个时间点，我们可以指定两个动画电影过程中任何时间点元素的状况。下面是表述关键帧的另一种写法。

上面表述了整个动画电影过程中0%，50%，100%三个时间点元素的状况。比如说我们表述了两个时长为10秒的动画电影，那么0%是动画电影已经开始时0秒的时候，0%后面的代码指定元素在动画电影已经开始时是怎样的，然后50%也是动画电影进行到5秒的时候，元素又是什么样子。最后100% 对于动画电影进行到10秒也是动画电影结束时元素的状况。

因此用这种写法我们可以指定的元素状况数量没有限制，可以更精确地控制整个动画电影。

CSS3 animation属性

当我们使用@keyframes表述好了两个动画电影，它并不会执行产生任何效用，直到我们通过animation属性将动画电影应用领域到相应元素上。

对于 CSS3 animation 属性其完整的语法如下：

animation: name duration timing-function delay iteration-count direction;

· name是使用@keyframes表述好的关键帧名称

· duration从字面意思可知是指定动画电影持续时间

· timing-function 指定动画电影以何种方式播放，具体指的是从元素的两个状况过渡到另两个状况所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。每种方式的讨论超出了原计划，这里只是列出

· delay指定两个延时让动画电影不立即播放

· iteration-count 指定动画电影重复次数，可以指定两个数字，也可以使用infinite表示一直播放

· direction指定动画电影是否反向播放或是交替着播放，可用的值有normal, reverse, alternate, alternate-reverse

其中name和duration 是必需的，假如不指定duration默认为0，也是动画电影持续0秒，所以就无法看到动画电影效用。

在前面已经表述好了关键帧了，现在我们使用animation将其应用领域到相应元素上。

现在打开页面就会看到最上面那个动画电影效用了。

使用百分比指定关键帧的版本

上面介绍过通过百分比的形象我们可以指定动画电影过程中任何时间点时元素的状况，将上面的版本变为百分比版本是非常容易的事。

我们只需把关键帧的表述由from to 改为想要的时间百分比方可。

比如说已经开始的状况不改变，增加两个动画电影进行到50%时色调为黄色大小为75X75，最后为绿色大小为100X100。