根据css3的特性transition制做菜单导航栏实际效果

日期:2020-12-12 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

本文案例讲述了根据css3的特性transition制做菜单导航栏实际效果。共享给大伙儿供大伙儿参照。实际以下:

CSS3导航栏菜单,当你健身运动层在显示信息层下面时,transition会使网页页面造成闪烁,缘故是Chrome在原始3D渲染CSS动漫时造成的Bug,尽管临时没法考证这个难题的压根缘故,可是现阶段已知的处理计划方案有两条:

-webkit-backface-visibility: hidden;(设定开展变换的元素的反面在应对客户时是不是可见:掩藏)

-webkit-transform-style: preserve⑶d; (设定嵌入的元素在 三d 室内空间怎样展现:保存 三d )。

运作实际效果截图以下:

线上演试详细地址以下:

http://demo.jb51.net/js/2015/css3-transition-menu-codes/

实际编码以下:


拷贝编码
编码以下:
<!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:⑵0px;margin-left:⑴85px;}
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:⑴;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在原始3D渲染CSS动漫时造成的Bug,尽管临时没法考证这个难题的压根缘故,可是现阶段已知的处理计划方案有两条:
-webkit-backface-visibility: hidden;(设定开展变换的元素的反面在应对客户时是不是可见:掩藏)
-webkit-transform-style: preserve⑶d; (设定嵌入的元素在 三d 室内空间怎样展现:保存 三d )
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网页页面设计方案有一定的协助。