1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>网站首页</title> 6 <style> 7 .ttt{ 8 -webkit-animation:cc 15s ease-in 0 infinite alternate ; 9 -ms-animation:cc 15s ease-in 0 infinite alternate ; 10 } 11 @-ms-keyframes cc{ 12 0%{color:red;} 13 25%{color:green;} 14 50%{color:blue;} 15 75%{color:yellow;} 16 100%{color:purple;} 17 } 18 19 20 @-webkit-keyframes cc{ 21 0%{color:red;} 22 25%{color:green;} 23 50%{color:blue;} 24 75%{color:yellow;} 25 100%{color:purple;} 26 } 27 28 @-webkit-keyframes aa{ 29 from { color:red; } 30 to { color:green; } 31 } 32 </style> 33 </head> 34 35 <body> 36 <h1 class="ttt">文字颜色不停的变化</h1> 37 </body> 38 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>网站首页</title> 6 <style> 7 h1{ 8 width:400px; 9 height:150px; 10 text-align:center; 11 margin:0 auto; 12 line-height:150px; 13 cursor:pointer; 14 color:red; 15 -webkit-animation:yy .5s ease-in 0 infinite alternate; 16 } 17 18 h1:hover{ 19 -webkit-animation-play-state:paused; 20 } 21 @-webkit-keyframes yy{ 22 to{ 23 color:yellow; 24 /*background-color:blue;*/ 25 font-size:60px; 26 } 27 from{ 28 color:red; 29 /*background-color:#fff;*/ 30 font-size:1px; 31 } 32 33 } 34 </style> 35 </head> 36 37 <body> 38 <h1>标题文字效果</h1> 39 </body> 40 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>网站首页</title> 6 <style> 7 img{ 8 -webkit-animation:yy .5s ease-in 0 infinite normal; 9 } 10 11 img:hover{ 12 -webkit-animation-play-state:paused; 13 } 14 15 @-webkit-keyframes yy{ 16 to{ 17 -webkit-transform:rotate(0); 18 } 19 from{ 20 -webkit-transform:rotate(360deg); 21 } 22 23 } 24 </style> 25 </head> 26 27 <body> 28 <img src="images/circle.png"> 29 </body> 30 </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网站首页</title> <style> h1{ width:300px; /*background-color:red;*/ /*border:1px solid green;*/ -webkit-animation:yy .5s ease-in 0 infinite alternate; } h1:hover{ -webkit-animation-play-state:paused; } @-webkit-keyframes yy{ to{ -webkit-transform:translate(100px,200px); } from{ -webkit-transform:translateX(0,0); } } </style> </head> <body> <h1>text</h1> </body> </html>
1 <!DOCTYPE html> 2 <html lang="zh-cmn-Hans"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>2D transform_CSS参考手册_web前端开发参考手册系列</title> 6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> 7 <style> 8 h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;} 9 .test{zoom:1;width:700px;margin:0;padding:0;list-style:none;} 10 .test li{float:left;margin:20px 30px 0 0;border:1px solid #000;} 11 .test li p{width:300px;height:100px;margin:0;background:#ddd;} 12 .test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);} 13 .test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);} 14 .test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);} 15 .test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);} 16 .test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);} 17 .test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);} 18 .test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);} 19 .test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);} 20 .test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);} 21 .test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);} 22 .test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);} 23 .test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);} 24 .test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);} 25 </style> 26 </head> 27 <body> 28 <h1>矩阵变换：matrix()</h1> 29 <ul class="test"> 30 <li class="matrix"> 31 <p>transform:matrix(0,1,1,1,10,10)</p> 32 </li> 33 </ul> 34 <h1>平移：translate(), translateX(), translateY()</h1> 35 <ul class="test"> 36 <li class="translate"> 37 <p>transform:translate(5%,10px)</p> 38 </li> 39 <li class="translate2"> 40 <p>transform:translate(-10px,-10px)</p> 41 </li> 42 <li class="translateX"> 43 <p>transform:translateX(20px)</p> 44 </li> 45 <li class="translate3"> 46 <p>transform:translate(20px)</p> 47 </li> 48 <li class="translateY"> 49 <p>transform:translateY(10px)</p> 50 </li> 51 <li class="translate4"> 52 <p>transform:translate(0,10px)</p> 53 </li> 54 </ul> 55 <h1>旋转：rotate()</h1> 56 <ul class="test"> 57 <li class="rotate"> 58 <p>transform:rotate(-15deg)</p> 59 </li> 60 <li class="rotate2"> 61 <p>transform:rotate(15deg)</p> 62 </li> 63 </ul> 64 <h1>缩放：scale()</h1> 65 <ul class="test"> 66 <li class="scale"> 67 <p>transform:scale(.8)</p> 68 </li> 69 <li class="scale2"> 70 <p>transform:scale(1.2)</p> 71 </li> 72 </ul> 73 <h1>扭曲：skew()</h1> 74 <ul class="test"> 75 <li class="skew"> 76 <p>transform:skew(-5deg)</p> 77 </li> 78 <li class="skew2"> 79 <p>transform:skew(-5deg,-5deg)</p> 80 </li> 81 </ul> 82 </body> 83 </html>