利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单
以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为《纯CSS制作下拉导航菜单》最近又看CSS手册发现另外一个过渡属性(Transition),可以设置过渡弹出时间,但是遗憾的是:对于IE10以下的版本浏览器不支持。但是在IE10以下版本也是有弹出效果。所以在这里记录分享以下:
先来看以下此CSS属性:
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。
备注(不同浏览器兼容代码):
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:5s;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:5s;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:5s;
-o-transition-delay:2s;
正常CSS样式:
width:100px;/*原宽度*/