基于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 相关文章推荐
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
HTML基本元素标签介绍
Feb 28 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
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
删除节点的jquery代码
2014/01/13 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python感知机实现代码
2019/01/18 Python
python设置环境变量的作用整理
2020/02/17 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python加速程序运行的方法
2020/07/29 Python
django和flask哪个值得研究学习
2020/07/31 Python
Pycharm中如何关掉python console
2020/10/27 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
土木工程应届生求职信
2013/10/31 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
优秀员工获奖感言
2014/03/01 职场文书
四议两公开实施方案
2014/03/28 职场文书
教师节活动总结
2014/08/29 职场文书
2014年关工委工作总结
2014/11/17 职场文书
运动会表扬稿范文
2015/05/05 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript