论坛 › 欢乐水吧 › 《风林火山》（纯音乐）

加林森 发表于 2022-4-17 18:57

《风林火山》（纯音乐）

<style>

.shouhu { position: relative; left: -302px;top:120px;width: 1200px; height: 675px;display: flex; perspective: 2000px;background: #eee url('https://pic.imgdb.cn/item/625bebda239250f7c5f3393b.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px; }

.cube {
      --x: 200px;
      --xx: -100px;
      position: absolute;left: 430px;top:136px;cursor: pointer;
      width: var(--x);
      height: var(--x);
      transform-style: preserve-3d;
      transform-origin: 50% 50% 0;
      animation: rot 10s linear infinite;
}

.cube 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: .85;
}

.cube div:nth-child(1) { background: #ffffcc; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(2) { background: #ffccff; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(3) { background: #ccffcc; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(4) { background: #CFCFCF; transform:rotateY(270deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(5) { background: #FFAEB9; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(6) {background: #CDAF95; transform: rotateX(-90deg) translateZ(var(--xx)); }

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

</style>

<div class="shouhu">        <div class="cube">
      <div>风</div>
      <div>林</div>
      <div>火</div>
      <div>山</div>
      <div>纯音乐</div>
      <div>华语</div>
</div></div><br><br><br><br><br><br><br><br>

<script language="javascript">
let iBox = document.querySelector(".cube");
let au = document.createElement("audio");
au.src = "https://www.joy127.com/url/89907.mp3";
au.autoplay = true;
au.loop = true;
iBox.onclick = function() {
        au.paused ? (au.play(), this.style.animationPlayState = "running") : (au.pause(), this.style.animationPlayState = "paused");
}

</script>

红影 发表于 2022-4-17 19:58

队长又是一个新帖，很赞{:4_204:}

千羽 发表于 2022-4-17 20:11

队长的图好美，必须点赞送花花{:4_187:}{:4_199:}

千羽 发表于 2022-4-17 20:12

音乐也好听{:4_181:}

加林森 发表于 2022-4-17 20:55

红影 发表于 2022-4-17 19:58
队长又是一个新帖，很赞

红影晚上好。这个是电影里面的音乐。

加林森 发表于 2022-4-17 20:55

千羽 发表于 2022-4-17 20:11
队长的图好美，必须点赞送花花

谢谢千羽的支持。晚上好！{:4_204:}

加林森 发表于 2022-4-17 20:56

千羽 发表于 2022-4-17 20:12
音乐也好听

嗯嗯。电影里面的音乐。

樵歌 发表于 2022-4-17 21:00

简洁漂亮好听，特别姑娘很美。{:4_173:}

马黑黑 发表于 2022-4-17 21:01

队长的技术日臻成熟

马黑黑 发表于 2022-4-17 21:01

音乐也是好好听哒

加林森 发表于 2022-4-17 21:03

樵歌 发表于 2022-4-17 21:00
简洁漂亮好听，特别姑娘很美。

樵歌曲晚上好。你看得真仔细。

加林森 发表于 2022-4-17 21:03

马黑黑 发表于 2022-4-17 21:01
队长的技术日臻成熟

谢谢老黑。

加林森 发表于 2022-4-17 21:03

马黑黑 发表于 2022-4-17 21:01
音乐也是好好听哒

电影里面的音乐。

绿叶清舟 发表于 2022-4-17 21:13

队长真棒啊，这个片片太漂亮了

樵歌 发表于 2022-4-17 21:13

加林森 发表于 2022-4-17 21:03
樵歌曲晚上好。你看得真仔细。

必须多看一阵{:4_173:}

千羽 发表于 2022-4-17 21:15

加林森 发表于 2022-4-17 20:55
谢谢千羽的支持。晚上好！

队长不谢哈，喝水{:4_180:}

加林森 发表于 2022-4-17 21:15

樵歌 发表于 2022-4-17 21:13
必须多看一阵

哈哈，要得要得，大美女好看吧。

千羽 发表于 2022-4-17 21:16

加林森 发表于 2022-4-17 20:56
嗯嗯。电影里面的音乐。

嗯，好听{:4_171:}

加林森 发表于 2022-4-17 21:16

绿叶清舟 发表于 2022-4-17 21:13
队长真棒啊，这个片片太漂亮了

很干净的图片吧

加林森 发表于 2022-4-17 21:20

千羽 发表于 2022-4-17 21:16
嗯，好听

是的，我感觉很特别，就制作出来了。

查看完整版本: 《风林火山》（纯音乐）