使用纯CSS实现的3D镭射菜单

CSS 3D Radial Menu

菜单，界面组件

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2594
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Variables */
/* Placeholders */

body .center {
    left: 0;
    right: 0;
    top: 50%;
    position: absolute;
    margin: auto;
    -webkit-transform: translateY(-50%);
    -ms-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 0.1s infinite;
    animation: fade 5s 0.1s infinite;
}
body .center .outer_two__piece:nth-of-type(2),
body .center .outer_three__piece:nth-of-type(2) {
    -webkit-animation: fade 5s 0.2s infinite;
    animation: fade 5s 0.2s infinite;
}
body .center .outer_two__piece:nth-of-type(3),
body .center .outer_three__piece:nth-of-type(3) {
    -webkit-animation: fade 5s 0.3s infinite;
    animation: fade 5s 0.3s infinite;
}
body .center .outer_two__piece:nth-of-type(4),
body .center .outer_three__piece:nth-of-type(4) {
    -webkit-animation: fade 5s 0.4s infinite;
    animation: fade 5s 0.4s infinite;
}
body .center .outer_two__piece:nth-of-type(5),
body .center .outer_three__piece:nth-of-type(5) {
    -webkit-animation: fade 5s 0.5s infinite;
    animation: fade 5s 0.5s infinite;
}
body .center .outer_two__piece:nth-of-type(6),
body .center .outer_three__piece:nth-of-type(6) {
    -webkit-animation: fade 5s 0.6s infinite;
    animation: fade 5s 0.6s infinite;
}
body .center .outer_two__piece:nth-of-type(7),
body .center .outer_three__piece:nth-of-type(7) {
    -webkit-animation: fade 5s 0.7s infinite;
    animation: fade 5s 0.7s infinite;
}
body .center .outer_two__piece:nth-of-type(8),
body .center .outer_three__piece:nth-of-type(8) {
    -webkit-animation: fade 5s 0.8s infinite;
    animation: fade 5s 0.8s infinite;
}
body .center .outer_two__piece:nth-of-type(9),
body .center .outer_three__piece:nth-of-type(9) {
    -webkit-animation: fade 5s 0.9s infinite;
    animation: fade 5s 0.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 0.1s infinite;
    animation: fade 7s 0.1s infinite;
}
body .center .outer_four__piece:nth-of-type(2),
body .center .outer_five__piece:nth-of-type(2) {
    -webkit-animation: fade 7s 0.2s infinite;
    animation: fade 7s 0.2s infinite;
}
body .center .outer_four__piece:nth-of-type(3),
body .center .outer_five__piece:nth-of-type(3) {
    -webkit-animation: fade 7s 0.3s infinite;
    animation: fade 7s 0.3s infinite;
}
body .center .outer_four__piece:nth-of-type(4),
body .center .outer_five__piece:nth-of-type(4) {
    -webkit-animation: fade 7s 0.4s infinite;
    animation: fade 7s 0.4s infinite;
}
body .center .outer_four__piece:nth-of-type(5),
body .center .outer_five__piece:nth-of-type(5) {
    -webkit-animation: fade 7s 0.5s infinite;
    animation: fade 7s 0.5s infinite;
}
body .center .outer_four__piece:nth-of-type(6),
body .center .outer_five__piece:nth-of-type(6) {
    -webkit-animation: fade 7s 0.6s infinite;
    animation: fade 7s 0.6s infinite;
}
body .center .outer_four__piece:nth-of-type(7),
body .center .outer_five__piece:nth-of-type(7) {
    -webkit-animation: fade 7s 0.7s infinite;
    animation: fade 7s 0.7s infinite;
}
body .center .outer_four__piece:nth-of-type(8),
body .center .outer_five__piece:nth-of-type(8) {
    -webkit-animation: fade 7s 0.8s infinite;
    animation: fade 7s 0.8s infinite;
}
body .center .outer_four__piece:nth-of-type(9),
body .center .outer_five__piece:nth-of-type(9) {
    -webkit-animation: fade 7s 0.9s infinite;
    animation: fade 7s 0.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);
    /* Styles */
}
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(ellipse at top left, 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 at top left, 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;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/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(0.9);
    transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(0.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: 0px 0px 70px 20px #de0b46;
}
body .center .outer_one {
    -webkit-transform: translateX(-120px) translateY(-50%);
    -ms-transform: translateX(-120px) translateY(-50%);
    transform: translateX(-120px) translateY(-50%);
}
body .center .outer_one__piece {
    width: 10px;
    height: 30px;
    background: #de0b46;
    box-shadow: 0px 0px 20px 0px #de0b46;
    -webkit-transform-origin: 120px 0px;
    -ms-transform-origin: 120px 0px;
    transform-origin: 120px 0px;
}
body .center .outer_two {
    -webkit-transform: translateX(-290px) translateY(-50%);
    -ms-transform: translateX(-290px) translateY(-50%);
    transform: translateX(-290px) translateY(-50%);
}
body .center .outer_two__piece {
    width: 28px;
    height: 5px;
    background: #de0b46;
    box-shadow: 0px 0px 20px 0px #de0b46;
    -webkit-transform-origin: 290px 0px;
    -ms-transform-origin: 290px 0px;
    transform-origin: 290px 0px;
}
body .center .outer_three {
    -webkit-transform: translateX(-440px) translateY(-50%);
    -ms-transform: translateX(-440px) translateY(-50%);
    transform: translateX(-440px) translateY(-50%);
}
body .center .outer_three__piece {
    width: 55px;
    height: 5px;
    background: #55e2f9;
    box-shadow: 0px 0px 20px 0px #55e2f9;
    -webkit-transform-origin: 440px 0px;
    -ms-transform-origin: 440px 0px;
    transform-origin: 440px 0px;
}
body .center .outer_four {
    -webkit-transform: translateX(-440px) translateY(-50%);
    -ms-transform: translateX(-440px) translateY(-50%);
    transform: translateX(-440px) translateY(-50%);
}
body .center .outer_four__piece {
    width: 6px;
    height: 5px;
    background: #de0b46;
    box-shadow: 0px 0px 20px 0px #de0b46;
    -webkit-transform-origin: 440px 0px;
    -ms-transform-origin: 440px 0px;
    transform-origin: 440px 0px;
}
body .center .outer_five {
    -webkit-transform: translateX(-410px) translateY(-50%);
    -ms-transform: translateX(-410px) translateY(-50%);
    transform: translateX(-410px) translateY(-50%);
}
body .center .outer_five__piece {
    width: 6px;
    height: 5px;
    background: #de0b46;
    box-shadow: 0px 0px 20px 0px #de0b46;
    -webkit-transform-origin: 410px 0px;
    -ms-transform-origin: 410px 0px;
    transform-origin: 410px 0px;
}
body .center .pieces {
    -webkit-transform: translateX(540px) translateY(-50%);
    -ms-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 0.2s 0.3s;
    transition: all 0.2s 0.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 0.2s 0.1s;
    transition: all 0.2s 0.1s;
}
body .center .pieces .line {
    width: 0px;
    height: 5px;
    left: -547px;
    -webkit-transform: rotatez(4deg);
    -ms-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: 0px 0px 25px rgba(222, 11, 70, 0.27);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s 0.1s;
    transition: all 1s 0.1s;
    color: white;
    text-align: left;
    height: 20px;
    background: transparent;
    color: white;
    border-radius: 100px !important;
    box-shadow: 0px 0px 25px rgba(222, 11, 70, 0.27);
    -webkit-transform-origin: -540px 0px;
    -ms-transform-origin: -540px 0px;
    transform-origin: -540px 0px;
}
body .center .pieces .future_ui__piece:nth-of-type(1) {
    width: 231px;
}
body .center .pieces .future_ui__piece:nth-of-type(2) {
    width: 210px;
}
body .center .pieces .future_ui__piece:nth-of-type(3) {
    width: 228px;
}
body .center .pieces .future_ui__piece:nth-of-type(4) {
    width: 239px;
}
body .center .pieces .future_ui__piece:nth-of-type(5) {
    width: 225px;
}
body .center .pieces .future_ui__piece:nth-of-type(6) {
    width: 226px;
}
body .center .pieces .future_ui__piece:nth-of-type(7) {
    width: 204px;
}
body .center .pieces .future_ui__piece:nth-of-type(8) {
    width: 205px;
}
body .center .pieces .future_ui__piece:nth-of-type(9) {
    width: 229px;
}
body .center .pieces .future_ui__piece:nth-of-type(10) {
    width: 220px;
}
body .center .pieces .future_ui__piece:nth-of-type(11) {
    width: 230px;
}
body .center .pieces .future_ui__piece:nth-of-type(12) {
    width: 212px;
}
body .center .pieces .future_ui__piece:nth-of-type(13) {
    width: 248px;
}
body .center .pieces .future_ui__piece:nth-of-type(14) {
    width: 222px;
}
body .center .pieces .future_ui__piece:nth-of-type(15) {
    width: 226px;
}
body .center .pieces .future_ui__piece:nth-of-type(16) {
    width: 207px;
}
body .center .pieces .future_ui__piece:nth-of-type(17) {
    width: 224px;
}
body .center .pieces .future_ui__piece:nth-of-type(18) {
    width: 238px;
}
body .center .pieces .future_ui__piece:nth-of-type(19) {
    width: 230px;
}
body .center .pieces .future_ui__piece:nth-of-type(20) {
    width: 234px;
}
body .center .pieces .future_ui__piece:nth-of-type(21) {
    width: 200px;
}
body .center .pieces .future_ui__piece:nth-of-type(22) {
    width: 217px;
}
body .center .pieces .future_ui__piece:nth-of-type(23) {
    width: 220px;
}
body .center .pieces .future_ui__piece:nth-of-type(24) {
    width: 235px;
}
body .center .pieces .future_ui__piece:nth-of-type(25) {
    width: 212px;
}
body .center .pieces .future_ui__piece:nth-of-type(26) {
    width: 246px;
}
body .center .pieces .future_ui__piece:nth-of-type(27) {
    width: 213px;
}
body .center .pieces .future_ui__piece:nth-of-type(28) {
    width: 220px;
}
body .center .pieces .future_ui__piece:nth-of-type(29) {
    width: 212px;
}
body .center .pieces .future_ui__piece:nth-of-type(30) {
    width: 203px;
}
body .center .pieces .future_ui__piece:nth-of-type(31) {
    width: 200px;
}
body .center .pieces .future_ui__piece:nth-of-type(32) {
    width: 208px;
}
body .center .pieces .future_ui__piece:nth-of-type(33) {
    width: 208px;
}
body .center .pieces .future_ui__piece:nth-of-type(34) {
    width: 248px;
}
body .center .pieces .future_ui__piece:nth-of-type(35) {
    width: 228px;
}
body .center .pieces .future_ui__piece:nth-of-type(36) {
    width: 231px;
}
body .center .pieces .future_ui__piece:nth-of-type(1) {
    -webkit-transform: rotateZ(-45deg) rotateY(0deg);
    transform: rotateZ(-45deg) rotateY(0deg);
    width: 294px;
}
body .center .pieces .future_ui__piece:nth-of-type(1):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(-45deg) translatex(20px);
    -ms-transform: rotate(-45deg) translatex(20px);
    transform: rotate(-45deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(1):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(2) {
    -webkit-transform: rotateZ(-35deg) rotateY(0deg);
    transform: rotateZ(-35deg) rotateY(0deg);
    width: 319px;
}
body .center .pieces .future_ui__piece:nth-of-type(2):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(-35deg) translatex(20px);
    -ms-transform: rotate(-35deg) translatex(20px);
    transform: rotate(-35deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(2):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(3) {
    -webkit-transform: rotateZ(-25deg) rotateY(0deg);
    transform: rotateZ(-25deg) rotateY(0deg);
    width: 253px;
}
body .center .pieces .future_ui__piece:nth-of-type(3):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(-25deg) translatex(20px);
    -ms-transform: rotate(-25deg) translatex(20px);
    transform: rotate(-25deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(3):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(4) {
    -webkit-transform: rotateZ(-15deg) rotateY(0deg);
    transform: rotateZ(-15deg) rotateY(0deg);
    width: 285px;
}
body .center .pieces .future_ui__piece:nth-of-type(4):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(-15deg) translatex(20px);
    -ms-transform: rotate(-15deg) translatex(20px);
    transform: rotate(-15deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(4):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(5) {
    -webkit-transform: rotateZ(-5deg) rotateY(0deg);
    transform: rotateZ(-5deg) rotateY(0deg);
    width: 316px;
}
body .center .pieces .future_ui__piece:nth-of-type(5):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(-5deg) translatex(20px);
    -ms-transform: rotate(-5deg) translatex(20px);
    transform: rotate(-5deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(5):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(6) {
    -webkit-transform: rotateZ(5deg) rotateY(0deg);
    transform: rotateZ(5deg) rotateY(0deg);
    width: 290px;
}
body .center .pieces .future_ui__piece:nth-of-type(6):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(5deg) translatex(20px);
    -ms-transform: rotate(5deg) translatex(20px);
    transform: rotate(5deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(6):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(7) {
    -webkit-transform: rotateZ(15deg) rotateY(0deg);
    transform: rotateZ(15deg) rotateY(0deg);
    width: 241px;
}
body .center .pieces .future_ui__piece:nth-of-type(7):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(15deg) translatex(20px);
    -ms-transform: rotate(15deg) translatex(20px);
    transform: rotate(15deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(7):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(8) {
    -webkit-transform: rotateZ(25deg) rotateY(0deg);
    transform: rotateZ(25deg) rotateY(0deg);
    width: 279px;
}
body .center .pieces .future_ui__piece:nth-of-type(8):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(25deg) translatex(20px);
    -ms-transform: rotate(25deg) translatex(20px);
    transform: rotate(25deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(8):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(9) {
    -webkit-transform: rotateZ(35deg) rotateY(0deg);
    transform: rotateZ(35deg) rotateY(0deg);
    width: 286px;
}
body .center .pieces .future_ui__piece:nth-of-type(9):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(35deg) translatex(20px);
    -ms-transform: rotate(35deg) translatex(20px);
    transform: rotate(35deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(9):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.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 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(10) {
    -webkit-transform: rotateZ(45deg) rotateY(0deg);
    transform: rotateZ(45deg) rotateY(0deg);
    width: 258px;
}
body .center .pieces .future_ui__piece:nth-of-type(10):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(45deg) translatex(20px);
    -ms-transform: rotate(45deg) translatex(20px);
    transform: rotate(45deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(10):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(10):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(10):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(11) {
    -webkit-transform: rotateZ(55deg) rotateY(0deg);
    transform: rotateZ(55deg) rotateY(0deg);
    width: 259px;
}
body .center .pieces .future_ui__piece:nth-of-type(11):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(55deg) translatex(20px);
    -ms-transform: rotate(55deg) translatex(20px);
    transform: rotate(55deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(11):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(11):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(11):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(12) {
    -webkit-transform: rotateZ(65deg) rotateY(0deg);
    transform: rotateZ(65deg) rotateY(0deg);
    width: 279px;
}
body .center .pieces .future_ui__piece:nth-of-type(12):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(65deg) translatex(20px);
    -ms-transform: rotate(65deg) translatex(20px);
    transform: rotate(65deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(12):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(12):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(12):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(13) {
    -webkit-transform: rotateZ(75deg) rotateY(0deg);
    transform: rotateZ(75deg) rotateY(0deg);
    width: 282px;
}
body .center .pieces .future_ui__piece:nth-of-type(13):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(75deg) translatex(20px);
    -ms-transform: rotate(75deg) translatex(20px);
    transform: rotate(75deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(13):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(13):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(13):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(14) {
    -webkit-transform: rotateZ(85deg) rotateY(0deg);
    transform: rotateZ(85deg) rotateY(0deg);
    width: 255px;
}
body .center .pieces .future_ui__piece:nth-of-type(14):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(85deg) translatex(20px);
    -ms-transform: rotate(85deg) translatex(20px);
    transform: rotate(85deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(14):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(14):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(14):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(15) {
    -webkit-transform: rotateZ(95deg) rotateY(0deg);
    transform: rotateZ(95deg) rotateY(0deg);
    width: 270px;
}
body .center .pieces .future_ui__piece:nth-of-type(15):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(95deg) translatex(20px);
    -ms-transform: rotate(95deg) translatex(20px);
    transform: rotate(95deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(15):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(15):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(15):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(16) {
    -webkit-transform: rotateZ(105deg) rotateY(0deg);
    transform: rotateZ(105deg) rotateY(0deg);
    width: 317px;
}
body .center .pieces .future_ui__piece:nth-of-type(16):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(105deg) translatex(20px);
    -ms-transform: rotate(105deg) translatex(20px);
    transform: rotate(105deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(16):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(16):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(16):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(17) {
    -webkit-transform: rotateZ(115deg) rotateY(0deg);
    transform: rotateZ(115deg) rotateY(0deg);
    width: 308px;
}
body .center .pieces .future_ui__piece:nth-of-type(17):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(115deg) translatex(20px);
    -ms-transform: rotate(115deg) translatex(20px);
    transform: rotate(115deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(17):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(17):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(17):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(18) {
    -webkit-transform: rotateZ(125deg) rotateY(0deg);
    transform: rotateZ(125deg) rotateY(0deg);
    width: 294px;
}
body .center .pieces .future_ui__piece:nth-of-type(18):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(125deg) translatex(20px);
    -ms-transform: rotate(125deg) translatex(20px);
    transform: rotate(125deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(18):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(18):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(18):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(19) {
    -webkit-transform: rotateZ(135deg) rotateY(0deg);
    transform: rotateZ(135deg) rotateY(0deg);
    width: 278px;
}
body .center .pieces .future_ui__piece:nth-of-type(19):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(135deg) translatex(20px);
    -ms-transform: rotate(135deg) translatex(20px);
    transform: rotate(135deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(19):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(19):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(19):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(20) {
    -webkit-transform: rotateZ(145deg) rotateY(0deg);
    transform: rotateZ(145deg) rotateY(0deg);
    width: 272px;
}
body .center .pieces .future_ui__piece:nth-of-type(20):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(145deg) translatex(20px);
    -ms-transform: rotate(145deg) translatex(20px);
    transform: rotate(145deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(20):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(20):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(20):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(21) {
    -webkit-transform: rotateZ(155deg) rotateY(0deg);
    transform: rotateZ(155deg) rotateY(0deg);
    width: 289px;
}
body .center .pieces .future_ui__piece:nth-of-type(21):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(155deg) translatex(20px);
    -ms-transform: rotate(155deg) translatex(20px);
    transform: rotate(155deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(21):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(21):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(21):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(22) {
    -webkit-transform: rotateZ(165deg) rotateY(0deg);
    transform: rotateZ(165deg) rotateY(0deg);
    width: 308px;
}
body .center .pieces .future_ui__piece:nth-of-type(22):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(165deg) translatex(20px);
    -ms-transform: rotate(165deg) translatex(20px);
    transform: rotate(165deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(22):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(22):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(22):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(23) {
    -webkit-transform: rotateZ(175deg) rotateY(0deg);
    transform: rotateZ(175deg) rotateY(0deg);
    width: 249px;
}
body .center .pieces .future_ui__piece:nth-of-type(23):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(175deg) translatex(20px);
    -ms-transform: rotate(175deg) translatex(20px);
    transform: rotate(175deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(23):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(23):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(23):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(24) {
    -webkit-transform: rotateZ(185deg) rotateY(0deg);
    transform: rotateZ(185deg) rotateY(0deg);
    width: 246px;
}
body .center .pieces .future_ui__piece:nth-of-type(24):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(185deg) translatex(20px);
    -ms-transform: rotate(185deg) translatex(20px);
    transform: rotate(185deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(24):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(24):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(24):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(25) {
    -webkit-transform: rotateZ(195deg) rotateY(0deg);
    transform: rotateZ(195deg) rotateY(0deg);
    width: 299px;
}
body .center .pieces .future_ui__piece:nth-of-type(25):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(195deg) translatex(20px);
    -ms-transform: rotate(195deg) translatex(20px);
    transform: rotate(195deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(25):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(25):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(25):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(26) {
    -webkit-transform: rotateZ(205deg) rotateY(0deg);
    transform: rotateZ(205deg) rotateY(0deg);
    width: 244px;
}
body .center .pieces .future_ui__piece:nth-of-type(26):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(205deg) translatex(20px);
    -ms-transform: rotate(205deg) translatex(20px);
    transform: rotate(205deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(26):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(26):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(26):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(27) {
    -webkit-transform: rotateZ(215deg) rotateY(0deg);
    transform: rotateZ(215deg) rotateY(0deg);
    width: 273px;
}
body .center .pieces .future_ui__piece:nth-of-type(27):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(215deg) translatex(20px);
    -ms-transform: rotate(215deg) translatex(20px);
    transform: rotate(215deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(27):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(27):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(27):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(28) {
    -webkit-transform: rotateZ(225deg) rotateY(0deg);
    transform: rotateZ(225deg) rotateY(0deg);
    width: 278px;
}
body .center .pieces .future_ui__piece:nth-of-type(28):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(225deg) translatex(20px);
    -ms-transform: rotate(225deg) translatex(20px);
    transform: rotate(225deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(28):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(28):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(28):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(29) {
    -webkit-transform: rotateZ(235deg) rotateY(0deg);
    transform: rotateZ(235deg) rotateY(0deg);
    width: 256px;
}
body .center .pieces .future_ui__piece:nth-of-type(29):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(235deg) translatex(20px);
    -ms-transform: rotate(235deg) translatex(20px);
    transform: rotate(235deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(29):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(29):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(29):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(30) {
    -webkit-transform: rotateZ(245deg) rotateY(0deg);
    transform: rotateZ(245deg) rotateY(0deg);
    width: 270px;
}
body .center .pieces .future_ui__piece:nth-of-type(30):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(245deg) translatex(20px);
    -ms-transform: rotate(245deg) translatex(20px);
    transform: rotate(245deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(30):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(30):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(30):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(31) {
    -webkit-transform: rotateZ(255deg) rotateY(0deg);
    transform: rotateZ(255deg) rotateY(0deg);
    width: 256px;
}
body .center .pieces .future_ui__piece:nth-of-type(31):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(255deg) translatex(20px);
    -ms-transform: rotate(255deg) translatex(20px);
    transform: rotate(255deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(31):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(31):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(31):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(32) {
    -webkit-transform: rotateZ(265deg) rotateY(0deg);
    transform: rotateZ(265deg) rotateY(0deg);
    width: 285px;
}
body .center .pieces .future_ui__piece:nth-of-type(32):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(265deg) translatex(20px);
    -ms-transform: rotate(265deg) translatex(20px);
    transform: rotate(265deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(32):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(32):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(32):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(33) {
    -webkit-transform: rotateZ(275deg) rotateY(0deg);
    transform: rotateZ(275deg) rotateY(0deg);
    width: 243px;
}
body .center .pieces .future_ui__piece:nth-of-type(33):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(275deg) translatex(20px);
    -ms-transform: rotate(275deg) translatex(20px);
    transform: rotate(275deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(33):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(33):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(33):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(34) {
    -webkit-transform: rotateZ(285deg) rotateY(0deg);
    transform: rotateZ(285deg) rotateY(0deg);
    width: 254px;
}
body .center .pieces .future_ui__piece:nth-of-type(34):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(285deg) translatex(20px);
    -ms-transform: rotate(285deg) translatex(20px);
    transform: rotate(285deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(34):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(34):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(34):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(35) {
    -webkit-transform: rotateZ(295deg) rotateY(0deg);
    transform: rotateZ(295deg) rotateY(0deg);
    width: 258px;
}
body .center .pieces .future_ui__piece:nth-of-type(35):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(295deg) translatex(20px);
    -ms-transform: rotate(295deg) translatex(20px);
    transform: rotate(295deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(35):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(35):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(35):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .future_ui__piece:nth-of-type(36) {
    -webkit-transform: rotateZ(305deg) rotateY(0deg);
    transform: rotateZ(305deg) rotateY(0deg);
    width: 291px;
}
body .center .pieces .future_ui__piece:nth-of-type(36):hover {
    cursor: pointer;
    color: white;
    -webkit-animation: blink 0.4s 0.4s;
    animation: blink 0.4s 0.4s;
    background: #de0b46;
    -webkit-transform: rotate(305deg) translatex(20px);
    -ms-transform: rotate(305deg) translatex(20px);
    transform: rotate(305deg) translatex(20px);
    box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
}
body .center .pieces .future_ui__piece:nth-of-type(36):hover span {
    position: absolute;
    top: 12px;
    width: 270px;
    text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
    left: 240px;
    -webkit-transform: translateZ(100px) rotateZ(0deg);
    transform: translateZ(100px) rotateZ(0deg);
}
body .center .pieces .future_ui__piece:nth-of-type(36):hover .tip {
    opacity: 1;
    left: 110%;
}
body .center .pieces .future_ui__piece:nth-of-type(36):hover .line {
    opacity: 1;
    width: 547px;
    -webkit-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
body .center .pieces .blank {
    opacity: 0.1;
    background: none;
    pointer-events: none;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.27);
    border: 6px solid #3d4b6d !important;
    /* animations */
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes inalt {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes inalt {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes wiggle {
    0% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
    }
    25% {
        -webkit-transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
        transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
    }
    50% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
    }
    75% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
    }
    100% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
    }
}
@keyframes wiggle {
    0% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
    }
    25% {
        -webkit-transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
        transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
    }
    50% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
    }
    75% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
    }
    100% {
        -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
        transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
    }
}
@-webkit-keyframes intro_box {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    40% {
        -webkit-transform: scale(0.89);
        transform: scale(0.89);
    }
    60% {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
    }
    80% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes intro_box {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    40% {
        -webkit-transform: scale(0.89);
        transform: scale(0.89);
    }
    60% {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
    }
    80% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

HTML

<div class='grain'></div>
<div class='intro'>
    <div class='center'>
        <div class='core'></div>
        <div class='outer_one'>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
            <div class='outer_one__piece'></div>
        </div>
        <div class='outer_two'>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
            <div class='outer_two__piece'></div>
        </div>
        <div class='outer_three'>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
            <div class='outer_three__piece'></div>
        </div>
        <div class='outer_four'>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
            <div class='outer_four__piece'></div>
        </div>
        <div class='outer_five'>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
            <div class='outer_five__piece'></div>
        </div>
        <div class='pieces'>
            <div class='future_ui__piece'>
                <span>Warp drive</span>
                <div class='line'></div>
                <div class='tip'>
                    Yes, commander!
                </div>
            </div>
            <div class='future_ui__piece'>
                <span>Teleport</span>
                <div class='line'></div>
                <div class='tip'>
                    Beam me up!
                </div>
            </div>
            <div class='future_ui__piece'>
                <span>Fusion core</span>
                <div class='line'></div>
                <div class='tip'>
                    Engineering!
                </div>
            </div>
            <div class='future_ui__piece'>
                <span>Laser target</span>
                <div class='line'></div>
                <div class='tip'>
                    Charge laz0rs!
                </div>
            </div>
            <div class='future_ui__piece'>
                <span>Shields</span>
                <div class='line'></div>
                <div class='tip'>
                    Status report!
                </div>
            </div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
            <div class='future_ui__piece blank'></div>
        </div>
    </div>
</div>

CSS 3D Radial Menu

菜单，界面组件

编辑器支持Emmet

快捷键

CSS 3D Radial Menu

菜单，界面组件

圆形右键弹出式菜单

暗灰色调的响应式标签导航栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：