首页 > 代码库 > 不完善的css怦然心动，有待改进...

不完善的css怦然心动，有待改进...

2024-08-22 20:50:05   220人阅读

 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>

效果

技术分享

不完善的css怦然心动，有待改进...


联系
我们