css3 五角星圆形导航

html

<div class="header">
        <div class="starte">start</div>
        <ul>
            <li class="w">one</li>
            <li class="w">two</li>
            <li class="w">three</li>
            <li class="w">four</li>
            <li class="w">five</li>
        </ul>
    </div>

css

*{
            margin:0;
            padding:0;
            list-style: none;
        }
        .header{
            width:300px;
            height:300px;
            margin:0 auto;
            margin-top:20px;
            position: relative;
            border-radius: 50%;
            border:1px solid red;
        }
        .starte{
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: gray;
            text-align: center;
            line-height: 50px;
            position: absolute;
            z-index: 999;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
        }


        li{
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: #00BFF0;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            transition: transform 1s;
        }

js

<script>
    (function(){
        var li=$('.w');
        //鼠标移出事件绑定在header 上面，可以方便选中具体操作标签
        $('.header').hover(function(){},function(){
            li.each(function(){
                $(this).css('transform','translate(0,0)');
            });
        });
        //鼠标移入事件绑定在 starte 上面，移出事件如果也绑定在starte上，如果想去选中新的标签，鼠标移出后标签会隐藏掉，导致无法选中，所以要把移出事件绑定在最外层父元素上
        $('.starte').hover(function(){
            li.each(function(index){
                switch (index){
                    case 0:{
                        $(this).css('transform','translate(0,-125px)');
                        break;
                    }
                    case 1:{
                        $(this).css('transform','translate(120px,-38px)');
                        break;
                    }
                    case 2:{
                        $(this).css('transform','translate(75px,100px)');
                        break;
                    }
                    case 3:{
                        $(this).css('transform','translate(-72px,102px)');
                        break;
                    }
                    case 4:{
                        $(this).css('transform','translate(-119px,-37px)');
                        break;
                    }
                }
            })
        },function(){});
    })()
</script>