css3导航栏怎么设置,css3 导航栏

导航栏

*{

margin: 0;

padding: 0;

list-style: none;

}

.outer{

width: 49px;

height: 49px;

position: fixed;

right: 0;

bottom: 0;

}

.home{

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

position: relative;

z-index: 1;

border-radius: 50%;

width: 49px;

height: 49px;

transition: all .5s linear;

}

.list{

width: 42px;

height: 42px;

position: absolute;

left: 4px;

top: 9px;

border-radius: 50%;

}

.list li {

width: 42px;

height: 42px;

border-radius: 50%;

position: absolute;

left: 0;

top: 0;

}

.list li:nth-child(1){

background: url("./img_navi/open.png") center center no-repeat;

}

.list li:nth-child(2){

background: url("./img_navi/clos.png") center center no-repeat;

}

.list li:nth-child(3){

background: url("./img_navi/full.png") center center no-repeat;

}

.list li:nth-child(4){

background: url("./img_navi/refresh.png") center center no-repeat;

}

.list li:nth-child(5){

background: url("./img_navi/prev.png") center center no-repeat;

}

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

var oLis = document.querySelectorAll("ul li");

var r = 200;//自定义一个半径长

var flag = true;

oHome.onclick = function () {

if(flag){

oHome.style.transform = "rotate(-360deg)";

oLis.forEach(function (item,index,arr) {

//转换为弧度计算，js中 sin 、cos 、tan 里面只能用弧度

item.style.left = - Math.sin(index * 90/(oLis.length-1) * Math.PI /180) * r +"px";

item.style.top = - Math.cos(index * 90/(oLis.length-1) * Math.PI /180) * r +"px";

item.style.transform = "rotate(360deg)";

//延迟不同的时间

item.style.transition = "all .5s linear "+ 0.1 * index+"s";

})

}else {

oHome.style.transform = "rotate(0deg)";

oLis.forEach(function (item,index,arr) {

item.style.left = 0 +"px";

item.style.top = 0 +"px";

item.style.transform = "rotate(0deg)";

//延迟不同的时间

item.style.transition = "all .5s linear"+ 0.1 * (oLis.length - index)+"s";

})

}

flag = !flag;

}

oLis.forEach(function (item,index) {

item.onclick = function () {

//记得加上前面的效果rotate(360deg)，有覆盖的问题

this.style.transform = "rotate(360deg) scale(1.2)";

this.style.transition = "all 0.5s linear";

function fn1() {

this.style.transform = "rotate(360deg) scale(1)";

this.removeEventListener("transitionend",fn1);

}

this.addEventListener("transitionend" ,fn1 ,false);

}

})