溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“用css3的transition屬性制作的菜單導航效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“用css3的transition屬性制作的菜單導航效果”吧！
本文實例講述了基于css3的屬性transition制作菜單導航效果。分享給大家供大家參考。具體如下：
CSS3導航菜單，當你運動層在顯示層下面時，transition會使頁面產生閃動，原因是Chrome在初始渲染CSS動畫時產生的Bug，雖然暫時無法考證這個問題的根本原因，但是目前已知的解決方案有兩條：
-webkit-backface-visibility: hidden;（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）
-webkit-transform-style: preserve-3d; （設置內嵌的元素在 3D 空間如何呈現：保留 3D ）。
運行效果截圖如下：
在線演示地址如下：
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:-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的transition屬性制作的菜單導航效果”的內容了，經過本文的學習后，相信大家對用css3的transition屬性制作的菜單導航效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
