纯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.
网站地图
