朵拉 发表于 2024-4-6 23:13

未 必（马黑黑原创）

本帖最后由 马黑黑 于 2024-4-7 08:34 编辑 <br /><br /><style>
#mydiv {
      margin: 20px 0 20px calc(50% - 721px);
      width: 1200px;
      height: 800px;
      background: lightblue;
      box-shadow: 4px 4px 8px #000;
      overflow: hidden;
      z-index: 1;
      position: relative;
      --begin1: 0px;
      --begin2: -1200px;
}
#mydiv::before , #mydiv::after {
      position: absolute;
      content: '';
      inset: 0;
      background: url('https://pic.imgdb.cn/item/66116b4b68eb935713769a18.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=2115519354" 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;
      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-6 23:37

@马黑黑
老师 晚上好，开头收尾 循环有瑕疵，请指点{:4_190:}

红影 发表于 2024-4-7 00:14

是的，当中有个空档。是不是图片的宽度问题啊。

红影 发表于 2024-4-7 00:17

朵宝的这张图图宽度是1200的，背景框设置是1280，应该是这个问题。把框也改成1200就可以了。

马黑黑 发表于 2024-4-7 08:38

朵拉 发表于 2024-4-6 23:37
@马黑黑
老师 晚上好，开头收尾 循环有瑕疵，请指点

你的图片实际尺寸是 1200 * 800，如此，帖子的宽高尺寸也应为 1200 * 800，CSS变量 --begin2为 -1200，这是CSS代码中的配套，要点是：帖子宽高和图片实际尺寸一致，变量配套。

图片实际尺寸，手机可以查看，长按图片，在菜单中查找详情之类的子项。

已经帮你改过了，刷新看看效果。

朵拉 发表于 2024-4-7 09:01

马黑黑 发表于 2024-4-7 08:38
你的图片实际尺寸是 1200 * 800，如此，帖子的宽高尺寸也应为 1200 * 800，CSS变量 --begin2为 -1200，这 ...
哎呀，学生忘记没有改变数值，
谢谢老师的指点~~{:4_190:}

朵拉 发表于 2024-4-7 09:02

红影 发表于 2024-4-7 00:17
朵宝的这张图图宽度是1200的，背景框设置是1280，应该是这个问题。把框也改成1200就可以了。
已经修改数值 可以了，谢谢影宝~~{:4_204:}

马黑黑 发表于 2024-4-7 09:03

朵拉 发表于 2024-4-7 09:01
哎呀，学生忘记没有改变数值，
谢谢老师的指点~~

冲动是年轻人的特点，都没细看说明{:4_170:}

朵拉 发表于 2024-4-7 09:05

马黑黑 发表于 2024-4-7 09:03
冲动是年轻人的特点，都没细看说明

只顾着捡到光，没仔细看说明{:4_173:}

马黑黑 发表于 2024-4-7 09:08

朵拉 发表于 2024-4-7 09:05
只顾着捡到光，没仔细看说明

正常现象

樵歌 发表于 2024-4-7 09:57

不错！老师的本事快学到七七八八了{:4_189:}

红影 发表于 2024-4-7 12:35

朵拉 发表于 2024-4-7 09:02
已经修改数值 可以了，谢谢影宝~~

恭喜朵宝改好了{:4_187:}
页: [1]
查看完整版本: 未 必（马黑黑原创）