在前面，我們已經(jīng)講解了transform這個(gè)屬性以及案例，那么本文會(huì)進(jìn)一步結(jié)合transform和transition兩個(gè)屬性，并制作一個(gè)簡(jiǎn)單的案例進(jìn)行說(shuō)明。

一、transition屬性說(shuō)明

接下來(lái)簡(jiǎn)單分析一下transition這個(gè)屬性的定義以及子屬性。

1)ansition-property ?要運(yùn)動(dòng)的樣式 ?(all || [attr] || none)

2)transition-duration 運(yùn)動(dòng)時(shí)間

3)transition-delay 延遲時(shí)間

4)transition-timing-function 運(yùn)動(dòng)形式

ease：(逐漸變慢)默認(rèn)值

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-前綴；而其余高版本瀏覽器支持標(biāo)準(zhǔn)寫(xiě)法。

看一個(gè)簡(jiǎn)單的例子：

當(dāng)鼠標(biāo)經(jīng)過(guò)div時(shí)，實(shí)現(xiàn)該div的顏色改變，以及高度和寬度都改變的效果。

實(shí)現(xiàn)代碼：

transition

.box{

width:100px;

height:100px;

background-color: blue;

transition-duration: 2s;

/* 以下三值為默認(rèn)值，稍后會(huì)詳細(xì)介紹 */

transition-property: all;

transition-timing-function: ease;

transition-delay: 0s;

}

.box:hover{

width:200px;

height:200px;

background-color: red;

}

過(guò)渡transition的這四個(gè)子屬性只有是必需值且不能為0。其中，和都是時(shí)間。當(dāng)兩個(gè)時(shí)間同時(shí)出現(xiàn)時(shí)，第一個(gè)是，第二個(gè)是；當(dāng)只有一個(gè)時(shí)間時(shí)，它是，而為默認(rèn)值0。

transition: || || ||

transition的這四個(gè)子屬性之間不能用逗號(hào)隔開(kāi)，只能用空格隔開(kāi)。因?yàn)槎禾?hào)隔開(kāi)的代表不同的屬性(transition屬性支持多值，多值部分稍后介紹)；而空格隔開(kāi)的代表不同屬性的四個(gè)關(guān)于過(guò)渡的子屬性。

二、案例：扇形導(dǎo)航

實(shí)現(xiàn)代碼：

扇形導(dǎo)航

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);

};

};

案例說(shuō)明：

1、案例中涉及兩個(gè)點(diǎn)擊事件，一個(gè)是點(diǎn)擊主菜單時(shí)會(huì)進(jìn)行旋轉(zhuǎn)，并出現(xiàn)扇形導(dǎo)航，另外一個(gè)是點(diǎn)擊扇形導(dǎo)航時(shí)會(huì)使導(dǎo)航圖片變大。

(1)首先是點(diǎn)擊主菜單：我們?cè)邳c(diǎn)擊主菜單的時(shí)候，圖片會(huì)旋轉(zhuǎn)，在這個(gè)中，我們使用了webkitTransform="rotate(-360deg)";這個(gè)屬性就可以實(shí)現(xiàn)，在這個(gè)過(guò)程中要記得當(dāng)鼠標(biāo)反復(fù)點(diǎn)擊后者點(diǎn)擊結(jié)束后的事件效果。所以，我在其中設(shè)置了一個(gè)變量onOff進(jìn)行判斷，初始值為true，首先進(jìn)行判斷，如果為true就可旋轉(zhuǎn)，相反的，為了達(dá)到更好的效果，這里設(shè)置了旋轉(zhuǎn)360度，最后記得加上onOff=!onOff;，否則這個(gè)操作還是錯(cuò)誤的，達(dá)不到我們想要的效果。

oHome.οnclick=function(){

if (onOff){

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

}else{

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

}

onOff=!onOff;

};

(2)其次是出現(xiàn)扇形導(dǎo)航，在這里使用的就是transform屬性，我們以主菜單為中心進(jìn)行旋轉(zhuǎn)，將其他的5個(gè)子菜單分別平均分布在扇形中。那么首先，我們是不是應(yīng)該先來(lái)計(jì)算一下角度以及半徑的關(guān)系。

至于sin和cos如何計(jì)算，以及邊和角度如何計(jì)算這里就不詳細(xì)說(shuō)明。

附上我寫(xiě)的：

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

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

(3)最后是如何是點(diǎn)擊圖片的時(shí)候，讓圖片變大。為了實(shí)現(xiàn)這個(gè)效果，我采用了transform的scale()函數(shù)，

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

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

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

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

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

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

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

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

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

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

注意：

默認(rèn)值：none ? ? ? ? ? ? 使用對(duì)象：塊元素和直列元素 ? ? ? ? ? ? 值的繼承：不繼承

2、過(guò)渡完成事件

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

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

當(dāng)如果多使用一個(gè)樣式屬性，在每個(gè)動(dòng)畫(huà)執(zhí)行的過(guò)程中webkitTransitionEnd事件的觸發(fā)次數(shù)將多增加兩次。也就是說(shuō)webkitTransitionEnd事件將在元素的每個(gè)樣式屬性值發(fā)生改變之后觸發(fā)一次。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。