倾斜的导航
*{margin:0;padding:0;list-style: none;}
.clearfix:after{content: "";clear: both;display: block;zoom:1;}
.list li{float: left;width: 100px;text-align: center;height: 30px;line-height: 30px;border-left: 1px solid #ddd;background: yellow;-webkit-transform:skewX(-30deg);position: relative;}
.list li a{color: #000;text-decoration: none; display: block;-webkit-transform:skewX(30deg); font-size: 12px;}
.list li span{position: absolute;left: 50%;top: 0;margin-left:-1px;display: block;width:2px;height:100%;background:yellow ;transition:0.8s;}
.list li:hover span{-webkit-transform:scaleX(50);background:rgba(108,245,85,0.7);}
<ul class="list clearfix">
<li><span></span><a href="#">导航一</a></li>
<li><span></span><a href="#">导航二</a></li>
<li><span></span><a href="#">导航三</a></li>
<li><span></span><a href="#">导航四</a></li>
</ul>
钟表
<style id="css">
*{margin:0;padding:0;list-style: none;}
.box{width:200px;height: 200px;margin:100px auto;border-radius:50%;border:1px solid #000;position: relative;}
.box .list{width:200px;height: 200px;position:relative;}
.box .list li{width: 2px;height: 7px;position: absolute;background: #000;-webkit-transform-origin:center 100px;left: 99px;top:0;}
.box .list li:nth-of-type(5n+1){height: 12px;}
.center{position: absolute;width: 14px;height: 14px;left: 93px;top: 93px;background: #000;border-radius: 50%;}
#hour{position: absolute;width: 6px;height: 45px;left: 97px;top: 55px;background: #000;-webkit-transform-origin:bottom;}
#min{position: absolute;width: 4px;height: 55px;left: 98px;top: 45px;background: #ccc;-webkit-transform-origin:bottom;}
#sec{position: absolute;width: 2px;height: 70px;left: 99px;top: 30px;background: red;-webkit-transform-origin:bottom;}
</style>
<div class="box">
<ul class="list" id="list">
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="center"></div>
</div>
var oList = document.getElementById('list');
var oCss = document.getElementById('css');
var oHour = document.getElementById('hour');
var oMin = document.getElementById('min');
var oSec = document.getElementById('sec');
var aLi = '';
var css = '';
for(var i=0;i<60;i++){
aLi += '<li></li>';
css += '.box .list li:nth-of-type('+ (i+1) +'){-webkit-transform:rotate('+ i*6 +'deg);}';
oList.innerHTML = aLi;
oCss.innerHTML += css;
}
getTime();
setInterval(getTime,1000);
function getTime(){
var oDate = new Date();
var iSec = oDate.getSeconds();
var iMin = oDate.getMinutes()+iSec/60;
var iHour = oDate.getHours()+iMin/60;
oSec.style.WebkitTransform = "rotate("+ iSec*6 +"deg)";
oMin.style.WebkitTransform = "rotate("+ iMin*6 +"deg)";
oHour.style.WebkitTransform = "rotate("+ iHour*30 +"deg)";
}
扇形导航
*{margin:0;padding:0;list-style: none;}
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{width: 100%;border-radius: 21px;position: absolute;left: 0;top: 0;-webkit-transition:0.5s all ease;}
#home{width:50px;height: 50px;background:#f9f9f9 url(3img/home.png) no-repeat 0 0;background-size: 100%;border-radius: 25px;position: absolute;left: 0;top: 0;transition:1s;}
window.onload = function(){
var oHome = document.getElementById('home');
var aImg = document.getElementById('menu_list').getElementsByTagName('img');
var bOn = true;
var oR = -150;
for(var i=0;i<aImg.length;i++){
aImg[i].onclick = function(){ // 点击导航时 放大,透明度降低
this.style.transition = "0.3s";
this.style.WebkitTransform = "scale(2) rotate(-360deg)";
this.style.opacity = 0.1;
addEnd(this,fn);
}
}
function fn(){
this.style.transition = "0.1s";
this.style.WebkitTransform = "scale(1) rotate(-360deg)";
this.style.opacity = 1;
removeEnd(this,fn); // 删除函数
}
oHome.onclick = function(){ // 点击home键时,所触发的事件
if(bOn){
oHome.style.WebkitTransform = "rotate(-360deg)";
for(var i=0;i<aImg.length;i++){
aImg[i].style.transition = "0.5s "+i*80+"ms";
aImg[i].style.left = dis(oR,90/4*i).l + 'px'; // 调用dis函数,并且传两个参数(距离,旋转角度)
aImg[i].style.top = dis(oR,90/4*i).t + 'px';
aImg[i].style.WebkitTransform = "scale(1) rotate(-360deg)";
}
}else{
oHome.style.WebkitTransform = "rotate(0deg)";
for(var i=0;i<aImg.length;i++){
aImg[i].style.transition = "0.5s "+(aImg.length-1-i)*80+"ms";
aImg[i].style.left = 0 + 'px';
aImg[i].style.top = 0 + 'px';
aImg[i].style.WebkitTransform = "scale(1) rotate(0deg)";
}
}
bOn = !bOn; // 每次触发事件后 bOn取反
}
function dis(iR,iDeg){
return {
l:Math.round(Math.sin(iDeg/180*Math.PI)*iR), // 导航距离home的水平距离
t:Math.round(Math.cos(iDeg/180*Math.PI)*iR) // 导航距离home的垂直距离
}
}
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);
}
}
<div id="menu">
<div id="menu_list">
<img src="3img/icon1.png" alt="">
<img src="3img/icon2.png" alt="">
<img src="3img/icon3.png" alt="">
<img src="3img/icon4.png" alt="">
<img src="3img/icon5.png" alt="">
</div>
<div id="home"></div>
</div>