css案例（一）

倾斜的导航

*{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>