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(ellipse attopleft,rgba(222,11,70,0.26) -160%,rgba(255,255,255,0) 103%),-webkit-radial-gradient(center,ellipse cover,#0C1019 0%,#0B0B0E 100%);
overflow: hidden
}
body .grain {
-webkit-transform: scale(1)!important;
transform: scale(1)!important;
background-image: url(../images/overlay.png);
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
pointer-events: none;
top: 0;
opacity: 1;
bottom: 0
}
body .center {
-webkit-transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(.9);
transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(.9);
height: 50px;
width: 50px;
-webkit-animation: wiggle 20s infinite linear;
animation: wiggle 20s infinite linear
}
body .center .core {
width: 50px;
height: 50px;
border-radius: 50px;
background: #de0b46;
box-shadow: 0 0 70px 20px #de0b46
}
body .center .outer_one {
-webkit-transform: translateX(-120px) translateY(-50%);
transform: translateX(-120px) translateY(-50%)
}
body .center .outer_one__piece {
width: 10px;
height: 30px;
background: #de0b46;
box-shadow: 0 0 20px 0 #de0b46;
-webkit-transform-origin: 120px 0;
transform-origin: 120px 0
}
body .center .outer_two {
-webkit-transform: translateX(-290px) translateY(-50%);
transform: translateX(-290px) translateY(-50%)
}
body .center .outer_two__piece {
width: 28px;
height: 5px;
background: #de0b46;
box-shadow: 0 0 20px 0 #de0b46;
-webkit-transform-origin: 290px 0;
transform-origin: 290px 0
}
body .center .outer_three {
-webkit-transform: translateX(-440px) translateY(-50%);
transform: translateX(-440px) translateY(-50%)
}
body .center .outer_three__piece {
width: 55px;
height: 5px;
background: #55e2f9;
box-shadow: 0 0 20px 0 #55e2f9;
-webkit-transform-origin: 440px 0;
transform-origin: 440px 0
}
body .center .outer_four {
-webkit-transform: translateX(-440px) translateY(-50%);
transform: translateX(-440px) translateY(-50%)
}
body .center .outer_four__piece {
width: 6px;
height: 5px;
background: #de0b46;
box-shadow: 0 0 20px 0 #de0b46;
-webkit-transform-origin: 440px 0;
transform-origin: 440px 0
}
body .center .outer_five {
-webkit-transform: translateX(-410px) translateY(-50%);
transform: translateX(-410px) translateY(-50%)
}
body .center .outer_five__piece {
width: 6px;
height: 5px;
background: #de0b46;
box-shadow: 0 0 20px 0 #de0b46;
-webkit-transform-origin: 410px 0;
transform-origin: 410px 0
}
body .center .pieces {
-webkit-transform: translateX(540px) translateY(-50%);
transform: translateX(540px) translateY(-50%)
}
body .center .pieces .tip {
font-size: 17px;
position: absolute;
left: 105%;
opacity: 0;
-webkit-transition: all .2s .3s;
transition: all .2s .3s;
font-weight: 400;
color: #85dfe4;
width: 100%;
top: 70px
}
body .center .pieces span {
position: absolute;
top: 19px;
width: 270px;
left: 34px;
-webkit-transform: translateZ(-770px) rotateZ(0deg);
transform: translateZ(-770px) rotateZ(0deg);
-webkit-transition: all .2s .1s;
transition: all .2s .1s
}
body .center .pieces .line {
width: 0;
height: 5px;
left: -547px;
-webkit-transform: rotatez(4deg);
transform: rotatez(4deg);
top: 17px;
background: #de0b46;
position: absolute;
opacity: 0
}
body .center .pieces .future_ui__piece {
border: 3px solid #de0b46;
position: absolute;
font-weight: 900;
padding: 30px;
font-size: 30px;
box-shadow: 0 0 25px rgba(222,11,70,.27);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s .1s;
transition: all 1s .1s;
color: #fff;
text-align: left;
height: 20px;
background: 0 0;
color: #fff;
border-radius: 100px!important;
box-shadow: 0 0 25px rgba(222,11,70,.27);
-webkit-transform-origin: -540px 0;
transform-origin: -540px 0
}
body .center .pieces .future_ui__piece:nth-of-type(1) {
width: 244px
}
body .center .pieces .future_ui__piece:nth-of-type(2) {
width: 216px
}
body .center .pieces .future_ui__piece:nth-of-type(3) {
width: 218px
}
body .center .pieces .future_ui__piece:nth-of-type(4) {
width: 230px
}
body .center .pieces .future_ui__piece:nth-of-type(5) {
width: 206px
}
body .center .pieces .future_ui__piece:nth-of-type(6) {
width: 233px
}
body .center .pieces .future_ui__piece:nth-of-type(7) {
width: 224px
}
body .center .pieces .future_ui__piece:nth-of-type(8) {
width: 220px
}
body .center .pieces .future_ui__piece:nth-of-type(9) {
width: 250px
}
body .center .pieces .future_ui__piece:nth-of-type(10) {
width: 248px
}
body .center .pieces .future_ui__piece:nth-of-type(11) {
width: 205px
}
body .center .pieces .future_ui__piece:nth-of-type(12) {
width: 231px
}
body .center .pieces .future_ui__piece:nth-of-type(13) {
width: 206px
}
body .center .pieces .future_ui__piece:nth-of-type(14) {
width: 238px
}
body .center .pieces .future_ui__piece:nth-of-type(15) {
width: 233px
}
body .center .pieces .future_ui__piece:nth-of-type(16) {
width: 219px
}
body .center .pieces .future_ui__piece:nth-of-type(17) {
width: 237px
}
body .center .pieces .future_ui__piece:nth-of-type(18) {
width: 228px
}
body .center .pieces .future_ui__piece:nth-of-type(19) {
width: 219px
}
body .center .pieces .future_ui__piece:nth-of-type(20) {
width: 208px
}
body .center .pieces .future_ui__piece:nth-of-type(21) {
width: 231px
}
body .center .pieces .future_ui__piece:nth-of-type(22) {
width: 217px
}
body .center .pieces .future_ui__piece:nth-of-type(23) {
width: 227px
}
body .center .pieces .future_ui__piece:nth-of-type(24) {
width: 211px
}
body .center .pieces .future_ui__piece:nth-of-type(25) {
width: 239px
}
body .center .pieces .future_ui__piece:nth-of-type(26) {
width: 214px
}
body .center .pieces .future_ui__piece:nth-of-type(27) {
width: 249px
}
body .center .pieces .future_ui__piece:nth-of-type(28) {
width: 215px
}
body .center .pieces .future_ui__piece:nth-of-type(29) {
width: 203px
}
body .center .pieces .future_ui__piece:nth-of-type(30) {
width: 225px
}
body .center .pieces .future_ui__piece:nth-of-type(31) {
width: 204px
}
body .center .pieces .future_ui__piece:nth-of-type(32) {
width: 224px
}
body .center .pieces .future_ui__piece:nth-of-type(33) {
width: 231px
}
body .center .pieces .future_ui__piece:nth-of-type(34) {
width: 210px
}
body .center .pieces .future_ui__piece:nth-of-type(35) {
width: 204px
}
body .center .pieces .future_ui__piece:nth-of-type(36) {
width: 221px
}
body .center .pieces .future_ui__piece:nth-of-type(1) {
-webkit-transform: rotateZ(-45deg) rotateY(0deg);
transform: rotateZ(-45deg) rotateY(0deg);
width: 316px
}
body .center .pieces .future_ui__piece:nth-of-type(1):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(-45deg) translatex(20px);
transform: rotate(-45deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(1):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(1):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(1):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(2) {
-webkit-transform: rotateZ(-35deg) rotateY(0deg);
transform: rotateZ(-35deg) rotateY(0deg);
width: 255px
}
body .center .pieces .future_ui__piece:nth-of-type(2):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(-35deg) translatex(20px);
transform: rotate(-35deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(2):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(2):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(2):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(3) {
-webkit-transform: rotateZ(-25deg) rotateY(0deg);
transform: rotateZ(-25deg) rotateY(0deg);
width: 315px
}
body .center .pieces .future_ui__piece:nth-of-type(3):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(-25deg) translatex(20px);
transform: rotate(-25deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(3):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(3):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(3):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(4) {
-webkit-transform: rotateZ(-15deg) rotateY(0deg);
transform: rotateZ(-15deg) rotateY(0deg);
width: 309px
}
body .center .pieces .future_ui__piece:nth-of-type(4):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(-15deg) translatex(20px);
transform: rotate(-15deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(4):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(4):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(4):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(5) {
-webkit-transform: rotateZ(-5deg) rotateY(0deg);
transform: rotateZ(-5deg) rotateY(0deg);
width: 271px
}
body .center .pieces .future_ui__piece:nth-of-type(5):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(-5deg) translatex(20px);
transform: rotate(-5deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(5):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(5):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(5):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(6) {
-webkit-transform: rotateZ(5deg) rotateY(0deg);
transform: rotateZ(5deg) rotateY(0deg);
width: 269px
}
body .center .pieces .future_ui__piece:nth-of-type(6):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(5deg) translatex(20px);
transform: rotate(5deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(6):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(6):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(6):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(7) {
-webkit-transform: rotateZ(15deg) rotateY(0deg);
transform: rotateZ(15deg) rotateY(0deg);
width: 258px
}
body .center .pieces .future_ui__piece:nth-of-type(7):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(15deg) translatex(20px);
transform: rotate(15deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(7):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(7):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(7):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(8) {
-webkit-transform: rotateZ(25deg) rotateY(0deg);
transform: rotateZ(25deg) rotateY(0deg);
width: 278px
}
body .center .pieces .future_ui__piece:nth-of-type(8):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(25deg) translatex(20px);
transform: rotate(25deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(8):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(8):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(8):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(9) {
-webkit-transform: rotateZ(35deg) rotateY(0deg);
transform: rotateZ(35deg) rotateY(0deg);
width: 275px
}
body .center .pieces .future_ui__piece:nth-of-type(9):hover {
cursor: pointer;
color: #fff;
-webkit-animation: blink .4s .4s;
animation: blink .4s .4s;
background: #de0b46;
-webkit-transform: rotate(35deg) translatex(20px);
transform: rotate(35deg) translatex(20px);
box-shadow: 0 0 55px rgba(222,11,70,.77)
}
body .center .pieces .future_ui__piece:nth-of-type(9):hover span {
position: absolute;
top: 12px;
width: 270px;
text-shadow: 0 13px 0 rgba(30,30,30,.4);
left: 240px;
-webkit-transform: translateZ(100px) rotateZ(0deg);
transform: translateZ(100px) rotateZ(0deg)
}
body .center .pieces .future_ui__piece:nth-of-type(9):hover .tip {
opacity: 1;
left: 110%
}
body .center .pieces .future_ui__piece:nth-of-type(9):hover .line {
opacity: 1;
width: 547px;
-webkit-transition: all .4s .2s;
transition: all .4s .2s
}
body .center .pieces .future_ui__piece:nth-of-type(10) {
-webkit-transform: rotateZ(45deg) rotateY(0deg);
transform: rotat.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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