预览加载中，请您耐心等待几秒...

基于css3的属性transition制作菜单导航效果.docx

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

基于css3的属性transition制作菜单导航效果基于css3的属性transition制作菜单导航效果导语：基于css3的属性transition制作菜单导航效果实例讲述了基于css3的属性transition制作菜单导航效果。下面百分网小编分享给大家供大家参考。具体如下：CSS3导航菜单，当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：-webkit-backface-visibility:hidden;(设置进行转换的元素的背面在面对用户时是否可见：隐藏)-webkit-transform-style:preserve-3d;(设置内嵌的'元素在3D空间如何呈现：保留3D)。运行效果截图如下：具体代码如下：代码如下:<!DOCTYPEHTML><htmllang=zh-cn><head><title>css3的属性transition制作菜单导航</title><style>*{margin:0px;padding:0px;}body{background:#45B5DA;margin:0px;padding:0px;}.tips{width:370px;margin:0auto;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:2pxsolid#191919;border-radius:10px;background:-webkit-gradient(linear,0100%,00,from(black),color-stop(0.5,black),color-stop(0.52,#313131),to(#6A6A6A));box-shadow:0px2px0pxrgba(255,255,255,.3);-webkit-transform:translate(0px,0px);-webkit-transition:-webkit-transform.2sease-out;}</style></head><body><sectionclass="tips">当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：-webkit-backface-visibility:hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）-webkit-transform-style:preserve-3d;（设置内嵌的元素在3D空间如何呈现：保留3D）qq群:197326136</section><sectionid="nav"><lihref="#"title＝"css3菜单,css3菜单导航">首页</li><lihref="#"class="nav_2"onmouseover="zhj.slide(1);"onmouseout="zhj.slide(0);">脚本</li><lihref="#"onmouseover="zhj.slide(2);"onmouseout="zhj.slide(0);">特效</li><lihref="#"onmouseover="zhj.slide(3);"onmouseout=&quot