CSS3实现大屏旋转底座（未来科技风格）

最新推荐文章于 2024-06-18 09:49:33 发布

天河书阁 VicRestart

最新推荐文章于 2024-06-18 09:49:33 发布

阅读量1.3k

点赞数 1

分类专栏： vue2+elementui+echarts vue3+elementplus 文章标签： css3 科技 css

本文链接：https://blog.csdn.net/Backli/article/details/126671230

版权

vue2+elementui+echarts 同时被 2 个专栏收录

5 篇文章 9 订阅

订阅专栏

vue3+elementplus

2 篇文章 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>
    </div>

二、CSS和SCSS样式代码

如果想直接用，就复制css代码即可。
如果要定制的话，最好使用scss代码（后面有）。
CSS代码：

/* Placeholders */
body .center {
  left: 0;
  right: 0;
  top: 50%;
  position: absolute;
  margin: auto;
  transform: translateY(-50%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body .center .outer_three__piece {
  position: absolute;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Styles */
body {
  height: 100vh;
  animation: intro_box 1s 1s forwards;
  opacity: 0;
  perspective-origin: 50% -10%;
  margin: 0;
  padding: 0;
  font-family: montserrat;
  perspective: 800px;
  background: radial-gradient(ellipse at top left, rgba(222, 11, 70, 0.26) -160%, rgba(255, 255, 255, 0) 103%);
}

body .grain {
  transform: scale(1) !important;
  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 {
  transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(0.9);
  height: 50px;
  width: 50px;
  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 {
  transform: translateX(-120px) translateY(-50%);
}

body .center .outer_one__piece {
  width: 10px;
  height: 30px;
  background: #de0b46;
  box-shadow: 0px 0px 20px 0px #de0b46;
  transform-origin: 120px 0px;
}

body .center .outer_two {
  transform: translateX(-290px) translateY(-50%);
}

body .center .outer_two__piece {
  width: 28px;
  height: 5px;
  background: #de0b46;
  box-shadow: 0px 0px 20px 0px #de0b46;
  transform-origin: 290px 0px;
}

body .center .outer_three {
  transform: translateX(-440px) translateY(-50%);
}

body .center .outer_three__piece {
  width: 55px;
  height: 5px;
  background: #55E2F9;
  box-shadow: 0px 0px 20px 0px #55E2F9;
  transform-origin: 440px 0px;
}

body .center .outer_four {
  transform: translateX(-440px) translateY(-50%);
}

body .center .outer_four__piece {
  width: 6px;
  height: 5px;
  background: #de0b46;
  box-shadow: 0px 0px 20px 0px #de0b46;
  transform-origin: 440px 0px;
}

body .center .outer_five {
  transform: translateX(-410px) translateY(-50%);
}

body .center .outer_five__piece {
  width: 6px;
  height: 5px;
  background: #de0b46;
  box-shadow: 0px 0px 20px 0px #de0b46;
  transform-origin: 410px 0px;
}

body .center .pieces {
  transform: translateX(540px) translateY(-50%);
}

body .center .pieces .tip {
  font-size: 17px;
  position: absolute;
  left: 105%;
  opacity: 0;
  transition: all .2s .3s;
  font-weight: 400;
  color: #85DFE4;
  width: 100%;
  top: 70px;
}

body .center .pieces span {
  position: absolute;
  top: 19px;
  width: 270px;
  LEFT: 34PX;
  transform: translateZ(-770px) rotateZ(0deg);
  transition: all .2s .1s;
}

body .center .pieces .line {
  width: 0px;
  height: 5px;
  left: -547px;
  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);
  transform-style: preserve-3d;
  transition: all 1s .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);
  transform-origin: -540px 0px;
}

body .center .pieces .future_ui__piece:nth-of-type(1) {
  transform: rotateZ(-45deg) rotateY(0deg);
  width: 259px;
}

body .center .pieces .future_ui__piece:nth-of-type(1):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(2) {
  transform: rotateZ(-35deg) rotateY(0deg);
  width: 258px;
}

body .center .pieces .future_ui__piece:nth-of-type(2):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(3) {
  transform: rotateZ(-25deg) rotateY(0deg);
  width: 248px;
}

body .center .pieces .future_ui__piece:nth-of-type(3):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(4) {
  transform: rotateZ(-15deg) rotateY(0deg);
  width: 252px;
}

body .center .pieces .future_ui__piece:nth-of-type(4):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(5) {
  transform: rotateZ(-5deg) rotateY(0deg);
  width: 247px;
}

body .center .pieces .future_ui__piece:nth-of-type(5):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(6) {
  transform: rotateZ(5deg) rotateY(0deg);
  width: 249px;
}

body .center .pieces .future_ui__piece:nth-of-type(6):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(7) {
  transform: rotateZ(15deg) rotateY(0deg);
  width: 234px;
}

body .center .pieces .future_ui__piece:nth-of-type(7):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(8) {
  transform: rotateZ(25deg) rotateY(0deg);
  width: 285px;
}

body .center .pieces .future_ui__piece:nth-of-type(8):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(9) {
  transform: rotateZ(35deg) rotateY(0deg);
  width: 222px;
}

body .center .pieces .future_ui__piece:nth-of-type(9):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(10) {
  transform: rotateZ(45deg) rotateY(0deg);
  width: 288px;
}

body .center .pieces .future_ui__piece:nth-of-type(10):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(11) {
  transform: rotateZ(55deg) rotateY(0deg);
  width: 232px;
}

body .center .pieces .future_ui__piece:nth-of-type(11):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(12) {
  transform: rotateZ(65deg) rotateY(0deg);
  width: 246px;
}

body .center .pieces .future_ui__piece:nth-of-type(12):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(13) {
  transform: rotateZ(75deg) rotateY(0deg);
  width: 262px;
}

body .center .pieces .future_ui__piece:nth-of-type(13):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(14) {
  transform: rotateZ(85deg) rotateY(0deg);
  width: 290px;
}

body .center .pieces .future_ui__piece:nth-of-type(14):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(15) {
  transform: rotateZ(95deg) rotateY(0deg);
  width: 279px;
}

body .center .pieces .future_ui__piece:nth-of-type(15):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(16) {
  transform: rotateZ(105deg) rotateY(0deg);
  width: 271px;
}

body .center .pieces .future_ui__piece:nth-of-type(16):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(17) {
  transform: rotateZ(115deg) rotateY(0deg);
  width: 255px;
}

body .center .pieces .future_ui__piece:nth-of-type(17):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(18) {
  transform: rotateZ(125deg) rotateY(0deg);
  width: 251px;
}

body .center .pieces .future_ui__piece:nth-of-type(18):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(19) {
  transform: rotateZ(135deg) rotateY(0deg);
  width: 255px;
}

body .center .pieces .future_ui__piece:nth-of-type(19):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(20) {
  transform: rotateZ(145deg) rotateY(0deg);
  width: 242px;
}

body .center .pieces .future_ui__piece:nth-of-type(20):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(21) {
  transform: rotateZ(155deg) rotateY(0deg);
  width: 242px;
}

body .center .pieces .future_ui__piece:nth-of-type(21):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(22) {
  transform: rotateZ(165deg) rotateY(0deg);
  width: 261px;
}

body .center .pieces .future_ui__piece:nth-of-type(22):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(23) {
  transform: rotateZ(175deg) rotateY(0deg);
  width: 260px;
}

body .center .pieces .future_ui__piece:nth-of-type(23):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(24) {
  transform: rotateZ(185deg) rotateY(0deg);
  width: 221px;
}

body .center .pieces .future_ui__piece:nth-of-type(24):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(25) {
  transform: rotateZ(195deg) rotateY(0deg);
  width: 272px;
}

body .center .pieces .future_ui__piece:nth-of-type(25):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(26) {
  transform: rotateZ(205deg) rotateY(0deg);
  width: 233px;
}

body .center .pieces .future_ui__piece:nth-of-type(26):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(27) {
  transform: rotateZ(215deg) rotateY(0deg);
  width: 269px;
}

body .center .pieces .future_ui__piece:nth-of-type(27):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(28) {
  transform: rotateZ(225deg) rotateY(0deg);
  width: 238px;
}

body .center .pieces .future_ui__piece:nth-of-type(28):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(29) {
  transform: rotateZ(235deg) rotateY(0deg);
  width: 250px;
}

body .center .pieces .future_ui__piece:nth-of-type(29):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(30) {
  transform: rotateZ(245deg) rotateY(0deg);
  width: 272px;
}

body .center .pieces .future_ui__piece:nth-of-type(30):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(31) {
  transform: rotateZ(255deg) rotateY(0deg);
  width: 274px;
}

body .center .pieces .future_ui__piece:nth-of-type(31):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(32) {
  transform: rotateZ(265deg) rotateY(0deg);
  width: 277px;
}

body .center .pieces .future_ui__piece:nth-of-type(32):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(33) {
  transform: rotateZ(275deg) rotateY(0deg);
  width: 245px;
}

body .center .pieces .future_ui__piece:nth-of-type(33):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(34) {
  transform: rotateZ(285deg) rotateY(0deg);
  width: 245px;
}

body .center .pieces .future_ui__piece:nth-of-type(34):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(35) {
  transform: rotateZ(295deg) rotateY(0deg);
  width: 239px;
}

body .center .pieces .future_ui__piece:nth-of-type(35):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .2s;
}

body .center .pieces .future_ui__piece:nth-of-type(36) {
  transform: rotateZ(305deg) rotateY(0deg);
  width: 282px;
}

body .center .pieces .future_ui__piece:nth-of-type(36):hover {
  cursor: pointer;
  color: white;
  animation: blink .4s .4s;
  background: #DE0B46;
  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;
  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;
  transition: all .4s .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 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes inalt {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes wiggle {
  0% {
    transform: translateY(100px) translateZ(0) rotateX(100deg) rotateY(0deg) rotatez(20deg) scale(0.9);
  }
  25% {
    transform: translateY(115px) translateZ(0) rotateX(101deg) rotateY(0deg) rotatez(20deg) scale(0.9);
  }
  50% {
    transform: translateY(120px) translateZ(0) rotateX(102deg) rotateY(0deg) rotatez(20deg) scale(0.9);
  }
  75% {
    transform: translateY(115px) translateZ(0) rotateX(101deg) rotateY(0deg) rotatez(20deg) scale(0.9);
  }
  100% {
    transform: translateY(100px) translateZ(0) rotateX(100deg) rotateY(0deg) rotatez(20deg) scale(0.9);
  }
}

@keyframes intro_box {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.89);
  }
  60% {
    transform: scale(1.04);
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

源SCSS代码如下：

/* Variables */

// Core
$core_width: 50px;
$core_color: #de0b46;
$core_glow: 0px 0px 70px 20px #de0b46;

// Outer 1
$outer_one_offset: 120px; // 红圈宽度
$outer_one_width: 10px;
$outer_one_height: 30px;
$outer_one_color: #de0b46;
$outer_one_glow: 0px 0px 20px 0px #de0b46;

// Outer 2
$outer_two_offset: 290px;
$outer_two_width: 28px;
$outer_two_height: 5px;
$outer_two_color: #de0b46;
$outer_two_glow: 0px 0px 20px 0px #de0b46;

// Outer 3
$outer_three_offset: 440px;
$outer_three_width: 55px;
$outer_three_height: 5px;
$outer_three_color: #55E2F9;
$outer_three_glow: 0px 0px 20px 0px #55E2F9;

// Outer 4
$outer_four_offset: 440px;
$outer_four_width: 6px;
$outer_four_height: 5px;
$outer_four_color: #de0b46;
$outer_four_glow: 0px 0px 20px 0px #de0b46;

// Outer 5
$outer_five_offset: 410px;

// Menu items
$menu_offset: 540px;
$menu_height: 20px;
$menu_color: transparent;
$menu_glow: 0px 0px 25px rgba(222, 11, 70, 0.27);

/* Placeholders */

%center {
  left: 0;
  right: 0;
  top: 50%;
  position: absolute;
  margin: auto;
  transform: translateY(-50%);
}

%decal {
  position: absolute;
  width: $core_width;
  height: $core_width;
  left: 50%;
}

%fade_loop {
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      animation: fade 5s ($i/10 + 0s) infinite;
    }
  }
}

%fade_loop_alt {
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      animation: fade 7s ($i/10 + 0s) infinite;
    }
  }
}

