您的位置：首页 > Web前端 > CSS

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

2017-01-12 21:50 639 查看

在前面，我们已经讲解了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事件将在元素的每个样式属性值发生改变之后触发一次。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航