基于css3的屬性transition制作菜單導(dǎo)航效果
發(fā)布時(shí)間：2015-09-01 11:43:27 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了基于css3的屬性transition制作菜單導(dǎo)航效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)動(dòng)態(tài)改變背景滑塊的功能,基于css3的屬性transition實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了基于css3的屬性transition制作菜單導(dǎo)航效果。分享給大家供大家參考。具體如下：
CSS3導(dǎo)航菜單，當(dāng)你運(yùn)動(dòng)層在顯示層下面時(shí)，transition會使頁面產(chǎn)生閃動(dòng)，原因是Chrome在初始渲染CSS動(dòng)畫時(shí)產(chǎn)生的Bug，雖然暫時(shí)無法考證這個(gè)問題的根本原因，但是目前已知的解決方案有兩條：
-webkit-backface-visibility: hidden;（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時(shí)是否可見：隱藏）
-webkit-transform-style: preserve-3d; （設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D ）。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css3-transition-menu-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的屬性transition制作菜單導(dǎo)航</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">
當(dāng)你運(yùn)動(dòng)層在顯示層下面時(shí)，transition會使頁面產(chǎn)生閃動(dòng)，原因是Chrome在初始渲染CSS動(dòng)畫時(shí)產(chǎn)生的Bug，雖然暫時(shí)無法考證這個(gè)問題的根本原因，但是目前已知的解決方案有兩條：
-webkit-backface-visibility: hidden;（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時(shí)是否可見：隱藏）
-webkit-transform-style: preserve-3d; （設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D ）
qq群:197326136
</section>
<section id="nav">
<li href="#" title＝"css3菜單,css3菜單導(dǎo)航">首頁</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>
<html lang=zh-cn>
<head>
<title>css3的屬性transition制作菜單導(dǎo)航</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">
當(dāng)你運(yùn)動(dòng)層在顯示層下面時(shí)，transition會使頁面產(chǎn)生閃動(dòng)，原因是Chrome在初始渲染CSS動(dòng)畫時(shí)產(chǎn)生的Bug，雖然暫時(shí)無法考證這個(gè)問題的根本原因，但是目前已知的解決方案有兩條：
-webkit-backface-visibility: hidden;（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時(shí)是否可見：隱藏）
-webkit-transform-style: preserve-3d; （設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D ）
qq群:197326136
</section>
<section id="nav">
<li href="#" title＝"css3菜單,css3菜單導(dǎo)航">首頁</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網(wǎng)頁設(shè)計(jì)有所幫助。
相關(guān)文章
CSS3中動(dòng)畫屬性transform、transition和animation屬性的區(qū)別
最近在項(xiàng)目中用到了CSS3中的動(dòng)畫屬性。無奈對于css3幾個(gè)新加的屬性不太熟悉，常常容易搞混。所以從網(wǎng)站研究了點(diǎn)資料，總結(jié)一下，方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25- 這篇文章主要為大家詳細(xì)介紹了CSS3中Transition動(dòng)畫屬性用法，教大家如何使用Transition動(dòng)畫，感興趣的小伙伴們可以參考一下2016-07-04
CSS3中的Transition過度與Animation動(dòng)畫屬性使用要點(diǎn)
這篇文章主要介紹了CSS3中的Transition過度與Animation動(dòng)畫屬性使用要點(diǎn)Transition和Animation能被用來制作基本的頁面圖片動(dòng)態(tài)效果,當(dāng)然進(jìn)一步的控制還是需要JavaScript的2016-05-20利用CSS3的transition屬性實(shí)現(xiàn)滑動(dòng)效果
這篇文章主要介紹了利用CSS3的transition屬性實(shí)現(xiàn)滑動(dòng)效果,是CSS3入門學(xué)習(xí)時(shí)的基本應(yīng)用,需要的朋友可以參考下2015-08-05- 這篇文章主要介紹了css3的transition屬性詳解,需要的朋友可以參考下2014-12-15
- W3C標(biāo)準(zhǔn)中對CSS3的transition這是樣描述的:“CSS的transition允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎?/div> 2014-09-02
CSS3新屬性transition-property transform box-shadow實(shí)例學(xué)習(xí)
本文將為大家介紹下CSS3新屬性transition-property transform box-shadow的使用，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)css3有所幫助2013-06-06
使用css transition屬性實(shí)現(xiàn)一個(gè)帶動(dòng)畫顯隱的微信小程序部件
這篇文章主要介紹了使用css transition屬性實(shí)現(xiàn)一個(gè)帶動(dòng)畫顯隱的微信小程序部件的相關(guān)資料,需要的朋友可以參考下2018-06-13最新評論