%circ_loop {
  position: absolute;
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      border-radius: 2px;
      transform: rotateZ($i*10 + (0deg));
    }
  }
}

%circ_loop_quart {
  position: absolute;
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      border-radius: 2px;
      transform: rotateZ($i*4 + (0deg));
    }
  }
}

%circ_loop_quart_alt {
  position: absolute;
  @for $i from 1 through 36 {
    &:nth-of-type(#{$i}) {
      border-radius: 2px;
      transform: rotateZ($i*4 + (0deg) - 180);
    }
  }
}
/* Styles */

.intro {

}

body {
  height: 100vh;
  animation: intro_box 1s 1s forwards;
  opacity: 0;
  perspective-origin: 50% -10%;
  margin: 0;
  padding: 0;
  font-family: montserrat;
  perspective: 800px;
  //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%);
  background: radial-gradient(ellipse at top left, rgba(222, 11, 70, 0.26) -160%, rgba(255, 255, 255, 0) 103%);
  //overflow:hidden;
  .grain {
    transform: scale(1) !important;
    //background-image: url("~@/assets/images/overlay.png");
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    pointer-events: none;
    top: 0;
    opacity: 1;
    bottom: 0;
  }

  .center {
    @extend %center;
    transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(0.9);
    height: $core_width;
    width: $core_width;
    animation: wiggle 20s infinite linear;

    .core {
      width: $core_width;
      height: $core_width;
      border-radius: $core_width;
      background: $core_color;
      box-shadow: $core_glow;
    }

    .outer_one {
      @extend %decal;
      transform: translateX(-$outer_one_offset) translateY(-50%);

      &__piece {
        width: $outer_one_width;
        height: $outer_one_height;
        background: $outer_one_color;
        box-shadow: $outer_one_glow;
        transform-origin: $outer_one_offset 0px;
        @extend %circ_loop;
      }
    }

    .outer_two {
      @extend %decal;
      transform: translateX(-$outer_two_offset) translateY(-50%);

      &__piece {
        width: $outer_two_width;
        height: $outer_two_height;
        background: $outer_two_color;
        box-shadow: $outer_two_glow;
        transform-origin: $outer_two_offset 0px;
        @extend %circ_loop;
        @extend %fade_loop;
      }
    }

    .outer_three {
      @extend %decal;
      transform: translateX(-$outer_three_offset) translateY(-50%);

      &__piece {
        width: $outer_three_width;
        height: $outer_three_height;
        background: $outer_three_color;
        box-shadow: $outer_three_glow;
        transform-origin: $outer_three_offset 0px;
        @extend %circ_loop_quart;
        @extend %fade_loop;
      }
    }

    .outer_four {
      @extend %decal;
      transform: translateX(-$outer_four_offset) translateY(-50%);

      &__piece {
        width: $outer_four_width;
        height: $outer_four_height;
        background: $outer_four_color;
        box-shadow: $outer_four_glow;
        transform-origin: $outer_four_offset 0px;
        @extend %circ_loop_quart_alt;
        @extend %fade_loop_alt;
      }
    }

    .outer_five {
      @extend %decal;
      transform: translateX(-$outer_five_offset) translateY(-50%);

      &__piece {
        width: $outer_four_width;
        height: $outer_four_height;
        background: $outer_four_color;
        box-shadow: $outer_four_glow;
        transform-origin: $outer_five_offset 0px;
        @extend %circ_loop_quart_alt;
        @extend %fade_loop_alt;
      }
    }

    .pieces {
      @extend %decal;
      transform: translateX($menu_offset) translateY(-50%);

      .tip {
        font-size: 17px;
        position: absolute;
        left: 105%;
        opacity: 0;
        transition: all .2s .3s;
        font-weight: 400;
        color: #85DFE4;
        width: 100%;
        top: 70px;
      }

      span {
        position: absolute;
        top: 19px;
        width: 270px;
        LEFT: 34PX;
        transform: translateZ(-770px) rotateZ(0deg);
        transition: all .2s .1s;
      }

      .line {
        width: 0px;
        height: 5px;
        left: -547px;
        transform: rotatez(4deg);
        top: 17px;
        background: #DE0B46;
        position: absolute;
        opacity: 0;
      }

      .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);
        transform-style: preserve-3d;
        transition: all 1s .1s;
        color: white;
        text-align: left;
        @for $i from 1 through 36 {
          &:nth-of-type(#{$i}) {
            transform: rotateZ($i*10 + (0deg) - 55) rotateY(0deg);
            width: 220 + random(73) + px;

            &:hover {
              cursor: pointer;
              color: white;
              animation: blink .4s .4s;
              background: #DE0B46;
              transform: rotate($i*10 + (0deg) - 55) translatex(20px);
              box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);

              span {
                position: absolute;
                top: 12px;
                width: 270px;
                text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
                left: 240px;
                transform: translateZ(100px) rotateZ(0deg);
              }

              .tip {
                opacity: 1;
                left: 110%;
              }

              .line {
                opacity: 1;
                width: 547px;
                transition: all .4s .2s;
              }
            }
          }
        }
        height: $menu_height;
        background: $menu_color;
        color: white;
        border-radius: 100px !important;
        box-shadow: $menu_glow;
        transform-origin: - $menu_offset 0px;
        @extend %circ_loop;
      }

      .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 */

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink {
  0% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  75% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes inalt {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

$tY: 110px;
$tZ: 0;
$rX: 100deg;
$rY: 0deg;
$rZ: 20deg;

@keyframes wiggle {
  0% {
    transform: translateY(100px) translateZ($tZ) rotateX(100deg) rotateY($rY) rotatez($rZ) scale(0.9);
  }
  25% {
    transform: translateY(115px) translateZ($tZ) rotateX(101deg) rotateY($rY) rotatez($rZ) scale(0.9);
  }
  50% {
    transform: translateY(120px) translateZ($tZ) rotateX(102deg) rotateY($rY) rotatez($rZ) scale(0.9);
  }
  75% {
    transform: translateY(115px) translateZ($tZ) rotateX(101deg) rotateY($rY) rotatez($rZ) scale(0.9);
  }
  100% {
    transform: translateY(100px) translateZ($tZ) rotateX(100deg) rotateY($rY) rotatez($rZ) scale(0.9);
  }
}

@keyframes intro_box {
  0% {
    opacity: 0;
    transform: scale(0)
  }
  20% {
    opacity: 1;
    transform: scale(1.2)
  }
  40% {
    transform: scale(0.89)
  }
  60% {
    transform: scale(1.04)
  }
  80% {
    transform: scale(0.98)
  }
  100% {
    opacity: 1;
    transform: scale(1)
  }
}