扇形旋转多级菜单效果-html代码-BFW代码库

代码语言：html
代码描述：扇形旋转多级菜单效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>css3鼠标悬停扇形打开菜单代码 </title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
    position: relative;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #F7F8F8;
    background-size: 100% 100%;
        }

        .tips {
            width: 702px;
            margin: 0 auto;
            line-height: 24px;
            padding-top: 10px;
        }

        .bredcolor {
            color: #fff;
        }

        .menuHolder {
            width: 200px;
            height: 200px;
            position: absolute;
            z-index: 100;
            left: 0;
            top: 0;
            border-radius: 0 0 200px 0;
            border: 1px solid #0095da;
            border-top: none;
            border-left: none;
        }

        .menuHolder ul {
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
        }

        .menuHolder ul li {
            border-radius: 0 0 300px 0;
            width: 0;
            height: 0;
        }

        .menuHolder ul li a {
            color: #000;
            text-decoration: none;
            text-align: center;
            box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.4);
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .menuHolder ul.p1 li {
            position: absolute;
            left: 0;
            top: 0;
        }

        .menuHolder ul.p2 {
            z-index: -1;
        }

        .menuHolder ul.p3 {
            z-index: -1;
        }

        .menuHolder li.s1 > a {
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            background: #01040c url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURQAAAACg6R0rUB0rUB0rUB0rUACg6R0rUB0rUB0rUB0rUB0rUB0rUBdIdR0rUB0rUB0rUB0rUB0rUACg6QCg6QCg6QCg6R0rUACg6QCg6R0rUB0rUB0rUACg6QCg6QCg6QCg6R0rUB0rUACg6QCg6QCg6R0rUB0rUB0rUACg6QCg6R0rUB0rUB0rUB0rUAAiNwCg6R0rUAApQQCDwQA/YACJyQAxTQBahwCO0AB8twBVgACd5AA6WQBuogBDZgBtoVrNu/8AAAAvdFJOUwDidxry5QfcEwYwHWYBqNK3+WGEUJr0r+wRSMhO8a1zOfxTzxolWpMgxsJxkIec1Fe18wAAA1pJREFUWMO9WGl3qjAQBQSRRRBcwH1rq12Zcd/a9///1YsJWrWiSU/em08cSG5m7ixMRlEypWiH75Fv6Ii64UfvoV1UhKUQegZeiOGFBRGMYiMKyDbT0wZ2zlIUK2cPNM8kr4KowauTFZIN/ZI7vvwwdkt9Ah5aPCgNAmJozvWPjkZMNRt3QRyPLHNvnGe55BjPuY0y0FHX7ihtaWTR4NaCEWLp+6Bir1t9VtsAbfW52u19c+uUEEeZhxWaGLweFucrHQJwKu1OJX844DXAZobzHRMNO32ul2OycfW5+VpMkmSy+Np8rsiLuFxPF9gGmk4Gip9+yJdrAPPlIjmTxXIOUCunGjn+VZyCeVSzogKsZ8kVma0B1MqRAvOHXVYTffYyXyWaXAWhQESjKlOo4GPzkucRGkzFhyFsl8kNWW5h+MDsMnB0ES8YMHYfVVjtkpuyW4H6yHgO8Cx+cjq6DCWG6SS5I5MpxAzHRf2UZg9LzCIV1ndRCM4aVGZXlG5k2ZiC5occuqT6DCnPjo6tY9CbqNGHKqy4UAjOCqp0i4bmIe6f0KSOq8B2l3DKbgs0fiwTn1JlfMZvXYVlwi1LUOuMZb+YMmNQZcowTwRkDmWqjoGN1E2UmXoNZiIwM6jVGTsejemgn2PKrBMhWTN1cv1gn0Uhc30+FlNmr05MnV7CkEaQy9w0TwRlzpzlYkT8pCMNvY6Imw7O6tAQRL2o2GhSm2pwVqWmcFWmZ3UMatQqE21CDSW6d2ETD0yygh5zdai8MXd34U8iLJ/QZS5/Izy3WDptxGE2LLFaxNc+0nr1IuruvXzBC61e6CsG0l++CgtxmAWoNADRUHSklbwNE3GKJ9CmeYC6gkjzEiARh0kAaFYiZsHwCdRokhOYDKP4aiDEB6MkUDwmFEtyeEb4cVF8En4ZycAFc5IMGanJJSepmVEo+Bj+LhSSypakIiqrpEv6wUj63cn6+UpqBSQ1JrLaJElN295Z0bGF5EG53kLuQWU0tITlX7bXT+dt+sfvmv2Pf3P1kHQRYteyHP+1LOdnX+8kXBJlXVkzLtDEvljoAi3rOs89XIic/zPqOBm8/EByRAYve25bhzFQaz8Gsgpju3UYA7WERlMF99pQyhUaSl2MyALdvDci+ws4DgfWZ4I43wAAAABJRU5ErkJggg==") no-repeat 44px 44px;
            /*background-size: 46px;*/
            border-radius: 0 0 200px 0;
        }
        .menuHolder:hover .s1 > a{
            background: #01040c url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURQAAAB0rUB0rUACg6QCg6R0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUB0rUACg6R0rUACg6QCg6R0rUACg6R0rUB0rUB0rUB0rUACg6R0rUACg6QCg6QCg6QCg6QCg6QCg6QCg6QCg6QCg6QCg6R0rUB0rUB0rUB0rUB0rUAAiNwCg6R0rUAA/YAAtRwBahwCJyQAoQAA1UwB7tgBHawBtogCP0QAkOwBUfwCFwwCd5QBhkQCb4gCBvgCV2ltuAOgAAAArdFJOUwCp0fMId7MdZAUw5fL5FNmE3k/jD+xIWMRQl+/ErXM4E+DPGiWgk92Qh5xuwGC5AAAD50lEQVRYw61YaXuiWgyWRQEBEZdWazc603ZmSFhkcUP7///VHM5RLzisveSDj4K8JG+Wk6TXK5eh/JvjVQ1RU3nutzzstZeZzKl4Iyonj1qB3A108pjJ9ZdDaUYwpeGyz5nkkj64a4qhyAZ5YCFLtzckeUFuGLLSSBMCoval4ptSn5hq1GskccSYqvcpMjGOk6pRlivU+jVKK30NV8uqP3wgDjIvenl+f5wKAML08f35JaPyAPGj9GWjBer9yw9x8kQAsiI8TcTL3b6OixLnSwaqlxB7Hc/Jg5t4FwVr214H0S7ekAvz8eslNFU0CgmSTOTPN8QxUcT3XDsnrucTlcZnjSQezQKckYH8jH2dWAChYxeIEwJYk3Oc82j8Y5eyQJ5dFB+IJoUgFIho9MAUGvG4uOX5A1Wm4o83OHhbu1S23gHefjC7VPy4iRfUGbs/Ldg4dqU4G7B+Mp51zMWPtEKZocxh79o14u5hznBkXGVp5nDALLIgXNu1sg7BYnYNzg+ybESNgopvsG+AQnD28EZ5lrSMWQay4H2AjWs3EncDDyyc0bh46x5N+nUCx8BuKMERaPwoJt6fYXjGrzgFz24sHkxFxjJ/YUalyozBt1uID2Oqjop3ZzdRZl4FcNrAOCC8MnY4mhu6PmLKhHYrCZk6I12fUeOo68V5O2VSdeYiix35+knc5NstxWfOonooK6Sh99TGTRdnPdEQxJXSG6JJbRIgF3knKJRTLgZBoFaZOCQqUaJfbmxqAmNv4IW5Wu79Yu5+hthuLTE8M5f/IgwvWTrt2sPsWGItCcc80nr12NbdqUTwSKsXyQeVOcqCXFZG+ziqLxkBWMxVak9DGsMCrPO+BDjsE2dbXXZAoHmAWg+R5iXATYgmpwOBOoZeVe0AoFmJWAaTviuK/dTJX/GupJhtGYxCYIqNukbYLv5KofxCqlyY0+QkRhVS7GYP3sALjylVp8Qpp7jQ4Qkckyy7WyfZp0p5pQ4vDD+XnNWb6B+q9lFp+JUkQ3pWn4LmyVCSmuRVhNu4+rzJpGZJoUitSA7wVdUVZAtFVdkKCEV+1KhsVRfRiLRqYdCgiNaU9K33BYdkXV/S6w4YNyb5sKs9YOqPu+BU1MbdHHdNDl9KkVt9+DZpBbbJEZLqVoA0Jp/1jYmbb5OvjcnntTG5tknvbdqk99s2qaum7b8Wctq0hZwWtJAp6DcbWi03N9x/t72+z7fpf77X7P/5/6PHrGD06GgQ6mosKx8St9s2Q2JXI2v5AD232gzQXY3znS0Xulp1dLZ4oRTRNdDneQ2ksDXQJ10DLVvtk0ZdLKWyKzId9ZVZtyL7C2xM4LVCBMEFAAAAAElFTkSuQmCC") no-repeat 44px 44px;
        }

        .menuHolder li.s2 > a {
            position: absolute;
            display: block;
            width: 200px;
            padding-left: 200px;
            height: 400px;
            background: #0b2433;
            border-radius: 0 0 400px 0;
            font-size: 16px;
            color: #306c92;
            border-right: 1px solid #009be2;

        }

        .menuHolder ul.p3 li a {
            position: absolute;
            display: block;
            width: 200px;
            padding-left: 400px;
            height: 600px;
            line-height: 200px;
            /*background: #999;*/
            border-radius: 0 0 600px 0;
            border-top: 1px solid #053f63;
            border-right: 1px solid #008acb;
            color: #306c92;
            font-size: 16px;
        }

        .menuHolder ul ul {
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotateZ(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -ms-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
        }

        .menuHolder li.s2:nth-of-type(6) > a {
            /*background: #888;*/
            -webkit-transform: rotate(75deg);
            -moz-transform: rotateZ(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(75deg);
            transform: rotate(75deg);
        }

        .menuHolder li.s2:nth-of-type(5) > a {
            /*background: #999;*/
            -webkit-transform: rotate(60deg);
            -moz-transform: rotateZ(60deg);
            -ms-transform: rotate(60deg);
            -o-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        .menuHolder li.s2:nth-of-type(4) > a {
            /*background: #aaa;*/
            -webkit-transform: rotate(45deg);
            -moz-transform: rotateZ(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .menuHolder li.s2:nth-of-type(3) > a {
            /*background: #bbb;*/
            -webkit-transform: rotate(30deg);
            -moz-transform: rotateZ(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .menuHolder li.s2:nth-of-type(2) > a {
            /*background: #ccc;*/
            -webkit-transform: rotate(15deg);
            -moz-transform: rotateZ(15deg);
            -ms-transform: rotate(15deg);
            -o-transform: rotate(15deg);
            transform: rotate(15deg);
        }

        .menuHolder .a6 li:nth-of-type(6) > a {
            /*background: #444;*/
            -webkit-transform: rotate(75deg);
            -moz-transform: rotateZ(75deg);
            -ms-transform: rotate(75deg);
            -o-transform: rotate(75deg);
            transform: rotate(75deg);
        }

        .menuHolder .a6 li:nth-of-type(5) > a {
            /*background: #555;*/
            -webkit-transform: rotate(60deg);
            -moz-transform: rotateZ(60deg);
            -ms-transform: rotate(60deg);
            -o-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        .menuHolder .a6 li:nth-of-type(4) > a {
            /*background: #666;*/
            -webkit-transform: rotate(45deg);
            -moz-transform: rotateZ(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .menuHolder .a6 li:nth-of-type(3) > a {
            /*background: #777;*/
            -webkit-transform: rotate(30deg);
            -moz-transform: rotateZ(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .menuHolder .a6 li:nth-of-type(2) > a {
            /*background: #888;*/
            -webkit-transform: rotate(15deg);
            -moz-transform: rotateZ(15deg);
            -ms-transform: rotate(15deg);
            -o-transform: rotate(15deg);
            transform: rotate(15deg);
        }

        .menuHolder .a5 li:nth-of-type(5) > a {
            /*background: #555;*/
            -webkit-transform: rotate(72deg);
            -moz-transform: rotateZ(72deg);
            -ms-transform: rotate(72deg);
            -o-transform: rotate(72deg);
            transform: rotate(72deg);
        }

        .menuHolder .a5 li:nth-of-type(4) > a {
            /*background: #666;*/
            -webkit-transform: rotate(54deg);
            -moz-transform: rotateZ(54deg);
            -ms-transform: rotate(54deg);
            -o-transform: rotate(54deg);
            transform: rotate(54deg);
        }

        .menuHolder .a5 li:nth-of-type(3) > a {
            /*background: #777;*/
            -webkit-transform: rotate(36deg);
            -moz-transform: rotateZ(36deg);
            -ms-transform: rotate(36deg);
            -o-transform: rotate(36deg);
            transform: rotate(36deg);
        }

        .menuHolder .a5 li:nth-of-type(2) > a {
            /*background: #888;*/
            -webkit-transform: rotate(18deg);
            -moz-transform: rotateZ(18deg);
            -ms-transform: rotate(18deg);
            -o-transform: rotate(18deg);
            transform: rotate(18deg);
        }

        .menuHolder .a3 li:nth-of-type(3) > a {
            /*background: #777;*/
            -webkit-transform: rotate(60deg);
            -moz-transform: rotateZ(60deg);
            -ms-transform: rotate(60deg);
            -o-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        .menuHolder .a3 li:nth-of-type(2) > a {
            /*background: #888;*/
            -webkit-transform: rotate(30deg);
            -moz-transform: rotateZ(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .menuHolder li.s1:hover ul.p2 {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotateZ(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        .menuHolder li.s2:hover ul.p3 {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotateZ(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        .menuHolder ul li:hover > a {
            /*background: #f00;*/
            /*color: #fff;*/
        }

        .menuHolder li.s2:hover > a {
            /*background: #d00;*/
            color: #9ae6ff;
            text-shadow: 0 0 24px rgba(107, 194, 255, .64);

        }

        .menuHolder .p3 li:hover a {
            /*background: #d00;*/
            color: #9ae6ff;
            text-shadow: 0 0 24px rgba(107, 194, 255, .64);
        }

        .menuWindow {
            /*width: 610px;*/
            /*height: 610px;*/
            /*overflow: hidden;*/
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
          .........完整代码请登录后点击上方下载按钮下载查看