CSS3--利用transform和transition属性制作扇形导航

来源：互联网发布：软件测试视频编辑：程序博客网时间：2024/04/29 04:28

在前面，我们已经讲解了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的颜色改变，以及高度和宽度都改变的效果。

实现代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>transition</title>    <style>        .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;        }    </style></head><body>    <div class="box"></div></body></html>

过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0。其中，<transition-duration>和<transition-delay>都是时间。当两个时间同时出现时，第一个是<transition-duration>，第二个是<transition-delay>；当只有一个时间时，它是<transition-duration>，而<transition-delay>为默认值0。

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。

二、案例：扇形导航

实现代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>扇形导航</title>    <style>        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;        }    </style></head><body>    <div id="menu">        <div id="menu_list">            <img src="images/prev.png" alt=""/>            <img src="images/open.png" alt="" />            <img src="images/clos.png" alt="" />            <img src="images/full.png" alt="" />            <img src="images/refresh.png" alt="" />        </div>        <div id="home"></div>    </div></body><script>    window.onload= 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].onclick= 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.onclick=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);        };    };</script></html>

案例说明：

1、案例中涉及两个点击事件，一个是点击主菜单时会进行旋转，并出现扇形导航，另外一个是点击扇形导航时会使导航图片变大。

（1）首先是点击主菜单：我们在点击主菜单的时候，图片会旋转，在这个中，我们使用了webkitTransform="rotate(-360deg)";这个属性就可以实现，在这个过程中要记得当鼠标反复点击后者点击结束后的事件效果。所以，我在其中设置了一个变量onOff进行判断，初始值为true，首先进行判断，如果为true就可旋转，相反的，为了达到更好的效果，这里设置了旋转360度，最后记得加上onOff=!onOff;，否则这个操作还是错误的，达不到我们想要的效果。

    oHome.onclick=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);

当CSS 3的transition动画执行结束时，就触发webkitTransitionEnd事件。如果多使用一个样式属性，在每个动画执行的过程中webkitTransitionEnd事件的触发次数将多增加两次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。

1 0