css3的属性transition制作菜单导航

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3的属性transition制作菜单导航-css3实例站</title>
<meta name="keywords" content="css3菜单 transition css3菜单导航 CSS3 CSS3培训 css3实例">
<meta name="description" content="css3菜单、transition、css3菜单导航、HTML5技术、WEB编程技术、前端研究、CSS3培训、css3实例">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="generator" content="Editplus ">
<meta name="author" content="Author:张会杰,QQ:871925574">
<meta name="robots" content="ALL">
<meta name="copyright" content="张会杰-css3实例站[url]www.css3train.com[/url]"> 


<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">
  由于工作原因,本站只做safari实例。<br>
  <p class="bredcolor">css3小技巧:</p>
  当你运动层在显示层下面时,transition会使页面产生闪动,原因是Chrome在初始渲染CSS动画时产生的Bug,虽然暂时无法考证这个问题的根本原因,但是目前已知的解决方案有两条:<br>
  -webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏)<br>
  -webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D )<br>
  qq群:197326136
</section>
<section id="nav">
  <li href="http://wwww.css3train.com" title="css3菜单,css3菜单导航">首页</li>
  <li href="http://wwww.css3train.com" class="nav_2" onmouseover = "zhj.slide(1);" onmouseout = "zhj.slide(0);">首页</li>
  <li href="http://wwww.css3train.com" onmouseover = "zhj.slide(2);" onmouseout = "zhj.slide(0);">首页</li>
  <li href="http://wwww.css3train.com" onmouseover = "zhj.slide(3);" onmouseout = "zhj.slide(0);">首页</li>
  <li href="http://wwww.css3train.com" 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值