朵拉 发表于 2024-4-5 21:39

心如止水（马黑黑原创）

本帖最后由 朵拉 于 2024-4-5 21:45 编辑 <br /><br /><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://pic.imgdb.cn/item/660fff3e68eb93571326569e.jpg') 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=1349292048" 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 21:46

@马黑黑
老师 晚上好，您这次代码完美，
学生的作业好多了，请点评哈{:4_190:}

马黑黑 发表于 2024-4-5 22:05

朵拉 发表于 2024-4-5 21:46
@马黑黑
老师 晚上好，您这次代码完美，
学生的作业好多了，请点评哈

效果完美

小辣椒 发表于 2024-4-5 22:07

朵拉速度的，我刚看见黑黑这个教程出来，你已经完成作业了{:4_199:}

小辣椒 发表于 2024-4-5 22:07

欣赏朵拉美美的效果{:4_171:}

朵拉 发表于 2024-4-5 22:19

马黑黑 发表于 2024-4-5 22:05
效果完美

谢谢老师{:4_190:}

马黑黑 发表于 2024-4-5 22:20

朵拉 发表于 2024-4-5 22:19
谢谢老师

{:4_191:}

朵拉 发表于 2024-4-5 22:20

小辣椒 发表于 2024-4-5 22:07
欣赏朵拉美美的效果

问好小辣椒，么么哒{:4_204:}

红影 发表于 2024-4-5 22:22

好漂亮的制作。欣赏朵宝好帖{:4_187:}

樵歌 发表于 2024-4-6 06:50

这个学生每一个交作业，老师要奖励的{:4_187:}

绿叶清舟 发表于 2024-4-6 19:27

年度三好学生非朵拉莫属了{:4_204:}
页: [1]
查看完整版本: 心如止水（马黑黑原创）