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(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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0