css3动画的实例讲解 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .box{
12                 width: 500px;
13                 height: 500px;
14                 background: skyblue;
15                 
16             }
17             .box1{
18                 width: 100px;
19                 height: 100px;
20                 background: skyblue;
21                 /*transition: 1s;*//*过渡 需要事件触发*/
22                 /*使用animation调用关键帧*/
23                 /*animation:mz 3s;综合写法*/
24                 animation-name: mz2;/*关键帧名字 动画名*/
25                 animation-duration: 2s;/*关键帧时长 总运动时间*/
26                 animation-delay: 3s;/*关键帧延迟时间*/
27                 animation-iteration-count: 2;/*运动执行次数 默认情况一次 infinite无限循环*/
28                 animation-direction: reverse;/*运动方向*/
29                 animation-direction: alternate;/*先正向再反向*/
30                 animation-direction: alternate-reverse;
31                 animation-timing-function: ease;/*运动使用的类型*/
32                 animation: mz2 2s 1s linear infinite;
33                 
34             }
35             .box:hover .box1{
36                 animation-play-state: running;/*鼠标移入暂停*/
37             }
38             /*定义动画*/
39             @keyframes mz{
40                 from{margin-left: 0;}
41                 to{
42                     margin-left: 500px;
43                 }
44             }
45             @keyframes mz2{
46                 0%{/*初始状态*/
47                     margin-left: 0px;
48                     margin-bottom: 0px;
49                 }
50                 25%{
51                     margin-left: 500px;
52                     margin-top: 0px;
53                 }
54                 50%{
55                     margin-left: 500px;
56                     margin-top: 400px;
57                 }
58                 75%{
59                     margin-left: 0px;
60                     margin-top: 400px;
61                 }
62                 100%{
63                     margin-left: 0px;
64                     margin-top: 0px;
65                 }
66             }
67         </style>
68     </head>
69     <body>
70         <div class="box">
71             <div class="box1">
72         </div>
73     </body>
74 </html>
75

 

posted @ 2020-03-31 20:17  爱睡觉的小朋友  阅读(219)  评论(0)    收藏  举报