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>
