加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 在线留言 | RSS
成网科技业务包括域名空间企业网站制作
 
国际域名com/net/org仅售80元/年
1G独立空间(PHP+MYSQL)仅售600元/年
您当前的位置:首页 > 网页制作 > Div+CSS

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

时间:2015-09-30 11:40:13  来源:互联网  作者:佚名  点击:

这篇文章主要为大家介绍了基于css3的属性transition制作菜单导航效果,可实现鼠标滑过菜单项动态改变背景滑块的功能,基于css3的属性transition实现,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。具体如下:Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

CSS3导航菜单,当你运动层在显示层下面时,transition会使页面产生闪动,原因是Chrome在初始渲染CSS动画时产生的Bug,虽然暂时无法考证这个问题的根本原因,但是目前已知的解决方案有两条: Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

-webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏) Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D )。Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

运行效果截图如下:Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在线演示地址如下:Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

http://demo.jb51.net/js/2015/css3-transition-menu-codes/Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

具体代码如下:Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设


复制代码代码如下:<!DOCTYPE HTML>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<html lang=zh-cn>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<head>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<title>css3的属性transition制作菜单导航</title>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<style>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
*{margin:0px;padding:0px;}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
body{background:#45B5DA;margin:0px;padding:0px;}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.tips{width:370px;margin:0 auto;line-height:24px;padding-top:10px;}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.bredcolor{color:#fff;}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
#nav{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-185px;}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
li{Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
width:74px;height:40px;text-align:center;float:left;line-height:40px;color:#fff;text-decoration:none;list-style:none;cursor : pointer;Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
li#chage{Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
width:70px;height:38px;display:block;position:absolute;left:0px;z-index:-1;border:2px solid #191919;Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
border-radius:10px;Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
background:-webkit-gradient(linear, 0 100%, 0 0, from(black), color-stop(0.5, black), color-stop(0.52,#313131), to(#6A6A6A));Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
box-shadow:0px 2px 0px rgba(255, 255, 255, .3);Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
-webkit-transform: translate(0px,0px);Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
-webkit-transition:-webkit-transform .2s ease-out;Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</style>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</head>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<body>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<section class="tips">Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
当你运动层在显示层下面时,transition会使页面产生闪动,原因是Chrome在初始渲染CSS动画时产生的Bug,虽然暂时无法考证这个问题的根本原因,但是目前已知的解决方案有两条:Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
-webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏)Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D )Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
qq群:197326136Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</section>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<section id="nav">Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<li href="#" title="css3菜单,css3菜单导航">首页</li>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<li href="#" class="nav_2" onmouseover = "zhj.slide(1);" onmouseout = "zhj.slide(0);">脚本</li>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<li href="#" onmouseover = "zhj.slide(2);" onmouseout = "zhj.slide(0);">特效</li>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<li href="#" onmouseover = "zhj.slide(3);" onmouseout = "zhj.slide(0);">源码</li>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<li href="#" onmouseover = "zhj.slide(4);" onmouseout = "zhj.slide(0);">下载</li>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<li href="javascript:void(0);" id="chage"></li>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</section>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</body>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<script type="text/javascript">Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function $(id){Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
return typeof id === "string" ? document.getElementById(id) : id;Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var zhj = {};Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zhj.slide = function(index){Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var transX = 74*index;Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
$('chage').style['-webkit-transform'] = 'translate('+transX+'px,0px)';Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</script>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</html>Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

希望本文所述对大家的css3网页设计有所帮助。Ut6成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

成网科技 www.it28.com竭诚为您服务!
开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设_成网科技

更多
 


来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
栏目更新
栏目热门