纯css3 transition自动过度效果
HTML/CSS
2012-07-09
兼容性
浏览器类型 | 支持版本 |
---|---|
Internet Explorer | (×) IE6,7,8,9 |
Firefox | (√) |
Chrome | (√) |
Safari | (√) |
Opera | (√) |
写法
内核类型 | 写法(transition) |
---|---|
Webkit(Chrome/Safari) | -webkit-transition |
Gecko(Firefox) | -moz-transition |
Presto(Opera) | -o-transition |
Trident(IE) |
- 背景色和边框过渡
- 背景色和边框过渡
01 |
|
02 | .logTest{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;} |
03 | .logTest li{float:left; |
04 | width:160px; |
05 | height:60px; |
06 | line-height:60px; |
07 | text-align:center; |
08 | margin:0 5px; |
09 | background-color: #f5f5f5; |
10 | border:1px solid #ddd; |
11 | text-align:center; |
12 | -moz-transition:all .2s ease- in ; |
13 | -webkit-transition:all .2s ease- in ; |
14 | -o-transition:all .2s ease- in ; |
15 | transition:all .2s ease- in ; |
16 | } |
17 | .logTest li:nth-child(1):hover{ border:3px #888 solid; background-color:red; color:#fff;} |
18 | .logTest li:nth-child(2):hover{ border:3px #888 solid; background-color:blue; color:#fff;} |
19 |
|
20 | <span style= "line-height:40px;font-size:16px;font-family:微软雅黑;" >请将鼠标移动到下面的矩形上(复制到body里面即可): <ul class= "logTest" > |
21 |
|
22 |
|
23 |
|
读后有收获可以支付宝请作者喝咖啡
湘ICP备15005320号-1
似懂非懂 Powered by doyo.
网站地图