来自:http://www.w3cfuns.com/thread-5592346-1-1.html
在CSS3中动画有两个属性,分别是Transitions和Animations。现在我们先来认识一下Transitions属性:
Transitions
此属性在不同浏览器下需要带有不通的前缀(例如-webkit-****),在这里便不再赘述;
它有三个参数,例如:
property:表示对那个属性进行动画设置,比如 background, color等(在后面的课程会列出可变换属性列表);
duration:表示在多长时间内完成动画,也就是动画执行事件,比如 1s表示1秒, 0.5s表示半秒;
timing-function:表示执行什么种类的动画,也就是动画执行的计算种类,比如 linear渐变(在后面的课程同样也会列出动画执行的计算种类列表)
比如我们现在来实现一个段落p默认背景色是黑色,当鼠标悬停时渐变成红色,执行时间为1秒的动画:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之动画属性-Transitions[一]| 前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
- p
- {
- padding:0 10px;
- line-height:24px;
- color:#fff;
- background:#000;
- -webkit-transition:background 1s linear;
- -moz-transition:background 1s linear;
- -o-transition:background 1s linear;
- -ms-transition:background 1s linear;
- transition:background 1s linear;
- }
- p:hover{background:#f00;}
- </style>
- </head>
-
- <body>
- <p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家!</p>
- </body>
- </html>
其实我们还有另外一种使用Transitions功能的方法,就是将其属性中的三个参数,property属性,duration属性和timing-function属性中的三个参数的含义及指定方法拆开实现,如下代码:
这节课比较简单,主要是告诉大家Transitions功能的拆开方法,其实在很多情况下,我们都会用的到拆开来实现的。
这节课比较简单,主要是告诉大家Transitions功能的拆开方法,其实在很多情况下,我们都会用的到拆开来实现的。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之动画属性-Transitions[二]| 前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- body{padding:25px 10px 0; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
- p
- {
- padding:0 10px;
- line-height:24px;
- color:#fff;
- background:#000;
-
- -webkit-transition-property:background;
- -webkit-transition-duration:1s;
- -webkit-transition-timing-funcion:linear;
-
- -moz-transition-property:background;
- -moz-transition-duration:1s;
- -moz-transition-timing-funcion:linear;
-
- -o-transition-property:background;
- -o-transition-duration:1s;
- -o-transition-timing-funcion:linear;
-
- -ms-transition-property:background;
- -ms-transition-duration:1s;
- -ms-transition-timing-funcion:linear;
-
- transition-property:background;
- transition-duration:1s;
- transition-timing-funcion:linear;
- }
- p:hover{background:#f00;}
- </style>
- </head>
-
- <body>
- <p>中国第一Web前端开发门户,CSS学习网为其前身,提供庞大前端免费资源,教程,培训,Web前端论坛,为企业提供前端招聘,被誉为Web前端开发工程师最贴心的家!</p>
- </body>
- </html>
上面的都是浮云!!!!!!!!!!!!!
下面这个例子才是王道,很有flash当年的感觉!
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之动画属性-Transitions组合动画| 前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
- #box
- {
- margin:-100px 0 0 -100px;
- top:50%;
- left:50%;
- width:200px;
- height:200px;
- line-height:200px;
- text-align:center;
- border:5px #d1d1d1 solid;
- border-radius:105px;
- box-shadow:0 0 20px #666;
- background:#eee;
- overflow:hidden;
- position:absolute;
-
- /*动画部分 开始*/
- -webkit-transition:
- margin 1s linear,
- width 1s linear,
- height 1s linear,
- font-size 1s linear,
- line-height 1s linear,
- color 1s linear,
- border 1s linear,
- border-radius 1s linear,
- background 1s linear,
- box-shadow 1s linear,
- -webkit-transform 1s linear;
-
- -moz-transition:
- margin 1s linear,
- width 1s linear,
- height 1s linear,
- font-size 1s linear,
- line-height 1s linear,
- color 1s linear,
- border 1s linear,
- border-radius 1s linear,
- background 1s linear,
- box-shadow 1s linear,
- -moz-transform 1s linear;
-
- -o-transition:
- margin 1s linear,
- width 1s linear,
- height 1s linear,
- font-size 1s linear,
- line-height 1s linear,
- color 1s linear,
- border 1s linear,
- border-radius 1s linear,
- background 1s linear,
- box-shadow 1s linear,
- -o-transform 1s linear;
- /*动画部分 结束*/
- }
-
- #box:hover
- {
- margin:-200px 0 0 -200px;
- width:400px;
- height:400px;
- font-size:26px;
- line-height:400px;
- color:#fff;
- border:5px #fff solid;
- border-radius:210px;
- background:#05a;
- box-shadow:0 0 40px #900;
- -webkit-transform:rotate(720deg);
- -moz-transform:rotate(720deg);
- -o-transform:rotate(720deg);
- }
- </style>
- </head>
-
- <body>
- <div id="box">前端开发网(W3Cfuns.com)!</div>
- </body>
- </html>