首页 > 代码库 > 一些css3的特效 javascript的window对象 定时器 延时器等ing...

一些css3的特效 javascript的window对象 定时器 延时器等ing...

技术分享

风车转动代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7         /*创建动画名称*/
 8         @keyframes rotate{            
 9             0% {
10                 transform:rotate(0deg);/*旋转*/
11                 
12                 /*matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。有问题需请教老师*/
13                 /*-webkit-transform:matrix(0,0.5,0,10,20,20);*/    
14             }
15             100%{
16                 /*旋转*/
17                 transform:rotate(360deg);  
18             }
19         }
20         img:hover{
21             /*
22             @keyframes 规定动画。 
23             animation 所有动画属性的简写属性,除了 animation-play-state 属性。 
24             animation-name 规定 @keyframes 动画的名称。 
25             animation-duration 完成一个周期所花费的秒或毫秒。默认是 0。 
26             animation-timing-function 规定动画的速度,默认是 "ease" 匀速是linear。 
27             animation-delay 规定动画何时开始。默认是 0。 
28             animation-iteration-count 规定动画被播放的次数,默认是 1,不限infinite。 
29             animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal",逆向alternate。 
30             animation-play-state 规定动画是否正在运行或暂停。默认是 "running",停止paused。 
31             animation-fill-mode 规定对象动画时间之外的状态。  
32              * */
33             
34             /*animation-name: rotate;
35             animation-duration: 2s;
36             animation-timing-function: linear;
37             animation-delay: 0s;
38             animation-iteration-count: infinite;
39             animation-direction: normal;
40             animation-play-state: running;*/
41 
42             /*animation 属性值 统一语法*/
43             animation:rotate 1.5s linear 0s infinite normal running;
44         }
45         img{
46             animation-play-state:paused;
47             width: 500px;
48             height: 500px;
49         }
50         
51         </style>
52     </head>
53 <body>
54     <img src="img/fengche2.png">
55 </body>
56 </html>

风车转动效果

技术分享

一些css3的特效 javascript的window对象 定时器 延时器等ing...