CSS3权威指南 25.CSS3中的动画功能
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 div{ 9 background-color: #ffff00; 10 transition: background-color 1s linear; 11 } 12 div:hover{ 13 background-color: #00ffff; 14 } 15 </style> 16 </head> 17 18 <body> 19 <div>示例文字</div> 20 21 </body> 22 23 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 div { 9 background-color: #ffff00; 10 color: #000000; 11 width: 300px; 12 transition: backgroud-color 1s linear, color 1s linear, width 1s linear; 13 } 14 15 div:hover { 16 background-color: #003366; 17 color: #ffffff; 18 width: 400px; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div>示例文字</div> 25 26 </body> 27 28 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 div { 9 position: absolute; 10 top: 70px; 11 left: 0; 12 transform: rotate(0deg); 13 transition: left 1s linear,transform 1s linear; 14 } 15 16 div:hover { 17 position: absolute; 18 left: 30px; 19 transform: rotate(720deg); 20 } 21 </style> 22 </head> 23 24 <body> 25 <div>示例文字</div> 26 </body> 27 28 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 div { 9 background-color: red; 10 } 11 @keyframes mycolor{ 12 0%{ 13 background-color: red; 14 } 15 40%{ 16 background-color: darkblue; 17 } 18 70%{ 19 background-color:yellow; 20 } 21 100%{ 22 background-color:red; 23 } 24 } 25 div:hover { 26 animation-name: mycolor; 27 animation-duration: 5s; 28 animation-timing-function: linear; 29 } 30 </style> 31 </head> 32 33 <body> 34 <div>示例文字</div> 35 </body> 36 37 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 div { 9 position: absolute; 10 background-color: yellow; 11 top: 100px; 12 width: 500px; 13 } 14 @keyframes mycolor{ 15 0%{ 16 background-color: red; 17 transform: rotate(0deg); 18 } 19 40%{ 20 background-color: darkblue; 21 transform: rotate(30deg); 22 } 23 70%{ 24 background-color:yellow; 25 transform: rotate(-30deg); 26 } 27 100%{ 28 background-color:red; 29 transform: rotate(0deg); 30 } 31 } 32 div:hover { 33 animation-name: mycolor; 34 animation-duration: 5s; 35 animation-timing-function: linear; 36 } 37 </style> 38 </head> 39 40 <body> 41 <div>示例文字</div> 42 </body> 43 44 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 9 @keyframes mycolor{ 10 0%{ 11 width: 100px; 12 height: 100px; 13 } 14 15 100%{ 16 width: 500px; 17 height: 500px; 18 } 19 } 20 div { 21 background-color: red; 22 width: 500px; 23 height: 500px; 24 animation-name: mycolor; 25 animation-duration: 5s; 26 animation-timing-function: ease-out; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div>示例文字</div> 33 </body> 34 35 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 9 @keyframes fadein{ 10 0%{ 11 opacity: 0; 12 background-color: white; 13 } 14 15 100%{ 16 opacity: 1; 17 background-color: white; 18 } 19 } 20 div { 21 animation-name: fadein; 22 animation-duration: 5s; 23 animation-timing-function: linear; 24 animation-iteration-count: 1; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div>示例文字</div> 31 </body> 32 33 </html>