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 150px; 17 height: 100px; 18 background-color: blue; 19 } 20 to{ 21 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 }