《人是_》TO清舟 （学习黑黑《妈妈的油纸伞》代码效果）
<style>#tiezi {
--width: 1300px;
margin: 100px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 620px;
background: radial-gradient(circle, rgba(244,187,68,.3), rgba(250,218,94,.3), rgba(243,229,171,.3)), black;
background-blend-mode: overlay normal;
box-shadow: 3px 3px 6px #333;
overflow: hidden;
z-index: 1;
position: relative;
}
.ma, .player { position: absolute; }
.ma { left: 8%; top: 2%; }
.player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
.vid { position: absolute; object-fit: cover;pointer-events: none; }
.vid:nth-of-type(1) { bottom: -262px; width: 100%; height: calc(100% + 350px); opacity: 1;filter: drop-shadow(0 0 10px GoldEnrod); }
.vid:nth-of-type(2) { bottom: 0px;left: -10%; width: 120%; height: calc(100% + 70px); mix-blend-mode: screen; opacity: .95;}
#pic { position: absolute; width: 360px; height: 120px; bottom: 40px; left: 10px; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2599523935" autoplay loop muted></audio>
<video class="vid" src="https://link.hhtjim.com/163/14598389.mp4" autoplayloop></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145_10s_big.mp4" autoplay loop muted></video>
<div id="ma" class="ma">
<img id="player" class="player" src="https://pic.imgdb.cn/item/66920d60d9c307b7e9c5ab5a.png" alt="" />
</div>
<img id="pic" alt="" src="https://pic.imgdb.cn/item/66929ba3d9c307b7e989db76.png" />
</div>
<script>
(function() {
let ar = [, , , , ];
ar.forEach((e,k) => {
let clone = ma.cloneNode(true);
let btn = clone.querySelector('#player');
clone.id="ma" + k;
btn.id = 'player' + k;
btn.style.width = e + 'px';
btn.onclick = () => player.click();
clone.style.cssText += `
left: ${e}%;
top: ${e}%;
filter: hue-rotate(${e}deg);
`;
tiezi.appendChild(clone);
});
var vids = document.querySelectorAll('.vid');
let mState = () => {
let players = document.querySelectorAll('.player'),
vids = document.querySelectorAll('.vid');
tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
players.forEach(player => player.title = ['暂停','播放'][+aud.paused]);
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();})();
</script> 这个周深在流浪地球2里的插曲，不知清舟听过吧。
这歌词挺喜欢的，跟清舟一起听@绿叶清舟 {:4_187:} 黑黑的这个克隆真好，想弄多少小播就弄多少，我一下子弄了好多个@马黑黑 {:4_173:} 为了让掉上下的东西，只能把高度一再加高，弄得总不能展示全部，比较长的歌词都出去了。
其实我错了，可以上下加些遮挡图片，这样可以保证比例了。嗯，下回知道了{:4_173:} 太空一日游。{:4_189:} 请清舟太空遨游，太超前了{:4_178:} 红影 发表于 2024-7-13 23:35
黑黑的这个克隆真好，想弄多少小播就弄多少，我一下子弄了好多个@马黑黑
多的时候这个就很方便了 马黑黑 发表于 2024-7-14 13:09
多的时候这个就很方便了
想请教一下，为什么观看时视频很清晰，转过来就自动变成非高清了，怎样用代码修饰让它恢复高清呢？{:4_187:} 梦油 发表于 2024-7-14 09:01
太空一日游。
因为喜欢这首歌，就把这个视频拿来了{:4_173:} 辫子哥哥 发表于 2024-7-14 11:43
请清舟太空遨游，太超前了
必须的，要游玩就来个高大上的{:4_170:} 马黑黑 发表于 2024-7-14 13:09
多的时候这个就很方便了
是的，有些场景多弄几个小播也好看呢{:4_187:} 红影 发表于 2024-7-14 15:14
是的，有些场景多弄几个小播也好看呢
那是 谢谢影，还是第一次听了{:4_183:} 周深的歌还真听得不多了 好看又好听{:4_205:} 绿叶清舟 发表于 2024-7-14 19:33
周深的歌还真听得不多了
清舟收礼开心{:4_187:} 这里的周深男声明显了 马黑黑 发表于 2024-7-14 19:20
那是
而且这个调整大小和位置什么的十分方便呢{:4_187:} 绿叶清舟 发表于 2024-7-14 19:30
谢谢影，还是第一次听了
流浪地球我看过，这个流浪2还没看过呢，偶尔听到这首歌觉得很好听，跟清舟一起听{:4_187:} 绿叶清舟 发表于 2024-7-14 19:33
周深的歌还真听得不多了
我是从大鱼开始喜欢他的歌，以前记得还分享过他的达拉崩吧{:4_173:}