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

作者:互联网

2026-03-21

HTML教程

本文实例讲述了基于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/

具体代码如下:

复制代码代码如下:css3的属性transition制作菜单导航

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

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