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 }
