马黑黑 发表于 2022-4-24 23:07

立方体也可以关联音乐

<style>
body { perspective: 3000px; }
.cube {
        --x: 100px;
        --xx: -50px; /*此值必须为 --x 的一半 */
        margin: 100px auto;
        width: var(--x);
        height: var(--x);
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0;
        cursor: pointer;
        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: tan; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(2) { background: black; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(3) { background: green; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(4) { background: magenta; transform:rotateY(270deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(5) { background: red; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(6) {background: green; transform: rotateX(-90deg) translateZ(var(--xx)); }
@keyframes rot {
        to { transform: rotateX(720deg) rotateY(360deg); }
}
</style>

<div class="cube">
        <div>前</div>
        <div>左</div>
        <div>后</div>
        <div>右</div>
        <div>底</div>
        <div>顶</div>
</div>

<script>
let cube = document.querySelector(".cube");
let au = document.createElement("audio");
let flag = true;
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/23/27bb8739457612e9fea9e9e109396da7.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = "none";
cube.appendChild(au);
if(!flag) cube.style.animationPlayState = "paused";
cube.onclick = function(){
        flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>

马黑黑 发表于 2022-4-24 23:08

代码：

<style>
body { perspective: 3000px; }
.cube {
        --x: 100px;
        --xx: -50px; /*此值必须为 --x 的一半 */
        margin: 100px auto;
        width: var(--x);
        height: var(--x);
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0;
        cursor: pointer;
        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: tan; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(2) { background: black; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(3) { background: green; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(4) { background: magenta; transform:rotateY(270deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(5) { background: red; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(6) {background: green; transform: rotateX(-90deg) translateZ(var(--xx)); }
@keyframes rot {
        to { transform: rotateX(720deg) rotateY(360deg); }
}
</style>

<div class="cube">
        <div>前</div>
        <div>左</div>
        <div>后</div>
        <div>右</div>
        <div>底</div>
        <div>顶</div>
</div>

<script>
let cube = document.querySelector(".cube");
let au = document.createElement("audio");
let flag = true;
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/23/27bb8739457612e9fea9e9e109396da7.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = "none";
cube.appendChild(au);
if(!flag) cube.style.animationPlayState = "paused";
cube.onclick = function(){
        flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>


红影 发表于 2022-4-24 23:29

旋转魔方，漂亮{:4_187:}

马黑黑 发表于 2022-4-24 23:42

红影 发表于 2022-4-24 23:29
旋转魔方，漂亮

似乎是越看越好看{:4_170:}

樵歌 发表于 2022-4-25 09:35

还是透明的，真好看。

马黑黑 发表于 2022-4-25 12:13

樵歌 发表于 2022-4-25 09:35
还是透明的，真好看。

很多人都说好看

红影 发表于 2022-4-25 22:53

马黑黑 发表于 2022-4-24 23:42
似乎是越看越好看

是呢，非常漂亮的{:4_187:}

马黑黑 发表于 2022-4-25 23:13

红影 发表于 2022-4-25 22:53
是呢，非常漂亮的

这个音乐也不错

加林森 发表于 2022-4-25 23:30

老黑厉害啊！{:4_199:}

红影 发表于 2022-4-26 21:13

马黑黑 发表于 2022-4-25 23:13
这个音乐也不错

嗯，很轻松愉快的前奏，听不出是什么语的。英语说唱？

马黑黑 发表于 2022-4-26 21:16

红影 发表于 2022-4-26 21:13
嗯，很轻松愉快的前奏，听不出是什么语的。英语说唱？

对，定有一点点蓝盾的风格

红影 发表于 2022-4-27 11:07

马黑黑 发表于 2022-4-26 21:16
对，定有一点点蓝盾的风格

原来黑黑喜欢这类风格的歌曲啊。

马黑黑 发表于 2022-4-27 12:52

红影 发表于 2022-4-27 11:07
原来黑黑喜欢这类风格的歌曲啊。

还行吧，能接受

红影 发表于 2022-4-27 21:12

马黑黑 发表于 2022-4-27 12:52
还行吧，能接受

仔细听了，还不错的{:4_204:}

马黑黑 发表于 2022-4-27 22:20

红影 发表于 2022-4-27 21:12
仔细听了，还不错的

可以一听

红影 发表于 2022-4-28 10:19

马黑黑 发表于 2022-4-27 22:20
可以一听

嗯，来多听几遍{:4_204:}

马黑黑 发表于 2022-4-28 12:58

红影 发表于 2022-4-28 10:19
嗯，来多听几遍

我也听了几次
页: [1]
查看完整版本: 立方体也可以关联音乐