代码
<style>
#mydiv {
margin: 0 0 0 calc(50% - 563.5px);
width: 965px;
height: 500px;
background: #d3f0f5;
box-shadow: 4px 4px 8px gray;
overflow: hidden;
z-index: 1;
position: relative;
--begin1: 0px;
--begin2: 960px;
}
#mydiv::before , #mydiv::after {
position: absolute;
content: '';
inset: 0;
background: url('https://638183.freep.cn/638183/t24/webp/xwjn.webp') no-repeat;
z-index: -2;
}
#mydiv::before {
background-position: var(--begin1) 0;
}
#mydiv::after {
transform: scale(-1, 1);
/* begin2的值当为 -1*(begin1 + 960px) */
background-position: var(--begin2) 0;
}
#play {
position: absolute;
left: calc(50% - 50px);
bottom: 10px;
width: 100px;
cursor: pointer;
animation: rotating 5s linear infinite var(--state);
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=472005796" autoplay></audio>
<img id="play" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" />
</div>
<script>
var ww = mydiv.offsetWidth;
var step = 1, begin1 = 0, begin2 = ww, raf = null;
play.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onpause = aud.onplaying = () => mState();
aud.onended = () => { aud.play(); cancelAnimationFrame(raf); }
aud.onseeked = () => cancelAnimationFrame(raf);
var moving = () => {
begin1 -= step;
if(begin1 <= -ww) begin1 = ww;
/* 处理背景衔接 移动设备衔接存在1像素问题 ±1 */
begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : begin2 = -1 * (begin1 + ww - 1) ;
mydiv.style.setProperty('--begin1', begin1 + 'px');
mydiv.style.setProperty('--begin2', begin2 + 'px');
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
};
var mState = () => {
aud.paused
? (mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf))
: (mydiv.style.setProperty('--state', 'running'), raf = requestAnimationFrame(moving));
};
</script>
| 
发表于 2024-4-5 20:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-5 21:19
