右边那个图图长宽比有问题，队长可以弄个纵向的图图，或者按比例缩放，不能这样直接把宽度缩掉的。
嗯嗯，右边的动图的。
<style>
#papa { left: -242px; width: 1080px; height: 664px; background: gray url('https://pic.imgdb.cn/item/62dea443f54cd3f93792f370.jpg'); overflow: hidden; box-shadow: 3px 3px 20px #000; position: relative; }
#boat { position: absolute; width: 200px; height: 118px; top: calc(100% - 150px); filter: blur(1px); animation: boating 20s linear infinite; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; background: rgba(255,255,255,.2); border-radius: 6px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox span { margin-left: 10px; font: normal 1.2em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes boating { from { left: 100%; } to { left: -200px; } }
</style>
<div id="papa">
<img id="boat" src='https://pic.imgdb.cn/item/62deaa7af54cd3f937bb1e66.png' alt="" />
<div id="playbox"><input id="btnplay" type="button" value=">" /><span>你永远停留在我青春最美的回忆里 - E8r</span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1949146459.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
</script>
加林森 发表于 2022-5-27 16:49
嗯嗯，右边的动图的。
已经看不出原样了呢{:4_173:} 红影 发表于 2022-5-28 21:24
已经看不出原样了呢
是的。
页:
1
[2]