请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-4-7 17:50 编辑
以下两组代码为实例代码，都通过帖子元素的两个伪元素加以实现。音频联动控制中，包含了一个视频的同步控制。
一、移动伪元素的实现机制
这个机制有灵活性，帖子元素的宽高可以不管背景图片的实际尺寸。
<style>
#mydiv {
margin: 20px auto;
width: 960px;
height: 540px;
background: lightgreen url('https://638183.freep.cn/638183/t24/1/levels.jpg') no-repeat center/cover;
box-shadow: 4px 4px 8px gray;
box-sizing: border-box;
overflow: hidden;
z-index: 1;
position: relative;
}
#mydiv::before , #mydiv::after {
position: absolute;
content: '';
left: var(--begin1);
top: 0px;
width: 100%;
height: 100%;
background: url('https://638183.freep.cn/638183/t24/1/levels.jpg') no-repeat center/cover;
z-index: -1;
}
#mydiv::after {
left: var(--begin2);
transform: scale(-1,1);
}
#play {
position: absolute;
left: calc(50% - 50px);
bottom: 10px;
width: 100px;
cursor: pointer;
animation: rotating 5s linear infinite var(--state);
}
#vid {
position: absolute;
right: 0;
width: 40%;
height: 30%;
object-fit: cover;
mix-blend-mode: screen;
transform: rotate(-15deg);
pointer-events: none;
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2130363396" autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d.mp4" muted loop></video>
<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;
aud.loop = false;
aud.onpause = aud.onplaying = () => moving();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };
var moving = () => {
//自左向右
begin1 += step;
begin2 += step;
if(begin1 >= ww) begin1 = -ww;
if(begin2 >= ww) begin2 = -ww;
/* 自右向左
begin1 -= step;
begin2 -= step;
if(begin1 <= -ww) begin1 = ww;
if(begin2 <= -ww) begin2 = ww;
*/
let b2 = begin2 + (begin1 >= 0 ? 1 : -1);
mydiv.style.setProperty('--begin1', begin1 + 'px');
mydiv.style.setProperty('--begin2', b2 + 'px');
aud.paused
? (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'), vid.pause())
: (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'),vid.play());
};
</script>
二、移动伪元素背景的实现机制
注意：，这个机制要求帖子元素宽高尺寸等于图片实际宽高尺寸。
<style>
#mydiv {
margin: 20px 0 20px calc(50% - 641px);
width: 1280px;
height: 800px;
background: lightblue;
box-shadow: 4px 4px 8px #000;
overflow: hidden;
z-index: 1;
position: relative;
--begin1: 0px;
--begin2: -1280px;
}
#mydiv::before , #mydiv::after {
position: absolute;
content: '';
inset: 0;
background: url('https://638183.freep.cn/638183/t24/1/prologue.jpg') no-repeat;
z-index: -2;
}
#mydiv::before {
background-position: var(--begin1) 0;
}
#mydiv::after {
transform: scale(-1, 1);
background-position: var(--begin2) 0;
}
#play {
position: absolute;
left: calc(50% - 50px);
top: 20px;
width: 100px;
cursor: pointer;
animation: rotating 5s linear infinite var(--state);
}
#vid {
position: absolute;
right: 0;
width: 40%;
height: 30%;
object-fit: cover;
mix-blend-mode: screen;
transform: rotate(-15deg);
pointer-events: none;
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2923186" autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d.mp4" muted loop></video>
<img id="play" src="https://638183.freep.cn/638183/small/4yc.png" alt="" />
</div>
<script>
var ww = mydiv.offsetWidth;
var step = 0.5, begin1 = 0, raf = null;
aud.loo = false;
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;
/* 自右向左
begin1 -= step;
if(begin1 <= -ww) begin1 = ww;
*/
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), vid.pause())
: (mydiv.style.setProperty('--state', 'running'), raf = requestAnimationFrame(moving), vid.play());
};
</script>
| 
发表于 2024-4-7 16:48
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-7 17:41
发表于 2024-4-7 17:50
发表于 2024-4-7 20:42
我回去看看