css3实现扇形列表

transform基本语法
实现代码
最终效果截图

transform 基本语法

• 只支持标准浏览器
• 基本参数(translate,skew,scale,rotate)

实现代码

html

<div class="menu" id="menu">
    <ul class="menu-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="home">点击</div>
</div>

css

<style>
        div, ul, li {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        body {
            background: #f9f9f9;
        }

        .menu {
            width: 50px;
            height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }

        .menu-list {
            width: 42px;
            height: 42px;
            position: relative;
        }
        .menu-list li:hover{
            -webkit-transform: scale(1.2);
            -webkit-transition: .5s ease-in-out all;
        }

        .menu-list li {
            cursor: pointer;
            margin: 4px;
            color: #fff;
            line-height: 42px;
            text-align: center;
            width: 42px;
            height: 42px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 21px;
            -webkit-transition: 1s ease-in-out all;
        }

        .menu-list li:nth-child(1) {
            background: red;
        }

        .menu-list li:nth-child(2) {
            background: blue;
        }

        .menu-list li:nth-child(3) {
            background: black;
        }

        .menu-list li:nth-child(4) {
            background: purple;
        }

        .menu-list li:nth-child(5) {
            background: greenyellow;
        }

        .home {
            -webkit-transition: 1s all;
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 25px;
            background: #ccc;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }

    </style>

js

<script>
    var menu = document.getElementById("menu");
    var oLis = menu.querySelector(".menu-list").querySelectorAll("li");
    console.log(oLis)
    var home = menu.querySelector(".home");
    var onOff = true;
    var ir=-150;
    home.onclick = function () {
        if(onOff){
            for(var i=0;i<oLis.length;i++){
                var iTop=addValue(ir,90/4*(oLis.length-1-i));
                 oLis[i].style.webkitTransition="0.5s "+100*i+"ms";
                 oLis[i].style.top=iTop.l+"px";
                 oLis[i].style.left=iTop.t+"px";
            }
            this.style.webkitTransform="rotate(-360deg)";
        }else {
            for(var i=0;i<oLis.length;i++){
                oLis[i].style.webkitTransition="0.5s "+100*(oLis.length-i-1)+"ms";
                oLis[i].style.top=0+"px";
                oLis[i].style.left=0+"px";
            }
            this.style.webkitTransform="rotate(0deg)";
        }
        onOff = !onOff
    };

    //求top和left值； 用到正弦和余弦的知识；
    //知道直角三角的行的斜边和夹角；
    //正弦值：Math.sin(x) x 指的是弧度   余弦值:Math.cos(x)  x指的是弧度  Math.PI===π
    //角度转弧度 π/180*角度
    //sin=对边/斜边   cos=邻边/斜边
    function addValue(ih,iDeg){
        //求的对角的值(left)
       /* var left=Math.sin(iDeg/180*Math.PI)*ih;
        var top=Math.cos(iDeg/180*Math.PI)*ih*/

        return{
            l:Math.round(Math.sin(iDeg/180*Math.PI)*ih),
            t:Math.round(Math.cos(iDeg/180*Math.PI)*ih)
        }
    }


</script>

最终实现的效果截图