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:scale(1);
11 opacity:1;
12 }
13 15% {
14 transform:scale(1.2);
15 opacity:0.8;
16 }
17 30% {
18 transform:scale(1.0);
19 opacity:1;
20 }
21 45% {
22 transform:scale(1.3);
23 opacity:0.8;
24 }
25 60% {
26 transform:scale(1.1);
27 opacity:0.6;
28 }
29 75% {
30 transform:scale(1.4);
31 opacity:0.8;
32 }
33 90% {
34 transform:scale(1.2);
35 opacity:0.9;
36 }
37 100%{
38 transform:scale(1.5);
39 opacity:1.2;
40 }
41 }
42 img:hover{
43 /*
44 @keyframes 规定动画。
45 animation 所有动画属性的简写属性，除了 animation-play-state 属性。
46 animation-name 规定 @keyframes 动画的名称。
47 animation-duration 完成一个周期所花费的秒或毫秒。默认是 0。
48 animation-timing-function 规定动画的速度,默认是 "ease" 匀速是linear。
49 animation-delay 规定动画何时开始。默认是 0。
50 animation-iteration-count 规定动画被播放的次数，默认是 1,不限infinite。
51 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"，逆向alternate。
52 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"，停止paused。
53 animation-fill-mode 规定对象动画时间之外的状态。
54 * */
55
56 /*animation-name: rotate;
57 animation-duration: 2s;
58 animation-timing-function: linear;
59 animation-delay: 0s;
60 animation-iteration-count: infinite;
61 animation-direction: normal;
62 animation-play-state: running;*/
63
64 /*animation 属性值 统一语法*/
65 animation:rotate 1.6s linear 0s infinite normal running;
66 /*对象选择器 box-shadow:[投影方式] X轴偏移量 Y轴偏移量模糊半径 阴影半径 颜色*/
67 /*对元素进行阴影其他设置*/
68 text-shadow:-10px 10px 20px red;
69 }
70 img{
71 margin:50px 0px 0px 100px;
72 animation-play-state:paused;
73 width: 200px;
74 height: 200px;
75
76 }
77 </style>
78 </head>
79 <body>
80 <img src="img/love2.png">
81 </body>
82 </html>
效果
时间： 2024-10-10 16:34:57