css3怎么实现导航过渡特效,基于css3的属性transition制作菜单导航效果

本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。具体如下：

CSS3导航菜单，当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：

-webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见：隐藏)

-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现：保留 3D )。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

复制代码代码如下:

css3的属性transition制作菜单导航

*{margin:0px;padding:0px;}

body{background:#45B5DA;margin:0px;padding:0px;}

.tips{width:370px;margin:0 auto;line-height:24px;padding-top:10px;}

.bredcolor{color:#fff;}

#nav{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-185px;}

li{

width:74px;height:40px;text-align:center;float:left;line-height:40px;color:#fff;text-decoration:none;list-style:none;cursor : pointer;

}

li#chage{

width:70px;height:38px;display:block;position:absolute;left:0px;z-index:-1;border:2px solid #191919;

border-radius:10px;

background:-webkit-gradient(linear, 0 100%, 0 0, from(black), color-stop(0.5, black), color-stop(0.52,#313131), to(#6A6A6A));

box-shadow:0px 2px 0px rgba(255, 255, 255, .3);

-webkit-transform: translate(0px,0px);

-webkit-transition:-webkit-transform .2s ease-out;

}

当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：

-webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见：隐藏)

-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现：保留 3D )

qq群:197326136

首页脚本特效源码下载

function $(id){

return typeof id === "string" ? document.getElementById(id) : id;

}

var zhj = {};

zhj.slide = function(index){

var transX = 74*index;

$('chage').style['-webkit-transform'] = 'translate('+transX+'px,0px)';

}

希望本文所述对大家的css3网页设计有所帮助。