这篇文章主要讲解了“用css3的transition属性制作的菜单导航效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“用css3的transition属性制作的菜单导航效果”吧！

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的梅里斯网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

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

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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/css3-transition-menu-codes/

具体代码如下：

代码如下:

 当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：
 -webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
 -webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）
 qq群:197326136

 

首页

 

脚本

 

特效

 

源码

 

下载

 

感谢各位的阅读，以上就是“用css3的transition属性制作的菜单导航效果”的内容了，经过本文的学习后，相信大家对用css3的transition属性制作的菜单导航效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！

文章标题：用css3的transition属性制作的菜单导航效果-创新互联
本文来源：http://myzitong.com/article/ddppgh.html