基于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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS filter 有什么神奇用途
May 25 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分页函数
2006/07/08 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
PHP多例模式介绍
2013/06/24 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
分享别人写的一个小型js框架
2007/08/13 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python学习笔记之装饰器
2020/08/06 Python
Python编写万花尺图案实例
2021/01/03 Python
会计专业自我鉴定范文
2013/10/06 职场文书
档案接收函范文
2014/01/10 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
实习指导教师评语
2014/12/30 职场文书
三峡大坝导游词
2015/01/31 职场文书
世界红十字日活动总结
2015/02/10 职场文书
大学生入党自传2015
2015/06/26 职场文书