Minimal bass

马黑黑 · 发表于 2025-2-17 12:18

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

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

x

本帖最后由马黑黑于 2025-2-17 12:20 编辑

马黑黑 · 发表于 2025-2-17 12:19

本帖最后由马黑黑于 2025-2-17 12:21 编辑

帖子代码

<style>
#papa { --state: running; --showbackface: visible; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/5/R-C_result.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.5); perspective: 4000px; z-index: 1; position: relative; }
#papa:hover #backface { display: inline-block; }
#mplayer { position: absolute; right: 330px; top: 120px; width: 260px; height: 450px; transform-style: preserve-3d; display: grid;place-item: center; animation: rot 20s linear infinite var(--state); }
#mplayer:hover { --state: paused; }
.image { position: absolute; width: 100%; height: 100%; border-radius: 8px; filter: drop-shadow(2px 2px 20px #000); cursor: pointer; transition: .7s; backface-visibility: var(--showbackface); transform: rotateY(var(--deg)) translateZ(300px); }
.image:hover { transform: rotateY(var(--deg)) translateZ(300px) scale(1.2); }
#backface { position: absolute; bottom: 50px; right: 400px; border-radius: 6px; cursor: pointer; display: none; }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<input id="backface" type="button" value="隐藏背面" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1859982992" autoplay loop></audio>
</div>
<script>
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.title = aud.paused ? '点击播放' : '点击暂停';
};
var pics = [
'https://638183.freep.cn/638183/t24/biu/ji01.jpg',
'https://638183.freep.cn/638183/t24/biu/ji02.jpg',
'https://638183.freep.cn/638183/t24/biu/ji03.jpg',
'https://638183.freep.cn/638183/t24/biu/ji04.jpg',
'https://638183.freep.cn/638183/t24/biu/ji05.jpg',
'https://638183.freep.cn/638183/t24/biu/ji06.jpg',
];
Array.from({length: pics.length}).forEach((img,key) => {
img = document.createElement('img');
img.className = 'image';
img.style.cssText += `--deg: ${key * 360 / pics.length}deg`;
img.src = pics[key];
mplayer.appendChild(img);
});
aud.onpause = aud.onplaying = () => mState();
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
backface.onclick = () => {
if(backface.value === '隐藏背面') {
papa.style.setProperty('--showbackface', 'hidden');
backface.value = '显示背面';
}else{
papa.style.setProperty('--showbackface', 'visible');
backface.value = '隐藏背面';
}
};
papa.scrollIntoView(true);
</script>