爱情里没有谁错谁对 （学习黑黑Minimal bass效果）
<style>
#papa { --state: running; --showbackface: visible; margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 710px; background: url('https://xlaj.cn/upfile/2025/02/14/002.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; left: 320px; top: 110px; width: 150px; height: 260px; 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: 35%;left: 35%; 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://i.mp3.wf/223347596.mp3" autoplay loop></audio>
</div>
<script>
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.title = aud.paused ? '点击播放' : '点击暂停';
};
var pics = [
'https://xlaj.cn/upfile/2025/02/14/01.jpg',
'https://xlaj.cn/upfile/2025/02/14/02.jpg',
'https://xlaj.cn/upfile/2025/02/14/03.jpg',
'https://xlaj.cn/upfile/2025/02/14/04.jpg',
'https://xlaj.cn/upfile/2025/02/14/05.jpg',
'https://xlaj.cn/upfile/2025/02/14/06.jpg',
'https://xlaj.cn/upfile/2025/02/14/07.jpg',
'https://xlaj.cn/upfile/2025/02/14/08.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;
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> @马黑黑
黑黑继续套用玩一个{:4_205:} 感谢黑黑源码分享，和前面的差不多的代码就直接用前面的图片了 https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif
配置做得好，背景配图很靓 好漂亮的制作，太美了，给亲爱的点赞{:4_199:} 背景图做得太美了，配上旋转的情侣图，绝配！{:4_199:} 有8张图片啊，厉害！{:4_187:} 这个制作太美了。 精彩极了，学习！ 起个网名好难 发表于 2025-2-18 22:24
难难晚上好，谢谢欣赏{:4_187:} 马黑黑 发表于 2025-2-18 22:29
配置做得好，背景配图很靓
小辣椒偷懒，一样的图，一样的歌曲做了黑黑二个效果{:4_189:} 红影 发表于 2025-2-18 22:37
好漂亮的制作，太美了，给亲爱的点赞
亲爱的，我是同样的图用了二次，做了黑黑分享的二个效果 梦江南 发表于 2025-2-19 08:52
背景图做得太美了，配上旋转的情侣图，绝配！
阿姨谢谢欣赏，这个图是以前玩过的，现在旧图重新加了图片转换效果 梦江南 发表于 2025-2-19 08:57
有8张图片啊，厉害！
阿姨8个图效果一样的，可以加更加多都可以 庶民 发表于 2025-2-19 10:04
这个制作太美了。
问好庶民，谢谢欣赏{:4_187:} 亚伦影音工作室 发表于 2025-2-19 13:54
精彩极了，学习！
问好亚纶，谢谢欣赏{:4_187:} 小辣椒 发表于 2025-2-19 22:45
亲爱的，我是同样的图用了二次，做了黑黑分享的二个效果
组合得好就是好呢{:4_187:} 小辣椒 发表于 2025-2-19 22:44
小辣椒偷懒，一样的图，一样的歌曲做了黑黑二个效果
你做帖子有底子的，即使是套用，也是有自己的设计在里面，这就是美 红影 发表于 2025-2-19 22:55
组合得好就是好呢
亲爱的，你就是鼓励的多{:4_170:}
页:
[1]
2