亚伦影音工作室 发表于 2024-2-21 23:05

多张透明图层叠加

本帖最后由 亚伦影音工作室 于 2024-2-21 23:05 编辑 <br /><br /><style>
#papa {margin: 150px -300px;width: 1164px;height: 640px;background:url('https://pic.imgdb.cn/item/65b76cfb871b83018ab9b60e.png') no-repeat 90% 50%/100px 200px,url('https://pic.imgdb.cn/item/65a67b84871b83018a2709d4.png') no-repeat 60% 100%/220px 300px, url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a5c0fba99074e4a1f3e4089238c0777e.jpg') no-repeat center/cover; z-index: 1;display: grid; overflow: hidden;position: relative;}

#mplayer { position: absolute; margin: 2% 70% ; width: 100px; height: 100px;cursor: pointer; animation: rot 6s infinite linear;background:url('https://pic.imgdb.cn/item/654c82b7c458853aefcb569f.png') no-repeat center/cover, url('https://pic.imgdb.cn/item/64ce4f041ddac507ccfe04e5.jpg') no-repeat center/cover;border-radius: 50%;}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa"><span id="mplayer" title="播放/暂停"></span></div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=466105" autoplay loop></audio>

<script>
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused') : (mplayer.style.animationPlayState = 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-2-21 23:22

连播放器按钮也是叠加图图呢，这个制作漂亮。
欣赏亚伦老师好帖{:4_199:}
页: [1]
查看完整版本: 多张透明图层叠加