3D酷炫css导航菜单-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D菜单-官方导航页</title>
    <style>
        body .center {
            left: 0;
            right: 0;
            top: 50%;
            position: absolute;
            margin: auto;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%)
        }

        body .center .outer_one,body .center .outer_two,body .center .outer_three,body .center .outer_four,body .center .outer_five,body .center .pieces {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%
        }

        body .center .outer_two__piece:nth-of-type(1),body .center .outer_three__piece:nth-of-type(1) {
            -webkit-animation: fade 5s .1s infinite;
            animation: fade 5s .1s infinite
        }

        body .center .outer_two__piece:nth-of-type(2),body .center .outer_three__piece:nth-of-type(2) {
            -webkit-animation: fade 5s .2s infinite;
            animation: fade 5s .2s infinite
        }

        body .center .outer_two__piece:nth-of-type(3),body .center .outer_three__piece:nth-of-type(3) {
            -webkit-animation: fade 5s .3s infinite;
            animation: fade 5s .3s infinite
        }

        body .center .outer_two__piece:nth-of-type(4),body .center .outer_three__piece:nth-of-type(4) {
            -webkit-animation: fade 5s .4s infinite;
            animation: fade 5s .4s infinite
        }

        body .center .outer_two__piece:nth-of-type(5),body .center .outer_three__piece:nth-of-type(5) {
            -webkit-animation: fade 5s .5s infinite;
            animation: fade 5s .5s infinite
        }

        body .center .outer_two__piece:nth-of-type(6),body .center .outer_three__piece:nth-of-type(6) {
            -webkit-animation: fade 5s .6s infinite;
            animation: fade 5s .6s infinite
        }

        body .center .outer_two__piece:nth-of-type(7),body .center .outer_three__piece:nth-of-type(7) {
            -webkit-animation: fade 5s .7s infinite;
            animation: fade 5s .7s infinite
        }

        body .center .outer_two__piece:nth-of-type(8),body .center .outer_three__piece:nth-of-type(8) {
            -webkit-animation: fade 5s .8s infinite;
            animation: fade 5s .8s infinite
        }

        body .center .outer_two__piece:nth-of-type(9),body .center .outer_three__piece:nth-of-type(9) {
            -webkit-animation: fade 5s .9s infinite;
            animation: fade 5s .9s infinite
        }

        body .center .outer_two__piece:nth-of-type(10),body .center .outer_three__piece:nth-of-type(10) {
            -webkit-animation: fade 5s 1s infinite;
            animation: fade 5s 1s infinite
        }

        body .center .outer_two__piece:nth-of-type(11),body .center .outer_three__piece:nth-of-type(11) {
            -webkit-animation: fade 5s 1.1s infinite;
            animation: fade 5s 1.1s infinite
        }

        body .center .outer_two__piece:nth-of-type(12),body .center .outer_three__piece:nth-of-type(12) {
            -webkit-animation: fade 5s 1.2s infinite;
            animation: fade 5s 1.2s infinite
        }

        body .center .outer_two__piece:nth-of-type(13),body .center .outer_three__piece:nth-of-type(13) {
            -webkit-animation: fade 5s 1.3s infinite;
            animation: fade 5s 1.3s infinite
        }

        body .center .outer_two__piece:nth-of-type(14),body .center .outer_three__piece:nth-of-type(14) {
            -webkit-animation: fade 5s 1.4s infinite;
            animation: fade 5s 1.4s infinite
        }

        body .center .outer_two__piece:nth-of-type(15),body .center .outer_three__piece:nth-of-type(15) {
            -webkit-animation: fade 5s 1.5s infinite;
            animation: fade 5s 1.5s infinite
        }

        body .center .outer_two__piece:nth-of-type(16),body .center .outer_three__piece:nth-of-type(16) {
            -webkit-animation: fade 5s 1.6s infinite;
            animation: fade 5s 1.6s infinite
        }

        body .center .outer_two__piece:nth-of-type(17),body .center .outer_three__piece:nth-of-type(17) {
            -webkit-animation: fade 5s 1.7s infinite;
            animation: fade 5s 1.7s infinite
        }

        body .center .outer_two__piece:nth-of-type(18),body .center .outer_three__piece:nth-of-type(18) {
            -webkit-animation: fade 5s 1.8s infinite;
            animation: fade 5s 1.8s infinite
        }

        body .center .outer_two__piece:nth-of-type(19),body .center .outer_three__piece:nth-of-type(19) {
            -webkit-animation: fade 5s 1.9s infinite;
            animation: fade 5s 1.9s infinite
        }

        body .center .outer_two__piece:nth-of-type(20),body .center .outer_three__piece:nth-of-type(20) {
            -webkit-animation: fade 5s 2s infinite;
            animation: fade 5s 2s infinite
        }

        body .center .outer_two__piece:nth-of-type(21),body .center .outer_three__piece:nth-of-type(21) {
            -webkit-animation: fade 5s 2.1s infinite;
            animation: fade 5s 2.1s infinite
        }

        body .center .outer_two__piece:nth-of-type(22),body .center .outer_three__piece:nth-of-type(22) {
            -webkit-animation: fade 5s 2.2s infinite;
            animation: fade 5s 2.2s infinite
        }

        body .center .outer_two__piece:nth-of-type(23),body .center .outer_three__piece:nth-of-type(23) {
            -webkit-animation: fade 5s 2.3s infinite;
            animation: fade 5s 2.3s infinite
        }

        body .center .outer_two__piece:nth-of-type(24),body .center .outer_three__piece:nth-of-type(24) {
            -webkit-animation: fade 5s 2.4s infinite;
            animation: fade 5s 2.4s infinite
        }

        body .center .outer_two__piece:nth-of-type(25),body .center .outer_three__piece:nth-of-type(25) {
            -webkit-animation: fade 5s 2.5s infinite;
            animation: fade 5s 2.5s infinite
        }

        body .center .outer_two__piece:nth-of-type(26),body .center .outer_three__piece:nth-of-type(26) {
            -webkit-animation: fade 5s 2.6s infinite;
            animation: fade 5s 2.6s infinite
        }

        body .center .outer_two__piece:nth-of-type(27),body .center .outer_three__piece:nth-of-type(27) {
            -webkit-animation: fade 5s 2.7s infinite;
            animation: fade 5s 2.7s infinite
        }

        body .center .outer_two__piece:nth-of-type(28),body .center .outer_three__piece:nth-of-type(28) {
            -webkit-animation: fade 5s 2.8s infinite;
            animation: fade 5s 2.8s infinite
        }

        body .center .outer_two__piece:nth-of-type(29),body .center .outer_three__piece:nth-of-type(29) {
            -webkit-animation: fade 5s 2.9s infinite;
            animation: fade 5s 2.9s infinite
        }

        body .center .outer_two__piece:nth-of-type(30),body .center .outer_three__piece:nth-of-type(30) {
            -webkit-animation: fade 5s 3s infinite;
            animation: fade 5s 3s infinite
        }

        body .center .outer_two__piece:nth-of-type(31),body .center .outer_three__piece:nth-of-type(31) {
            -webkit-animation: fade 5s 3.1s infinite;
            animation: fade 5s 3.1s infinite
        }

        body .center .outer_two__piece:nth-of-type(32),body .center .outer_three__piece:nth-of-type(32) {
            -webkit-animation: fade 5s 3.2s infinite;
            animation: fade 5s 3.2s infinite
        }

        body .center .outer_two__piece:nth-of-type(33),body .center .outer_three__piece:nth-of-type(33) {
            -webkit-animation: fade 5s 3.3s infinite;
            animation: fade 5s 3.3s infinite
        }

        body .center .outer_two__piece:nth-of-type(34),body .center .outer_three__piece:nth-of-type(34) {
            -webkit-animation: fade 5s 3.4s infinite;
            animation: fade 5s 3.4s infinite
        }

        body .center .outer_two__piece:nth-of-type(35),body .center .outer_three__piece:nth-of-type(35) {
            -webkit-animation: fade 5s 3.5s infinite;
            animation: fade 5s 3.5s infinite
        }

        body .center .outer_two__piece:nth-of-type(36),body .center .outer_three__piece:nth-of-type(36) {
            -webkit-animation: fade 5s 3.6s infinite;
            animation: fade 5s 3.6s infinite
        }

        body .center .outer_four__piece:nth-of-type(1),body .center .outer_five__piece:nth-of-type(1) {
            -webkit-animation: fade 7s .1s infinite;
            animation: fade 7s .1s infinite
        }

        body .center .outer_four__piece:nth-of-type(2),body .center .outer_five__piece:nth-of-type(2) {
            -webkit-animation: fade 7s .2s infinite;
            animation: fade 7s .2s infinite
        }

        body .center .outer_four__piece:nth-of-type(3),body .center .outer_five__piece:nth-of-type(3) {
            -webkit-animation: fade 7s .3s infinite;
            animation: fade 7s .3s infinite
        }

        body .center .outer_four__piece:nth-of-type(4),body .center .outer_five__piece:nth-of-type(4) {
            -webkit-animation: fade 7s .4s infinite;
            animation: fade 7s .4s infinite
        }

        body .center .outer_four__piece:nth-of-type(5),body .center .outer_five__piece:nth-of-type(5) {
            -webkit-animation: fade 7s .5s infinite;
            animation: fade 7s .5s infinite
        }

        body .center .outer_four__piece:nth-of-type(6),body .center .outer_five__piece:nth-of-type(6) {
            -webkit-animation: fade 7s .6s infinite;
            animation: fade 7s .6s infinite
        }

        body .center .outer_four__piece:nth-of-type(7),body .center .outer_five__piece:nth-of-type(7) {
            -webkit-animation: fade 7s .7s infinite;
            animation: fade 7s .7s infinite
        }

        body .center .outer_four__piece:nth-of-type(8),body .center .outer_five__piece:nth-of-type(8) {
            -webkit-animation: fade 7s .8s infinite;
            animation: fade 7s .8s infinite
        }

        body .center .outer_four__piece:nth-of-type(9),body .center .outer_five__piece:nth-of-type(9) {
            -webkit-animation: fade 7s .9s infinite;
            animation: fade 7s .9s infinite
        }

        body .center .outer_four__piece:nth-of-type(10),body .center .outer_five__piece:nth-of-type(10) {
            -webkit-animation: fade 7s 1s infinite;
            animation: fade 7s 1s infinite
        }

        body .center .outer_four__piece:nth-of-type(11),body .center .outer_five__piece:nth-of-type(11) {
            -webkit-animation: fade 7s 1.1s infinite;
            animation: fade 7s 1.1s infinite
        }

        body .center .outer_four__piece:nth-of-type(12),body .center .outer_five__piece:nth-of-type(12) {
            -webkit-animation: fade 7s 1.2s infinite;
            animation: fade 7s 1.2s infinite
        }

        body .center .outer_four__piece:nth-of-type(13),body .center .outer_five__piece:nth-of-type(13) {
            -webkit-animation: fade 7s 1.3s infinite;
            animation: fade 7s 1.3s infinite
        }

        body .center .outer_four__piece:nth-of-type(14),body .center .outer_five__piece:nth-of-type(14) {
            -webkit-animation: fade 7s 1.4s infinite;
            animation: fade 7s 1.4s infinite
        }

        body .center .outer_four__piece:nth-of-type(15),body .center .outer_five__piece:nth-of-type(15) {
            -webkit-animation: fade 7s 1.5s infinite;
            animation: fade 7s 1.5s infinite
        }

        body .center .outer_four__piece:nth-of-type(16),body .center .outer_five__piece:nth-of-type(16) {
            -webkit-animation: fade 7s 1.6s infinite;
            animation: fade 7s 1.6s infinite
        }

        body .center .outer_four__piece:nth-of-type(17),body .center .outer_five__piece:nth-of-type(17) {
            -webkit-animation: fade 7s 1.7s infinite;
            animation: fade 7s 1.7s infinite
        }

        body .center .outer_four__piece:nth-of-type(18),body .center .outer_five__piece:nth-of-type(18) {
            -webkit-animation: fade 7s 1.8s infinite;
            animation: fade 7s 1.8s infinite
        }

        body .center .outer_four__piece:nth-of-type(19),body .center .outer_five__piece:nth-of-type(19) {
            -webkit-animation: fade 7s 1.9s infinite;
            animation: fade 7s 1.9s infinite
        }

        body .center .outer_four__piece:nth-of-type(20),body .center .outer_five__piece:nth-of-type(20) {
            -webkit-animation: fade 7s 2s infinite;
            animation: fade 7s 2s infinite
        }

        body .center .outer_four__piece:nth-of-type(21),body .center .outer_five__piece:nth-of-type(21) {
            -webkit-animation: fade 7s 2.1s infinite;
            animation: fade 7s 2.1s infinite
        }

        body .center .outer_four__piece:nth-of-type(22),body .center .outer_five__piece:nth-of-type(22) {
            -webkit-animation: fade 7s 2.2s infinite;
            animation: fade 7s 2.2s infinite
        }

        body .center .outer_four__piece:nth-of-type(23),body .center .outer_five__piece:nth-of-type(23) {
            -webkit-animation: fade 7s 2.3s infinite;
            animation: fade 7s 2.3s infinite
        }

        body .center .outer_four__piece:nth-of-type(24),body .center .outer_five__piece:nth-of-type(24) {
            -webkit-animation: fade 7s 2.4s infinite;
            animation: fade 7s 2.4s infinite
        }

        body .center .outer_four__piece:nth-of-type(25),body .center .outer_five__piece:nth-of-type(25) {
            -webkit-animation: fade 7s 2.5s infinite;
            animation: fade 7s 2.5s infinite
        }

        body .center .outer_four__piece:nth-of-type(26),body .center .outer_five__piece:nth-of-type(26) {
            -webkit-animation: fade 7s 2.6s infinite;
            animation: fade 7s 2.6s infinite
        }

        body .center .outer_four__piece:nth-of-type(27),body .center .outer_five__piece:nth-of-type(27) {
            -webkit-animation: fade 7s 2.7s infinite;
            animation: fade 7s 2.7s infinite
        }

        body .center .outer_four__piece:nth-of-type(28),body .center .outer_five__piece:nth-of-type(28) {
            -webkit-animation: fade 7s 2.8s infinite;
            animation: fade 7s 2.8s infinite
        }

        body .center .outer_four__piece:nth-of-type(29),body .center .outer_five__piece:nth-of-type(29) {
            -webkit-animation: fade 7s 2.9s infinite;
            animation: fade 7s 2.9s infinite
        }

        body .center .outer_four__piece:nth-of-type(30),body .center .outer_five__piece:nth-of-type(30) {
            -webkit-animation: fade 7s 3s infinite;
            animation: fade 7s 3s infinite
        }

        body .center .outer_four__piece:nth-of-type(31),body .center .outer_five__piece:nth-of-type(31) {
            -webkit-animation: fade 7s 3.1s infinite;
            animation: fade 7s 3.1s infinite
        }

        body .center .outer_four__piece:nth-of-type(32),body .center .outer_five__piece:nth-of-type(32) {
            -webkit-animation: fade 7s 3.2s infinite;
            animation: fade 7s 3.2s infinite
        }

        body .center .outer_four__piece:nth-of-type(33),body .center .outer_five__piece:nth-of-type(33) {
            -webkit-animation: fade 7s 3.3s infinite;
            animation: fade 7s 3.3s infinite
        }

        body .center .outer_four__piece:nth-of-type(34),body .center .outer_five__piece:nth-of-type(34) {
            -webkit-animation: fade 7s 3.4s infinite;
            animation: fade 7s 3.4s infinite
        }

        body .center .outer_four__piece:nth-of-type(35),body .center .outer_five__piece:nth-of-type(35) {
            -webkit-animation: fade 7s 3.5s infinite;
            animation: fade 7s 3.5s infinite
        }

        body .center .outer_four__piece:nth-of-type(36),body .center .outer_five__piece:nth-of-type(36) {
            -webkit-animation: fade 7s 3.6s infinite;
            animation: fade 7s 3.6s infinite
        }

        body .center .outer_one__piece,body .center .outer_two__piece,body .center .pieces .future_ui__piece {
            position: absolute
        }

        body .center .outer_one__piece:nth-of-type(1),body .center .outer_two__piece:nth-of-type(1),body .center .pieces .future_ui__piece:nth-of-type(1) {
            border-radius: 2px;
            -webkit-transform: rotateZ(10deg);
            transform: rotateZ(10deg)
        }

        body .center .outer_one__piece:nth-of-type(2),body .center .outer_two__piece:nth-of-type(2),body .center .pieces .future_ui__piece:nth-of-type(2) {
            border-radius: 2px;
            -webkit-transform: rotateZ(20deg);
            transform: rotateZ(20deg)
        }

        body .center .outer_one__piece:nth-of-type(3),body .center .outer_two__piece:nth-of-type(3),body .center .pieces .future_ui__piece:nth-of-type(3) {
            border-radius: 2px;
            -webkit-transform: rotateZ(30deg);
            transform: rotateZ(30deg)
        }

        body .center .outer_one__piece:nth-of-type(4),body .center .outer_two__piece:nth-of-type(4),body .center .pieces .future_ui__piece:nth-of-type(4) {
            border-radius: 2px;
            -webkit-transform: rotateZ(40deg);
            transform: rotateZ(40deg)
        }

        body .center .outer_one__piece:nth-of-type(5),body .center .outer_two__piece:nth-of-type(5),body .center .pieces .future_ui__piece:nth-of-type(5) {
            border-radius: 2px;
            -webkit-transform: rotateZ(50deg);
            transform: rotateZ(50deg)
        }

        body .center .outer_one__piece:nth-of-type(6),body .center .outer_two__piece:nth-of-type(6),body .center .pieces .future_ui__piece:nth-of-type(6) {
            border-radius: 2px;
            -webkit-transform: rotateZ(60deg);
            transform: rotateZ(60deg)
        }

        body .center .outer_one__piece:nth-of-type(7),body .center .outer_two__piece:nth-of-type(7),body .center .pieces .future_ui__piece:nth-of-type(7) {
            border-radius: 2px;
            -webkit-transform: rotateZ(70deg);
            transform: rotateZ(70deg)
        }

        body .center .outer_one__piece:nth-of-type(8),body .center .outer_two__piece:nth-of-type(8),body .center .pieces .future_ui__piece:nth-of-type(8) {
            border-radius: 2px;
            -webkit-transform: rotateZ(80deg);
            transform: rotateZ(80deg)
        }

        body .center .outer_one__piece:nth-of-type(9),body .center .outer_two__piece:nth-of-type(9),body .center .pieces .future_ui__piece:nth-of-type(9) {
            border-radius: 2px;
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg)
        }

        body .center .outer_one__piece:nth-of-type(10),body .center .outer_two__piece:nth-of-type(10),body .center .pieces .future_ui__piece:nth-of-type(10) {
            border-radius: 2px;
            -webkit-transform: rotateZ(100deg);
            transform: rotateZ(100deg)
        }

        body .center .outer_one__piece:nth-of-type(11),body .center .outer_two__piece:nth-of-type(11),body .center .pieces .future_ui__piece:nth-of-type(11) {
            border-radius: 2px;
            -webkit-transform: rotateZ(110deg);
            transform: rotateZ(110deg)
        }

        body .center .outer_one__piece:nth-of-type(12),body .center .outer_two__piece:nth-of-type(12),body .center .pieces .future_ui__piece:nth-of-type(12) {
            border-radius: 2px;
            -webkit-transform: rotateZ(120deg);
            transform: rotateZ(120deg)
        }

        body .center .outer_one__piece:nth-of-type(13),body .center .outer_two__piece:nth-of-type(13),body .center .pieces .future_ui__piece:nth-of-type(13) {
            border-radius: 2px;
            -webkit-transform: rotateZ(130deg);
            transform: rotateZ(130deg)
        }

        body .center .outer_one__piece:nth-of-type(14),body .center .outer_two__piece:nth-of-type(14),body .center .pieces .future_ui__piece:nth-of-type(14) {
            border-radius: 2px;
            -webkit-transform: rotateZ(140deg);
            transform: rotateZ(140deg)
        }

        body .center .outer_one__piece:nth-of-type(15),body .center .outer_two__piece:nth-of-type(15),body .center .pieces .future_ui__piece:nth-of-type(15) {
            border-radius: 2px;
            -webkit-transform: rotateZ(150deg);
            transform: rotateZ(150deg)
        }

        body .center .outer_one__piece:nth-of-type(16),body .center .outer_two__piece:nth-of-type(16),body .center .pieces .future_ui__piece:nth-of-type(16) {
            border-radius: 2px;
            -webkit-transform: rotateZ(160deg);
            transform: rotateZ(160deg)
        }

        body .center .outer_one__piece:nth-of-type(17),body .center .outer_two__piece:nth-of-type(17),body .center .pieces .future_ui__piece:nth-of-type(17) {
            border-radius: 2px;
            -webkit-transform: rotateZ(170deg);
            transform: rotateZ(170deg)
        }

        body .center .outer_one__piece:nth-of-type(18),body .center .outer_two__piece:nth-of-type(18),body .center .pieces .future_ui__piece:nth-of-type(18) {
            border-radius: 2px;
            -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg)
        }

        body .center .outer_one__piece:nth-of-type(19),body .center .outer_two__piece:nth-of-type(19),body .center .pieces .future_ui__piece:nth-of-type(19) {
            border-radius: 2px;
            -webkit-transform: rotateZ(190deg);
            transform: rotateZ(190deg)
        }

        body .center .outer_one__piece:nth-of-type(20),body .center .outer_two__piece:nth-of-type(20),body .center .pieces .future_ui__piece:nth-of-type(20) {
            border-radius: 2px;
            -webkit-transform: rotateZ(200deg);
            transform: rotateZ(200deg)
        }

        body .center .outer_one__piece:nth-of-type(21),body .center .outer_two__piece:nth-of-type(21),body .center .pieces .future_ui__piece:nth-of-type(21) {
            border-radius: 2px;
            -webkit-transform: rotateZ(210deg);
            transform: rotateZ(210deg)
        }

        body .center .outer_one__piece:nth-of-type(22),body .center .outer_two__piece:nth-of-type(22),body .center .pieces .future_ui__piece:nth-of-type(22) {
            border-radius: 2px;
            -webkit-transform: rotateZ(220deg);
            transform: rotateZ(220deg)
        }

        body .center .outer_one__piece:nth-of-type(23),body .center .outer_two__piece:nth-of-type(23),body .center .pieces .future_ui__piece:nth-of-type(23) {
            border-radius: 2px;
            -webkit-transform: rotateZ(230deg);
            transform: rotateZ(230deg)
        }

        body .center .outer_one__piece:nth-of-type(24),body .center .outer_two__piece:nth-of-type(24),body .center .pieces .future_ui__piece:nth-of-type(24) {
            border-radius: 2px;
            -webkit-transform: rotateZ(240deg);
            transform: rotateZ(240deg)
        }

        body .center .outer_one__piece:nth-of-type(25),body .center .outer_two__piece:nth-of-type(25),body .center .pieces .future_ui__piece:nth-of-type(25) {
            border-radius: 2px;
            -webkit-transform: rotateZ(250deg);
            transform: rotateZ(250deg)
        }

        body .center .outer_one__piece:nth-of-type(26),body .center .outer_two__piece:nth-of-type(26),body .center .pieces .future_ui__piece:nth-of-type(26) {
            border-radius: 2px;
            -webkit-transform: rotateZ(260deg);
            transform: rotateZ(260deg)
        }

        body .center .outer_one__piece:nth-of-type(27),body .center .outer_two__piece:nth-of-type(27),body .center .pieces .future_ui__piece:nth-of-type(27) {
            border-radius: 2px;
            -webkit-transform: rotateZ(270deg);
            transform: rotateZ(270deg)
        }

        body .center .outer_one__piece:nth-of-type(28),body .center .outer_two__piece:nth-of-type(28),body .center .pieces .future_ui__piece:nth-of-type(28) {
            border-radius: 2px;
            -webkit-transform: rotateZ(280deg);
            transform: rotateZ(280deg)
        }

        body .center .outer_one__piece:nth-of-type(29),body .center .outer_two__piece:nth-of-type(29),body .center .pieces .future_ui__piece:nth-of-type(29) {
            border-radius: 2px;
            -webkit-transform: rotateZ(290deg);
            transform: rotateZ(290deg)
        }

        body .center .outer_one__piece:nth-of-type(30),body .center .outer_two__piece:nth-of-type(30),body .center .pieces .future_ui__piece:nth-of-type(30) {
            border-radius: 2px;
            -webkit-transform: rotateZ(300deg);
            transform: rotateZ(300deg)
        }

        body .center .outer_one__piece:nth-of-type(31),body .center .outer_two__piece:nth-of-type(31),body .center .pieces .future_ui__piece:nth-of-type(31) {
            border-radius: 2px;
            -webkit-transform: rotateZ(310deg);
            transform: rotateZ(310deg)
        }

        body .center .outer_one__piece:nth-of-type(32),body .center .outer_two__piece:nth-of-type(32),body .center .pieces .future_ui__piece:nth-of-type(32) {
            border-radius: 2px;
            -webkit-transform: rotateZ(320deg);
            transform: rotateZ(320deg)
        }

        body .center .outer_one__piece:nth-of-type(33),body .center .outer_two__piece:nth-of-type(33),body .center .pieces .future_ui__piece:nth-of-type(33) {
            border-radius: 2px;
            -webkit-transform: rotateZ(330deg);
            transform: rotateZ(330deg)
        }

        body .center .outer_one__piece:nth-of-type(34),body .center .outer_two__piece:nth-of-type(34),body .center .pieces .future_ui__piece:nth-of-type(34) {
            border-radius: 2px;
            -webkit-transform: rotateZ(340deg);
            transform: rotateZ(340deg)
        }

        body .center .outer_one__piece:nth-of-type(35),body .center .outer_two__piece:nth-of-type(35),body .center .pieces .future_ui__piece:nth-of-type(35) {
            border-radius: 2px;
            -webkit-transform: rotateZ(350deg);
            transform: rotateZ(350deg)
        }

        body .center .outer_one__piece:nth-of-type(36),body .center .outer_two__piece:nth-of-type(36),body .center .pieces .future_ui__piece:nth-of-type(36) {
            border-radius: 2px;
            -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg)
        }

        body .center .outer_three__piece {
            position: absolute
        }

        body .center .outer_three__piece:nth-of-type(1) {
            border-radius: 2px;
            -webkit-transform: rotateZ(4deg);
            transform: rotateZ(4deg)
        }

        body .center .outer_three__piece:nth-of-type(2) {
            border-radius: 2px;
            -webkit-transform: rotateZ(8deg);
            transform: rotateZ(8deg)
        }

        body .center .outer_three__piece:nth-of-type(3) {
            border-radius: 2px;
            -webkit-transform: rotateZ(12deg);
            transform: rotateZ(12deg)
        }

        body .center .outer_three__piece:nth-of-type(4) {
            border-radius: 2px;
            -webkit-transform: rotateZ(16deg);
            transform: rotateZ(16deg)
        }

        body .center .outer_three__piece:nth-of-type(5) {
            border-radius: 2px;
            -webkit-transform: rotateZ(20deg);
            transform: rotateZ(20deg)
        }

        body .center .outer_three__piece:nth-of-type(6) {
            border-radius: 2px;
            -webkit-transform: rotateZ(24deg);
            transform: rotateZ(24deg)
        }

        body .center .outer_three__piece:nth-of-type(7) {
            border-radius: 2px;
            -webkit-transform: rotateZ(28deg);
            transform: rotateZ(28deg)
        }

        body .center .outer_three__piece:nth-of-type(8) {
            border-radius: 2px;
            -webkit-transform: rotateZ(32deg);
            transform: rotateZ(32deg)
        }

        body .center .outer_three__piece:nth-of-type(9) {
            border-radius: 2px;
            -webkit-transform: rotateZ(36deg);
            transform: rotateZ(36deg)
        }

        body .center .outer_three__piece:nth-of-type(10) {
            border-radius: 2px;
            -webkit-transform: rotateZ(40deg);
            transform: rotateZ(40deg)
        }

        body .center .outer_three__piece:nth-of-type(11) {
            border-radius: 2px;
            -webkit-transform: rotateZ(44deg);
            transform: rotateZ(44deg)
        }

        body .center .outer_three__piece:nth-of-type(12) {
            border-radius: 2px;
            -webkit-transform: rotateZ(48deg);
            transform: rotateZ(48deg)
        }

        body .center .outer_three__piece:nth-of-type(13) {
            border-radius: 2px;
            -webkit-transform: rotateZ(52deg);
            transform: rotateZ(52deg)
        }

        body .center .outer_three__piece:nth-of-type(14) {
            border-radius: 2px;
            -webkit-transform: rotateZ(56deg);
            transform: rotateZ(56deg)
        }

        body .center .outer_three__piece:nth-of-type(15) {
            border-radius: 2px;
            -webkit-transform: rotateZ(60deg);
            transform: rotateZ(60deg)
        }

        body .center .outer_three__piece:nth-of-type(16) {
            border-radius: 2px;
            -webkit-transform: rotateZ(64deg);
            transform: rotateZ(64deg)
        }

        body .center .outer_three__piece:nth-of-type(17) {
            border-radius: 2px;
            -webkit-transform: rotateZ(68deg);
            transform: rotateZ(68deg)
        }

        body .center .outer_three__piece:nth-of-type(18) {
            border-radius: 2px;
            -webkit-transform: rotateZ(72deg);
            transform: rotateZ(72deg)
        }

        body .center .outer_three__piece:nth-of-type(19) {
            border-radius: 2px;
            -webkit-transform: rotateZ(76deg);
            transform: rotateZ(76deg)
        }

        body .center .outer_three__piece:nth-of-type(20) {
            border-radius: 2px;
            -webkit-transform: rotateZ(80deg);
            transform: rotateZ(80deg)
        }

        body .center .outer_three__piece:nth-of-type(21) {
            border-radius: 2px;
            -webkit-transform: rotateZ(84deg);
            transform: rotateZ(84deg)
        }

        body .center .outer_three__piece:nth-of-type(22) {
            border-radius: 2px;
            -webkit-transform: rotateZ(88deg);
            transform: rotateZ(88deg)
        }

        body .center .outer_three__piece:nth-of-type(23) {
            border-radius: 2px;
            -webkit-transform: rotateZ(92deg);
            transform: rotateZ(92deg)
        }

        body .center .outer_three__piece:nth-of-type(24) {
            border-radius: 2px;
            -webkit-transform: rotateZ(96deg);
            transform: rotateZ(96deg)
        }

        body .center .outer_three__piece:nth-of-type(25) {
            border-radius: 2px;
            -webkit-transform: rotateZ(100deg);
            transform: rotateZ(100deg)
        }

        body .center .outer_three__piece:nth-of-type(26) {
            border-radius: 2px;
            -webkit-transform: rotateZ(104deg);
            transform: rotateZ(104deg)
        }

        body .center .outer_three__piece:nth-of-type(27) {
            border-radius: 2px;
            -webkit-transform: rotateZ(108deg);
            transform: rotateZ(108deg)
        }

        body .center .outer_three__piece:nth-of-type(28) {
            border-radius: 2px;
            -webkit-transform: rotateZ(112deg);
            transform: rotateZ(112deg)
        }

        body .center .outer_three__piece:nth-of-type(29) {
            border-radius: 2px;
            -webkit-transform: rotateZ(116deg);
            transform: rotateZ(116deg)
        }

        body .center .outer_three__piece:nth-of-type(30) {
            border-radius: 2px;
            -webkit-transform: rotateZ(120deg);
            transform: rotateZ(120deg)
        }

        body .center .outer_three__piece:nth-of-type(31) {
            border-radius: 2px;
            -webkit-transform: rotateZ(124deg);
            transform: rotateZ(124deg)
        }

        body .center .outer_three__piece:nth-of-type(32) {
            border-radius: 2px;
            -webkit-transform: rotateZ(128deg);
            transform: rotateZ(128deg)
        }

        body .center .outer_three__piece:nth-of-type(33) {
            border-radius: 2px;
            -webkit-transform: rotateZ(132deg);
            transform: rotateZ(132deg)
        }

        body .center .outer_three__piece:nth-of-type(34) {
            border-radius: 2px;
            -webkit-transform: rotateZ(136deg);
            transform: rotateZ(136deg)
        }

        body .center .outer_three__piece:nth-of-type(35) {
            border-radius: 2px;
            -webkit-transform: rotateZ(140deg);
            transform: rotateZ(140deg)
        }

        body .center .outer_three__piece:nth-of-type(36) {
            border-radius: 2px;
            -webkit-transform: rotateZ(144deg);
            transform: rotateZ(144deg)
        }

        body .center .outer_four__piece,body .center .outer_five__piece {
            position: absolute
        }

        body .center .outer_four__piece:nth-of-type(1),body .center .outer_five__piece:nth-of-type(1) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-176deg);
            transform: rotateZ(-176deg)
        }

        body .center .outer_four__piece:nth-of-type(2),body .center .outer_five__piece:nth-of-type(2) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-172deg);
            transform: rotateZ(-172deg)
        }

        body .center .outer_four__piece:nth-of-type(3),body .center .outer_five__piece:nth-of-type(3) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-168deg);
            transform: rotateZ(-168deg)
        }

        body .center .outer_four__piece:nth-of-type(4),body .center .outer_five__piece:nth-of-type(4) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-164deg);
            transform: rotateZ(-164deg)
        }

        body .center .outer_four__piece:nth-of-type(5),body .center .outer_five__piece:nth-of-type(5) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-160deg);
            transform: rotateZ(-160deg)
        }

        body .center .outer_four__piece:nth-of-type(6),body .center .outer_five__piece:nth-of-type(6) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-156deg);
            transform: rotateZ(-156deg)
        }

        body .center .outer_four__piece:nth-of-type(7),body .center .outer_five__piece:nth-of-type(7) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-152deg);
            transform: rotateZ(-152deg)
        }

        body .center .outer_four__piece:nth-of-type(8),body .center .outer_five__piece:nth-of-type(8) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-148deg);
            transform: rotateZ(-148deg)
        }

        body .center .outer_four__piece:nth-of-type(9),body .center .outer_five__piece:nth-of-type(9) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-144deg);
            transform: rotateZ(-144deg)
        }

        body .center .outer_four__piece:nth-of-type(10),body .center .outer_five__piece:nth-of-type(10) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-140deg);
            transform: rotateZ(-140deg)
        }

        body .center .outer_four__piece:nth-of-type(11),body .center .outer_five__piece:nth-of-type(11) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-136deg);
            transform: rotateZ(-136deg)
        }

        body .center .outer_four__piece:nth-of-type(12),body .center .outer_five__piece:nth-of-type(12) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-132deg);
            transform: rotateZ(-132deg)
        }

        body .center .outer_four__piece:nth-of-type(13),body .center .outer_five__piece:nth-of-type(13) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-128deg);
            transform: rotateZ(-128deg)
        }

        body .center .outer_four__piece:nth-of-type(14),body .center .outer_five__piece:nth-of-type(14) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-124deg);
            transform: rotateZ(-124deg)
        }

        body .center .outer_four__piece:nth-of-type(15),body .center .outer_five__piece:nth-of-type(15) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-120deg);
            transform: rotateZ(-120deg)
        }

        body .center .outer_four__piece:nth-of-type(16),body .center .outer_five__piece:nth-of-type(16) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-116deg);
            transform: rotateZ(-116deg)
        }

        body .center .outer_four__piece:nth-of-type(17),body .center .outer_five__piece:nth-of-type(17) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-112deg);
            transform: rotateZ(-112deg)
        }

        body .center .outer_four__piece:nth-of-type(18),body .center .outer_five__piece:nth-of-type(18) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-108deg);
            transform: rotateZ(-108deg)
        }

        body .center .outer_four__piece:nth-of-type(19),body .center .outer_five__piece:nth-of-type(19) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-104deg);
            transform: rotateZ(-104deg)
        }

        body .center .outer_four__piece:nth-of-type(20),body .center .outer_five__piece:nth-of-type(20) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-100deg);
            transform: rotateZ(-100deg)
        }

        body .center .outer_four__piece:nth-of-type(21),body .center .outer_five__piece:nth-of-type(21) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-96deg);
            transform: rotateZ(-96deg)
        }

        body .center .outer_four__piece:nth-of-type(22),body .center .outer_five__piece:nth-of-type(22) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-92deg);
            transform: rotateZ(-92deg)
        }

        body .center .outer_four__piece:nth-of-type(23),body .center .outer_five__piece:nth-of-type(23) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-88deg);
            transform: rotateZ(-88deg)
        }

        body .center .outer_four__piece:nth-of-type(24),body .center .outer_five__piece:nth-of-type(24) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-84deg);
            transform: rotateZ(-84deg)
        }

        body .center .outer_four__piece:nth-of-type(25),body .center .outer_five__piece:nth-of-type(25) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-80deg);
            transform: rotateZ(-80deg)
        }

        body .center .outer_four__piece:nth-of-type(26),body .center .outer_five__piece:nth-of-type(26) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-76deg);
            transform: rotateZ(-76deg)
        }

        body .center .outer_four__piece:nth-of-type(27),body .center .outer_five__piece:nth-of-type(27) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-72deg);
            transform: rotateZ(-72deg)
        }

        body .center .outer_four__piece:nth-of-type(28),body .center .outer_five__piece:nth-of-type(28) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-68deg);
            transform: rotateZ(-68deg)
        }

        body .center .outer_four__piece:nth-of-type(29),body .center .outer_five__piece:nth-of-type(29) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-64deg);
            transform: rotateZ(-64deg)
        }

        body .center .outer_four__piece:nth-of-type(30),body .center .outer_five__piece:nth-of-type(30) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-60deg);
            transform: rotateZ(-60deg)
        }

        body .center .outer_four__piece:nth-of-type(31),body .center .outer_five__piece:nth-of-type(31) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-56deg);
            transform: rotateZ(-56deg)
        }

        body .center .outer_four__piece:nth-of-type(32),body .center .outer_five__piece:nth-of-type(32) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-52deg);
            transform: rotateZ(-52deg)
        }

        body .center .outer_four__piece:nth-of-type(33),body .center .outer_five__piece:nth-of-type(33) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-48deg);
            transform: rotateZ(-48deg)
        }

        body .center .outer_four__piece:nth-of-type(34),body .center .outer_five__piece:nth-of-type(34) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-44deg);
            transform: rotateZ(-44deg)
        }

        body .center .outer_four__piece:nth-of-type(35),body .center .outer_five__piece:nth-of-type(35) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-40deg);
            transform: rotateZ(-40deg)
        }

        body .center .outer_four__piece:nth-of-type(36),body .center .outer_five__piece:nth-of-type(36) {
            border-radius: 2px;
            -webkit-transform: rotateZ(-36deg);
            transform: rotateZ(-36deg)
        }

        body {
            height: 100vh;
            -webkit-animation: intro_box 1s 1s forwards;
            animation: intro_box 1s 1s forwards;
            opacity: 0;
            -webkit-perspective-origin: 50% -10%;
            perspective-origin: 50% -10%;
            margin: 0;
            padding: 0;
            font-family: montserrat;
            -webkit-perspective: 800;
            perspective: 800;
            background: -webkit-radial-gradient(top left ellipse,rgba(222,11,70,0.26) -160%,rgba(255,255,255,0) 103%),-webkit-radial-gradient(center,ellipse cover,#0C1019 0%,#0B0B0E 100%);
            background: radial-gradient(ellips.........完整代码请登录后点击上方下载按钮下载查看
3D酷炫css导航菜单

网友评论0

gsap+svg滑动图标菜单动画切换效果代码

gsap+svg实现水波纹导航图标菜单效果代码

css实现鼠标悬停文字菜单翻转动画效果代码

css+js实现带玻璃磨砂透明液态汇聚动画的导航栏切换效果代码

gsap实现炫酷导航图标点击切换效果代码

js+css实现暗黑色左侧可伸缩垂直菜单栏效果代码

js+css实现动态径向圆圈图标菜单鼠标悬停效果代码

gsap实现文字导航条点击下划线动画效果代码

css的view-transition实现菜单点击滑动选中效果代码

css实现炫酷图标菜单导航效果代码
