加林森 发表于 2022-4-14 13:57

《相见不如怀念》-- 那英（试验）

本帖最后由 加林森 于 2022-4-14 17:16 编辑 <br /><br /><style>

.mama { width: 760px; height: 560px; perspective: 2000px; }

.lifangti {
      --x: 160px;
      --xx: -80px;
      margin: 100px auto;
      width: var(--x);
      height: var(--x);
      transform-style: preserve-3d;
      transform-origin: 50% 50% 0;
      transform: rotateX(20deg) rotateY(-20deg);
      animation: rot 10s linear infinite;
}

.lifangti div {
      position: absolute;
      left: 0; top: 0; width: inherit; height: inherit;
      font: 2em / var(--x) Arial;
      color: white;
      text-align: center;
      text-shadow: 1px 1px 2px #000;
      opacity: .8;
}

.lifangti div:nth-child(1) { background: tan; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(2) { background: black; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(3) { background: green; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(4) { background: magenta; transform:rotateY(270deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(5) { background: red; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(6) {background: green; transform: rotateX(-90deg) translateZ(var(--xx)); }

@keyframes rot {
      to { transform: rotateX(360deg) rotateY(720deg); }
}

</style>

<div class="mama">
        <div class="lifangti">
              <div>相</div>
                <div>见</div>
              <div>不</div>
                <div>如</div>
              <div>怀</div>
                <div>念</div>
        </div>

<audio autoplay="" loop=""><source src="http://www.kumeiwp.com/sub/filestores/2022/04/13/404c1156a8d241f2e59da401331929b0.mp3
"></audio>

加林森 发表于 2022-4-14 14:03

@马黑黑   怎么没有转呢？{:5_102:}

梦油 发表于 2022-4-14 15:18

我很久没挺那英的歌啦。
那图怎么没动啊？

加林森 发表于 2022-4-14 17:17

梦油 发表于 2022-4-14 15:18
我很久没挺那英的歌啦。
那图怎么没动啊？

现在转起来了。

梦油 发表于 2022-4-14 17:58

加林森 发表于 2022-4-14 17:17
现在转起来了。

看到了。你真棒！

加林森 发表于 2022-4-14 18:19

梦油 发表于 2022-4-14 17:58
看到了。你真棒！

嗯嗯，谢谢！{:4_190:}

梦油 发表于 2022-4-14 20:13

加林森 发表于 2022-4-14 18:19
嗯嗯，谢谢！

别客气

绿叶清舟 发表于 2022-4-14 20:22

队长厉害啊，真漂亮

加林森 发表于 2022-4-14 20:42

绿叶清舟 发表于 2022-4-14 20:22
队长厉害啊，真漂亮

可惜不能控制的。

绿叶清舟 发表于 2022-4-14 20:56

加林森 发表于 2022-4-14 20:42
可惜不能控制的。

要控制啥啊

加林森 发表于 2022-4-14 20:58

绿叶清舟 发表于 2022-4-14 20:56
要控制啥啊

控制音乐啊。

红影 发表于 2022-4-14 21:01

漂亮，恭喜队长做成了{:4_187:}

绿叶清舟 发表于 2022-4-14 21:01

加林森 发表于 2022-4-14 20:58
控制音乐啊。

那播放器是单独的了

红影 发表于 2022-4-14 21:02

加林森 发表于 2022-4-14 20:42
可惜不能控制的。

跟音乐关联就可以了{:4_204:}

加林森 发表于 2022-4-14 21:05

红影 发表于 2022-4-14 21:02
跟音乐关联就可以了

我还有点没有搞懂的。

加林森 发表于 2022-4-14 21:05

绿叶清舟 发表于 2022-4-14 21:01
那播放器是单独的了

是的。

加林森 发表于 2022-4-14 21:06

红影 发表于 2022-4-14 21:01
漂亮，恭喜队长做成了

谢谢红影。这个滚动是成功了。

红影 发表于 2022-4-15 11:12

加林森 发表于 2022-4-14 21:05
我还有点没有搞懂的。

我做了一个跟音乐关联的，一会去发出来，队长看一下就知道了。

加林森 发表于 2022-4-15 12:13

红影 发表于 2022-4-15 11:12
我做了一个跟音乐关联的，一会去发出来，队长看一下就知道了。

好的好的，谢谢啊.{:4_204:}

红影 发表于 2022-4-15 12:49

加林森 发表于 2022-4-15 12:13
好的好的，谢谢啊.

不客气，都是黑黑的代码呢。
页: [1] 2
查看完整版本: 《相见不如怀念》-- 那英（试验）