css3旋转(动画循环示例代码)

css3旋转

CSS3供给了一个旋转文本的简略方法。如果项目不需要运用复杂的画布元素，运用transform:rotate特点不失为一个易于完成的解决方案。
准备作业
在HTML文档中写下一行文本。打起精神来，你将运用CSS3旋转这行文本。
完成方法
将文本包裹在段落标签元素中：
然后，添加CSStransform特点来旋转文本。每个浏览器完成旋转的方法都不同，所以需要设置每个浏览器自身唯一的transform特点。然而，每个设置都会运用transform特点的子特点rotate，并且后面紧跟着旋转角度，如下面的代码片段所示：
作业原理
transform特点能够给元素应用2D或3D改换。除了旋转，其他相应特点还能够完成元素的移动、歪曲以及透明化作用。

css3旋转动画循环示例代码

要写一个无限循环旋转动画酷炫作用，就要用到css3的动画特点animation，轻松写出一个css3旋转动画循环作用。在animation里界说了一个rote360的动画，在X轴方向无限循环，鼠标悬停在上面时动画会中止，用到了animation-play-state特点。
一、css3旋转动画循环作用，看图所示：
css3旋转动画循环作用?
说明：在animation里界说了一个rote360的动画，在X轴方向无限循环，鼠标悬停在上面时动画会中止，用到了animation-play-state特点。
二、animation-play-state特点：
规则动画正在运行还是暂停。
1、语法：animation-play-state:paused|running;
2、特点值：
1）paused：规则动画已暂停。
2）running：规则动画正在播映。
三、css3旋转动画循环作用实例完好代码如下：
css3旋转动画循环作用
老汤
叫你一同学前端
老汤
叫你一同学前端