立方体也可以关联音乐

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

前

左

后

右

底

顶

马黑黑 · 发表于 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>