风车转动代码
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>
风车转动效果
时间： 2024-12-12 22:58:50