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


Posted in HTML / CSS onSeptember 01, 2015

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

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

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

复制代码
代码如下:
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的属性transition制作菜单导航</title>
<style>
*{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;
}
</style>
</head>
<body>
<section class="tips">
当你运动层在显示层下面时,transition会使页面产生闪动,原因是Chrome在初始渲染CSS动画时产生的Bug,虽然暂时无法考证这个问题的根本原因,但是目前已知的解决方案有两条:
-webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏)
-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D )
qq群:197326136
</section>
<section id="nav">
<li href="#" title="css3菜单,css3菜单导航">首页</li>
<li href="#" class="nav_2" onmouseover = "zhj.slide(1);" onmouseout = "zhj.slide(0);">脚本</li>
<li href="#" onmouseover = "zhj.slide(2);" onmouseout = "zhj.slide(0);">特效</li>
<li href="#" onmouseover = "zhj.slide(3);" onmouseout = "zhj.slide(0);">源码</li>
<li href="#" onmouseover = "zhj.slide(4);" onmouseout = "zhj.slide(0);">下载</li>
<li href="javascript:void(0);" id="chage"></li>
</section>
</body>
<script type="text/javascript">
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)';
}
</script>
</html>

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

HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 #HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 #HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 #HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 #HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 #HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 #HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 #HTML / CSS
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python中查看变量内存地址的方法
2015/05/05 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python装饰器用法实例总结
2018/05/26 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
IBatis持久层技术
2016/07/18 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
通信生自我鉴定
2014/01/18 职场文书
工作表现评语
2014/01/19 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
校庆口号
2014/06/20 职场文书
顶岗实习协议书
2015/01/29 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
Django 如何实现文件上传下载
2021/04/08 Python