transition css3 

  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>
View Code

 

posted on 2013-11-04 14:56  都是脚本惹的祸  阅读(249)  评论(0)    收藏  举报

导航