论坛 › 欢乐水吧 › 《笑傲江湖》 -- 女子十二乐坊 （音乐欣赏）

加林森 发表于 2022-4-19 19:28

《笑傲江湖》 -- 女子十二乐坊 （音乐欣赏）

<style>

.shouhu { position: relative; left: -342px;top:120px;width: 1280px; height: 720px;display: flex; perspective: 2000px;background: #eee url('https://pic.imgdb.cn/item/625e9a38239250f7c5e6a67c.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 = "http://www.kumeiwp.com/sub/filestores/2022/04/18/b0cb71ff8ef4e12d4d34942b974d803c.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-19 20:01

第一次欣赏，队长制作真棒，好听好看，   晚上好！{:4_204:}{:4_190:}

樵歌 发表于 2022-4-19 21:15

马术黑科技加自己的创意吧。{:4_199:}

加林森 发表于 2022-4-19 21:19

大猫咪 发表于 2022-4-19 20:01
第一次欣赏，队长制作真棒，好听好看，   晚上好！

猫猫晚上好。好听吧。{:4_204:}{:4_190:}

加林森 发表于 2022-4-19 21:19

樵歌 发表于 2022-4-19 21:15
马术黑科技加自己的创意吧。

是的，有点小想法的。{:4_189:}

大猫咪 发表于 2022-4-19 21:20

加林森 发表于 2022-4-19 21:19
猫猫晚上好。好听吧。

嗯 非常喜欢    队长好分享   {:4_179:}{:4_199:}

加林森 发表于 2022-4-19 21:21

大猫咪 发表于 2022-4-19 21:20
嗯 非常喜欢    队长好分享

我今天听了几次了。

红影 发表于 2022-4-19 21:31

好听又好看，队长真棒{:4_187:}

加林森 发表于 2022-4-19 21:41

红影 发表于 2022-4-19 21:31
好听又好看，队长真棒

红影也喜欢啊，谢谢你的支持！{:4_204:}

查看完整版本: 《笑傲江湖》 -- 女子十二乐坊 （音乐欣赏）