潭州多边形导航案例开发

0x01 布局总览

多边形导航布局总览示意图

0x02 代码开发

html布局代码

<div id="nav">
        <ul>
            <li>
                <img src="img/c++.png" width="80px" width="80px">
            </li>
            <li><img src="img/php.png" width="80px" width="80px"></li>
            <li><img src="img/java.png" width="80px" width="80px"></li>
            <li><img src="img/py.png" width="80px" width="80px"></li>
            <li><img src="img/go.png" width="80px" width="80px"></li>
            <li class="six">
                <img src="img/py.png" width="80px" width="80px">
            </li>
            <li><img src="img/go.png" width="80px" width="80px"></li>
            <li><img src="img/php.png" width="80px" width="80px"></li>
            <li><img src="img/c++.png" width="80px" width="80px"></li>
            <li><img src="img/go.png" width="80px" width="80px"></li>
            <li><img src="img/py.png" width="80px" width="80px"></li>
            <li><img src="img/php.png" width="80px" width="80px"></li>
            <li><img src="img/java.png" width="80px" width="80px"></li>
            <li><img src="img/c++.png" width="80px" width="80px"></li>
        </ul>
    </div>

**CSS样式代码

    *{margin: 0;padding: 0;}
        body{
            background: url('img/bg.jpg');
            background-size: 100% 100%;

        }
        #nav{
            width: 950px;
            height: 500px;
            margin:100px  auto;
        }
        #nav ul li{
            position: relative;
            list-style: none;
            width: 180px;
            height: 105px;
            background: rgba(0,0,0,0.5);
            float: left;
            margin: 30px 5px;
        }
        #nav ul li:before,#nav ul li:after{
            content: "";
            position: absolute;
            width: 180px;
            height: 108px;
            background: rgba(0,0,0,0.5);
            transform: rotate(60deg);       
        }
        #nav ul li:after{
            transform: rotate(-60deg);  
        }

        #nav ul li.six{
            margin-left: 100px;

        }
        #nav ul li img{
            position: absolute;
            z-index: 10;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            transition: 0.5s;
        }
        #nav ul li img:hover{
            transform: rotate(360deg) scale(1.5);   
        }

0x03 效果图

多边形导航案例开发效果图