css3如何实现一个旋转的动画

本篇内容介绍了“css3如何实现一个旋转的动画”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

实现方法:1、使用“@keyframes动画名称50%{{变换:旋转(旋转角度);}”语句创建旋转动画;2、使用“元素{动画:动画名称时间无限;}”语句将旋转动画应用于指定元素中。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强> css3实现一个旋转的动画

<强> 1,想要利用css3实现动画就需要使用动画属性和“@keyframes”规则。

<李>

@keyframes是css3的一种规则,可以用来定义CSS动画的一个周期的行为,可以创建简单的动画。

<李>

动画与转换类似,因为它们都是随时间改变CSS属性的表示值。主要区别在于,当属性值更改时(例如,当悬停时属性值发生改变时),转换会隐式的触发,但在应用动画属性时会显式执行动画,因此,动画需要显示动画属性的显式值。这些值是在@keyframes规则中指定的动画关键帧定义的,因此,@keyframes规则里是由一组封装的CSS样式规则组成的,这些规则描述了属性值如何随时间变化。

<李>

然后,使用不同的CSS,动画(动画)属性,可以控制动画的许多不同方面,包括动画迭代的次数,是否在开始和结束值之间交替,以及动画是否应该运行或暂停。动画也可以延迟其开始时间。

<李>

语法:

/*,定义动画*/@keyframes 动画名称{ 　　,,,/*,样式规则*/}/*,将它应用于元素,*/.element  { 　　,,,animation-name:,动画名称(在@keyframes中已经声明好的); 　　 　　,,,/*,或使用动画简写属性*/动画:,,,,动画名称,1 s … 　　}

<强> 2,在“@keyframes”规则中使用<代码>变换:旋转(旋转角度)控制旋转动作。

实现代码:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style> 　　div  { 　　宽度:100 px; 　　身高:100 px; 　　背景:,粉色; 　　保证金:100 px; 　　动画:mymove  5 s 无限; 　　-webkit-animation: mymove  5 s 无限,,/*,Safari 以及Chrome  */} 　　 　　@keyframes  mymove  { 　　50%,{ 　　变换:旋转(360度); 　　} 　　 　　} 　　 　　@-webkit-keyframes  mymove{/*,才能Safari 以及Chrome  */50%,{ 　　变换:旋转(360度); 　　} 　　 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div> & lt;/div> 　　& lt;/body> 　　& lt;/html>

css3如何实现一个旋转的动画