在前面，我們已經講解了transform這個屬性以及案例，那么本文會進一步結合transform和transition兩個屬性，并制作一個簡單的案例進行說明。

一、transition屬性說明

接下來簡單分析一下transition這個屬性的定義以及子屬性。

1)ansition-property ?要運動的樣式 ?(all || [attr] || none)

2)transition-duration 運動時間

3)transition-delay 延遲時間

4)transition-timing-function 運動形式

ease：(逐漸變慢)默認值

linear：(勻速)

ease-in：(加速)

ease-out：(減速)

ease-in-out：(先加速后減速)

cubic-bezier 貝塞爾曲線( x1, y1, x2, y2 ) http://matthewlein.com/ceaser/

[注意]IE9-不支持該屬性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前綴；而其余高版本瀏覽器支持標準寫法。

看一個簡單的例子：

當鼠標經過div時，實現該div的顏色改變，以及高度和寬度都改變的效果。

實現代碼：

transition

.box{

width:100px;

height:100px;

background-color: blue;

transition-duration: 2s;

/* 以下三值為默認值，稍后會詳細介紹 */

transition-property: all;

transition-timing-function: ease;

transition-delay: 0s;

}

.box:hover{

width:200px;

height:200px;

background-color: red;

}

過渡transition的這四個子屬性只有是必需值且不能為0。其中，和都是時間。當兩個時間同時出現時，第一個是，第二個是；當只有一個時間時，它是，而為默認值0。

transition: || || ||

transition的這四個子屬性之間不能用逗號隔開，只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支持多值，多值部分稍后介紹)；而空格隔開的代表不同屬性的四個關于過渡的子屬性。

二、案例：扇形導航

實現代碼：

扇形導航

html{

height:100%;

overflow:hidden;

}

body{

background:#f9f9f9;

}

#menu{

width:50px;

height:50px;

position:fixed;

right:20px;

bottom:20px;

}

#menu_list{

height:42px;

width:42px;

position:relative;

margin:4px;

}

#menu_list img{

border-radius:21px;

position:absolute;

left:0;

top:0;

}

#home{

width:50px;

height:50px;

background:url("images/home.png") no-repeat;

border-radius:25px;

position:absolute;

left:0;

top:0;

transition: 0.3s;

}

window.οnlοad= function () {

var oHome = document.getElementById("home");

var aImg = document.getElementById("menu_list").getElementsByTagName("img");

var iRadius=-150;

var onOff = true;

for(var i = 0; i< aImg.length;i++){

aImg[i].οnclick= function () {

this.style.transition="0.3s";

this.style.WebkitTransform="scale(2) rotate(-720deg)";

this.style.opacity=0.1;

addEnd(this,end);

};

};

function end(){

this.style.transition="0.1s";

this.style.WebkitTransform="scale(1) rotate(-720deg)";

this.style.opacity=1;

removeEnd(this,end);

};

oHome.οnclick=function(){

if (onOff){

this.style.webkitTransform="rotate(-360deg)";

for(var i = 0; i< aImg.length; i ++){

var oLt = getTL(iRadius,90/4*i);

aImg[i].style.transition="0.5s+"+i*100+"ms";

aImg[i].style.left = oLt.oLeft+"px";

aImg[i].style.top = oLt.oTop+"px";

aImg[i].style.webkitTransform="scale(1) rotate(-720deg)";

}

}else{

this.style.webkitTransform="rotate(360deg)";

for(var i = 0; i< aImg.length; i ++){

aImg[i].style.transition="0.5s+"+(aImg.length-i+1)*100+"ms";

aImg[i].style.left = 0+"px";

aImg[i].style.top = 0+"px";

aImg[i].style.webkitTransform="scale(1) rotate(0deg)";

}

}

onOff=!onOff;

};

function getTL(iRadius,iDeg){

var oLeft = Math.round(Math.sin(iDeg/180*Math.PI)*iRadius);

var oTop = Math.round(Math.cos(iDeg/180*Math.PI)*iRadius);

return {oLeft:oLeft,oTop:oTop};

};

function addEnd(obj,fn){

obj.addEventListener("WebkitTransitionEnd",fn,false);

obj.addEventListener("transitionend",fn,false);

};

function removeEnd(obj,fn){

obj.removeEventListener("WebkitTransitionEnd",fn,false);

obj.removeEventListener("transitionend",fn,false);

};

};

案例說明：

1、案例中涉及兩個點擊事件，一個是點擊主菜單時會進行旋轉，并出現扇形導航，另外一個是點擊扇形導航時會使導航圖片變大。

(1)首先是點擊主菜單：我們在點擊主菜單的時候，圖片會旋轉，在這個中，我們使用了webkitTransform="rotate(-360deg)";這個屬性就可以實現，在這個過程中要記得當鼠標反復點擊后者點擊結束后的事件效果。所以，我在其中設置了一個變量onOff進行判斷，初始值為true，首先進行判斷，如果為true就可旋轉，相反的，為了達到更好的效果，這里設置了旋轉360度，最后記得加上onOff=!onOff;，否則這個操作還是錯誤的，達不到我們想要的效果。

oHome.οnclick=function(){

if (onOff){

this.style.webkitTransform="rotate(-360deg)";

}else{

this.style.webkitTransform="rotate(360deg)";

}

onOff=!onOff;

};

(2)其次是出現扇形導航，在這里使用的就是transform屬性，我們以主菜單為中心進行旋轉，將其他的5個子菜單分別平均分布在扇形中。那么首先，我們是不是應該先來計算一下角度以及半徑的關系。

至于sin和cos如何計算，以及邊和角度如何計算這里就不詳細說明。

附上我寫的：

var oLeft = Math.round(Math.sin(iDeg/180*Math.PI)*iRadius);

var oTop = Math.round(Math.cos(iDeg/180*Math.PI)*iRadius);? ? ? round()函數是為了取整。

(3)最后是如何是點擊圖片的時候，讓圖片變大。為了實現這個效果，我采用了transform的scale()函數，

1)scale(X方向上的比率，Y方向上的比率)

使用scale()函數指定X方向與Y方向上的2D伸縮比率。可以省略第二個值，省略時與第一個值相同。

2)scaleX(x方向上的比率)

使用scaleX()函數指定X方向上的伸縮比率，這時Y與Z方向上的比率為1。

3)scaleY(Y方向上的比率)

使用scaleY()函數指定Y方向上的伸縮比率，這時X與Z方向上的比率為1。

4)scaleZ(Z方向上的比率)

當定義了一個3D變形時，使用scaleZ()函數指定Z方向上的伸縮比率。這時X與Y方向上的比率為1。

5)scale3d(X方向上的比率,Y方向上的比率,Z方向上的比率)

當定義了一個3D變形時，使用scaleZ()函數指定Z方向上的伸縮比率。這時X與Y方向上的比率為1。

注意：

默認值：none ? ? ? ? ? ? 使用對象：塊元素和直列元素 ? ? ? ? ? ? 值的繼承：不繼承

2、過渡完成事件

Webkit內核： obj.addEventListener('webkitTransitionEnd',function(){},false);

firefox: obj.addEventListener('transitionend',function(){},false);

當如果多使用一個樣式屬性，在每個動畫執行的過程中webkitTransitionEnd事件的觸發次數將多增加兩次。也就是說webkitTransitionEnd事件將在元素的每個樣式屬性值發生改變之后觸發一次。

總結

以上是生活随笔為你收集整理的html的扇形代码导航,CSS3--利用transform和transition属性制作扇形导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。