3D酷炫css导航菜单
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0