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旋转动画循环作用
老汤
叫你一同学前端
老汤
叫你一同学前端