【CSS3】动画animation-关键帧keyframes 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <div></div>
10 </body>
11 </html>
 1 div{
 2     width: 300px;
 3     height: 200px;
 4     background-color: red;
 5     animation-name: myanimation;
 6     animation-duration: 3s;
 7     animation-timing-function: ease;
 8     animation-delay: 1s;
 9     animation-iteration-count: 3/*infinite*/;/*infinite一直播放*/
10     animation-direction: alternate; /*normal*/;/*规定动画下一周期的播放顺序，即奇数次的播放顺序：normal默认顺序播放，alternate逆序播放*/
11     animation-fill-mode: both;/*默认none，动画会停在初始状态。forwards属性值会使动画停在最后一帧状态。backwards会立即切换到第1帧再执行animation-delay延时。both会同时应用forwards和backwards属性值。*/
12     animation: ;/*所有具体属性值都可以设置在简写属性名中，每个属性值之间用空格分隔*/
13 }
14 @keyframes myanimation{
15 /*    from{
16         width: 150px;
17         height: 100px;
18         background-color: blue;
19     }
20     to{
21         width: 200px;
22         height: 150px;
23         background-color: green;
24     }*/
25     0%{
26         margin-left: 20px;
27         background-color: pink;
28     }
29     20%{
30         margin-left: 100px;
31         background-color: orange;
32     }
33     40%{
34         margin-top: 100px;
35         background-color: yellow;
36     }
37     60%{
38         margin-top: 200px;
39         background-image: grey;
40     }
41     100%{
42         margin-right: 300px;
43         margin-top: 150px;
44         background:green;
45     }
46 }

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <div><img src="img/鸟1.jpg"></div>
10 </body>
11 </html>
 1 *{
 2     margin:0;
 3     padding: 0;
 4 }
 5 img{
 6     width: 200px;
 7     height: 180px;
 8     border:3px groove pink;
 9     animation-name: myanimation;
10     animation-duration: 3s;
11     animation-delay: 1s;
12     animation-iteration-count: 3;
13     animation-fill-mode: both;
14 }
15 div{
16     /*background-color: red;*/
17     width: 200px;/*若无此句默认会左右充满屏幕，可以通过添加背景色观察到。*/
18     margin-left: auto;
19     margin-right: auto;/*此3句的作用是使div左右剧中*/
20     margin-top: 100px;
21     perspective: 600px;/*使子元素的动画效果具有立体感*/
22 }
23 @keyframes myanimation{
24     0%{
25         transform: rotateY(45deg);
26     }
27     50%{
28         transform: rotateX(180deg);
29     }
30     100%{
31         transform: rotateX(180deg);
32     }
33 }

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <div class="div2">
10         <h3><a href="">花</a></h3>
11         <div><img src="img/花1.jpg"></div>
12     </div>
13     <div class="div2">
14         <h3><a href="">草</a></h3>
15         <div><img src="img/草1.jpg"></div>
16     </div>
17     <div class="div2">
18         <h3><a href="">树</a></h3>
19         <div><img src="img/树1.jpg"></div>
20     </div>
21 </body>
22 </html>
 1 *{
 2     margin:0;
 3     padding: 0;
 4 }
 5 h3+div{/*兄弟选择器*/
 6     height: 0;
 7     overflow: hidden;/*隐藏div*/
 8     transition: all 1s ease;
 9 }
10 a{
11     text-decoration: none;/*去掉链接的下划线*/
12 }
13 .div2{
14     width: 600px;
15     background: rgba(90,60,30,0.1);
16     margin-left: 15px;
17     margin-top: 4px;
18 }
19 h3{
20     background:rgba(180,70,40,0.5);
21     border-radius: 1em;
22 }
23 .div2:hover h3+div{
24     height: 400px;
25     overflow: auto;
26 }

 

posted @ 2017-05-01 10:39  xiongjiawei  阅读(527)  评论(0)    收藏  举报