漂亮！很有意境。。。
老兄喜欢就好。
<style>
#papa { left: -214px; width: 1024px; height: 640px; display: flex; justify-content: center; background: #000 url('https://pic.imgdb.cn/item/62e47dfbf54cd3f937c1ea68.jpg') no-repeat center/cover; perspective: 3000px; box-shadow: 4px 4px 24px #000; font-size: 16px; position: relative; }
#papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
#wrapper { position: absolute; top: calc(50% - 150px); width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: 40%; top: 50%; width: 50%; height: 50%; border-radius: 50%; transform: translateZ(100px); background: linear-gradient(tan, red); opacity: .75; }
.panel { position: absolute; width: 300px; height: 300px; opacity: .75; }
#btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
#yyMsg { position: absolute; left: 110px; bottom: 40px; color: silver; }
#btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
#mkMsg { position: absolute; left: calc(50% + 35px); bottom: 40px; }
</style>
<div id="papa">
<h2>装拆一念间</h2>
<div id="wrapper">
<style>
#papa { left: -0px; width: 150px; height: 129px; display: flex; justify-content: center; background: #000<url('https://pic.imgdb.cn/item/62e4b5c7f54cd3f937ee3fb2.jpg')no-repeat center/cover; perspective: 3000px; box-shadow: 4px 4px 24px #000; font-size: 16px; position: relative; } ></div>
<input id="btnPlay" type="button" value="音乐停" />
<span id="yyMsg">背景音乐 - 汗、雨、泪</span>
<input id="btnBegin" type="button" value="暂停" />
<span id="mkMsg">waiting ...</span>
</div>
let idx = 0, step = 1, flag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=68362.mp3';
aud.loop = true;
aud.autoplay = true;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let panelAr = [
' translateY(150px) rotateX(90deg)', //下
'translateZ(-150px)', //后
'translateZ(150px)', //前
'translateX(-150px) rotateY(90deg)', //左
'translateX(150px) rotateY(90deg)', //右
'translateY(-150px) rotateX(90deg)', //上
];
panelAr.forEach((item,key) => {
let span = document.createElement('span');
span.className = 'panel';
span.style.transform = panelAr;
span.style.display = 'none';
wrapper.appendChild(span);
});
let spanAr = Array.from(document.querySelectorAll('.panel'));
spanAr.splice(1,0,ball);
let TT = setInterval(mkBox, 3000);
btnBegin.onclick = () => {
flag = !flag;
flag ? (TT = setInterval(mkBox, 3000), btnBegin.value = '暂停') : (clearInterval(TT), btnBegin.value = '继续');
}
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnPlay.value = '音乐停');
aud.addEventListener('pause', () => btnPlay.value = '音乐放');
function mkBox() {
step > 0 ? (spanAr.style.display = 'block', mkMsg.innerText = '装') : (spanAr.style.display = 'none', mkMsg.innerText = '拆');
spanAr.style.background = `rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)},.95)`;
idx += step;
if(idx > spanAr.length - 1 || idx < 0) {
step = -step;
idx += step;
}
}
</script>
</td></tr></table> 红影 发表于 2022-6-21 22:41
很漂亮，队长学得真快其实还是像以前那样把视频的几个字弄出去比较好
我都设计了，又跑出来，我都不知道该怎么调了！ 再来欣赏一下。 加林森 发表于 2022-6-21 22:48
有点不懂的。没有动。这又是笫一次制作的。
和第几次没关系的，每个视频的调用都是一样的呢。
只要在.vid里把视频提上去55px就行了，这个数字是黑黑测试出来的，也就是设置top: -55px;
加林森 发表于 2022-6-21 23:19
我都设计了，又跑出来，我都不知道该怎么调了！
你只设置了-3，太少了，你去看看，我帮你直接设置了-55px，现在那几个字没了。而且帮你把高度变成了631，也就是你原来的576加上了55，这样仍然保证视频是满屏的{:4_173:} 虚虚实实的朦胧美制造了更有意思的意境。 红影 发表于 2022-6-22 10:14
你只设置了-3，太少了，你去看看，我帮你直接设置了-55px，现在那几个字没了。而且帮你把高度变成了631， ...
好的好的，谢谢红影帮忙啦。{:4_204:} 梦油 发表于 2022-6-22 10:43
虚虚实实的朦胧美制造了更有意思的意境。
是的。 红影 发表于 2022-6-22 10:07
和第几次没关系的，每个视频的调用都是一样的呢。
只要在.vid里把视频提上去55px就行了，这个数字是黑黑 ...
好的，明白了。 队长，刚才发现黑黑帖里面视频没有看见，现在队长帖里面视频也没有看见，现在估计手机是看不见视频？我去自己视频一贴看看 小辣椒 发表于 2022-6-22 15:55
队长，刚才发现黑黑帖里面视频没有看见，现在队长帖里面视频也没有看见，现在估计手机是看不见视频？我去自 ...
我现在在外面，也是用的手机。 小辣椒 发表于 2022-6-22 15:55
队长，刚才发现黑黑帖里面视频没有看见，现在队长帖里面视频也没有看见，现在估计手机是看不见视频？我去自 ...
手机可以看见的？。 加林森 发表于 2022-6-22 12:38
好的，明白了。
下回队长使用视频时候都可以这样设的。{:4_173:} 红影 发表于 2022-6-22 16:41
下回队长使用视频时候都可以这样设的。
好的好的。 加林森 发表于 2022-6-21 22:42
我说了的。送你一个大美女的。是不是成功了？
嗯嗯，这美女好像喝了。。。{:5_117:} 马黑黑 发表于 2022-6-21 22:43
玩不出你的水平
瞎说。。。{:5_158:} 东篱闲人 发表于 2022-6-24 19:01
瞎说。。。
没瞎的{:5_106:} 东篱闲人 发表于 2022-6-24 19:00
嗯嗯，这美女好像喝了。。。
喝了就好。
页:
1
[2]