1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 body { 8 font-family:Microsoft Yahei; 9 color:#333; 10 } 11 .wrap { 12 width:800px; 13 margin:20px auto; 14 } 15 .hd a { 16 color:#03c; 17 text-decoration:none; 18 -webkit-transition:color .5s ease-in-out; 19 -moz-transition:color .5s ease-in-out; 20 -o-transition:color .5s ease-in-out; 21 transition:color .5s ease-in-out; 22 } 23 .hd a:hover { 24 color:#f60; 25 } 26 h2:hover { 27 -webkit-transition:background-color 0.5s linear; 28 -moz-transition:background-color 0.5s linear; 29 -o-transition:background-color 0.5s linear; 30 transition:background-color 0.5s linear; 31 background-color:#ccc; 32 } 33 .div { 34 padding:5px; 35 color:#fff; 36 background-color:#666; 37 /*-webkit-transition:color 1s ease-in-out, background-color 0.5s ease-in-out; 38 -moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out; 39 -o-transition:color 1s ease-in-out, background-color 0.5s ease-in-out; 40 transition:color 1s ease-in-out, background-color 0.5s ease-in-out;*/ 41 -webkit-transition:all 1s ease-in-out; 42 -moz-transition:all 1s ease-in-out; 43 -o-transition:all 1s ease-in-out; 44 transition:all 1s ease-in-out; 45 } 46 .div:hover { 47 /*-webkit-transform: scale(1.5); 48 -moz-transform: scale(1.5);*/ 49 color:#333; 50 background-color:#ccc; 51 } 52 .photo{ 53 margin:10px 0; 54 } 55 .photo a{ 56 display:inline-block; 57 overflow:hidden; 58 border:1px solid #ccc; 59 padding:5px; 60 border-radius:3px; 61 -webkit-border-radius:3px; 62 -moz-border-radius:3px; 63 -o-border-radius:3px; 64 -webkit-transition:all 1s ease-in-out; 65 -moz-transition:all 1s ease-in-out; 66 -o-transition:all 1s ease-in-out; 67 transition:all 1s ease-in-out; 68 } 69 .photo a:hover{ 70 -webkit-transform:rotate(15deg); 71 -moz-transform:rotate(15deg); 72 -o-transform:rotate(15deg); 73 transform:rotate(15deg); 74 } 75 .scale{ 76 padding:5px; 77 color:#fff; 78 background-color:#666; 79 -webkit-transition:all 1s ease-in-out; 80 -moz-transition:all 1s ease-in-out; 81 -o-transition:all 1s ease-in-out; 82 transition:all 1s ease-in-out; 83 } 84 .scale:hover{ 85 -webkit-transform:scale(1.5); 86 -moz-transform:scale(1.5); 87 -o-transform:scale(1.5); 88 transform:scale(1.5); 89 } 90 .translate{ 91 margin-top:10px; 92 padding:5px; 93 color:#fff; 94 background-color:#666; 95 -webkit-transition:all 1s ease-in-out; 96 -moz-transition:all 1s ease-in-out; 97 -o-transition:all 1s ease-in-out; 98 transition:all 1s ease-in-out; 99 } 100 .translate:hover{ 101 -webkit-transform:translate(120px,10px); 102 -moz-transform:translate(120px,10px); 103 -o-transform:translate(120px,10px); 104 transform:translate(120px,10px); 105 } 106 .skew{ 107 margin-top:10px; 108 padding:5px; 109 color:#fff; 110 background-color:#666; 111 -webkit-transform:skew(20deg); 112 -moz-transform:skew(20deg); 113 -o-transform:skew(20deg); 114 transform:skew(20deg); 115 } 116 </style> 117 </head> 118 <body> 119 <div class="wrap"> 120 <h1 class="hd"><a href="http://www.rainleaves.com" class="">雨打浮萍</a>颜色渐变</h1> 121 <h2>专注于web前端开发，背景颜色渐变</h2> 122 <div class="div">辛苦遭逢起一经， 123 干戈寥落四周星。 124 山河破碎风飘絮， 125 身世浮沉雨打萍。 126 惶恐滩头说惶恐， 127 零丁洋里叹零丁。 128 人生自古谁无死？ 129 留取丹心照汗青-------------------复杂渐变</div> 130 <div class="photo">rotate变形-------<a href="http://www.rainleaves.com"><img src="ydfp.jpg" /></a></div> 131 <div class="scale">scale按比例变换----身世浮沉雨打萍。</div> 132 <div class="skew">skew按比例变换----身世浮沉雨打萍。</div> 133 <div class="translate">translate移动-------身世浮沉雨打萍。</div> 134 </div> 135 </body> 136 </html>