隊長 下午好~
本帖最后由 加林森 于 2022-4-16 17:52 编辑 <br /><br />朵嫣 发表于 2021-9-12 15:41
隊長 下午好~
朵嫣下午好！{:4_171:}
<style>
.shouhu { position: relative; left: -302px;top:120px;width: 1200px; height: 675px;display: flex; perspective: 2000px;background: #eee url('https://pic.imgdb.cn/item/625a8f75239250f7c5d8ee15.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/15/18288c39955a589beecaa366a5d15616.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>
加林森 发表于 2021-9-12 11:15
嗯嗯，挺好看挺好听的。
是的，非常不错的制作{:4_187:}
我能用原文完整唱这首歌呢。我留学的时候，一次晚会，我就唱它，好多菇凉都流下了热泪。
不过我唱的时候，把 he 改成了 she
歌词有个别拼写错误呢，队长
红影 发表于 2021-9-12 19:34
是的，非常不错的制作
谢谢红影{:4_171:}
马黑黑 发表于 2021-9-12 19:55
我能用原文完整唱这首歌呢。我留学的时候，一次晚会，我就唱它，好多菇凉都流下了热泪。
不错嘛，你还挺有水平的。
马黑黑 发表于 2021-9-12 19:55
不过我唱的时候，把 he 改成了 she
哦
马黑黑 发表于 2021-9-12 19:57
歌词有个别拼写错误呢，队长
这个我就没办法改了。{:4_203:}
好听最爱之一
绿叶清舟 发表于 2021-9-12 20:26
好听最爱之一
谢谢清舟{:4_187:}
加林森 发表于 2021-9-12 20:28
谢谢清舟
队长客气 了{:4_190:}
绿叶清舟 发表于 2021-9-12 20:29
队长客气 了
我也是借用宇神的代码，学习制作了一下。
加林森 发表于 2021-9-12 20:21
这个我就没办法改了。
想想办法
加林森 发表于 2021-9-12 20:20
不错嘛，你还挺有水平的。
哪里哪里
马黑黑 发表于 2021-9-12 21:26
想想办法
视频里的文字怎么修改？我可不会啊。
好好好~~~~非常喜欢的一首歌~~~~{:5_116:}
杨柳青 发表于 2021-9-12 21:47
好好好~~~~非常喜欢的一首歌~~~~
那就慢慢聆听吧
加林森 发表于 2021-9-12 20:19
谢谢红影
非常喜欢的一首歌{:4_204:}