页面仔玩样式

demo地址：http://codepen.io/tianzi77/pen/pJYQLw

结构html：

    <!--做一名合格的页面仔-->
    <div id="nav">
        <ul>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
            <li>hl</li>
        </ul>
    </div>
    <!--应该从规范代码开始-->

样式：

        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-family:sans-serif;
        }
        div#nav ul{
            width: 852.7px;
            line-height: 40px;
            height: 40px;
            margin: 100px auto;
        }
        div#nav ul li{
            float: left;
            list-style: none;
            width: 75.7px;
            height: 40px;
            background: yellow;
            border-right: 2px dotted lightpink;
            text-align: center;
            cursor: pointer;
            color: #abcdef;
            border-radius: 10px;
            transition: all .8s linear;
            font: 20px;
            transform: rotate(-30deg);
        }
        div#nav ul li:last-child{
            border-right: none;
        }
        div#nav ul li:nth-child(6){
            transform: rotate(0deg);
            background: -webkit-linear-gradient(left top,red,yellow);
        }
        div#nav ul li:nth-child(1),div#nav ul li:nth-child(2),div#nav ul li:nth-child(3),div#nav ul li:nth-child(4),div#nav ul li:nth-child(5){
            background:red;
            color: black;
        }
        div#nav ul li:hover{
            background: #abcdef;
            color: #fff;
            transform: rotate(360deg) scale(1.4);
            border-radius: 50%;
            font-size: 40px;
        }
            div#nav ul li:nth-child(6):hover{
            transform: rotate(3600deg);
        }

ps：好想睡觉

版权声明：本文为博主原创文章，未经博主允许不得转载。