朵拉 发表于 2024-4-16 23:12

埋 藏（马黑黑原创）

本帖最后由 朵拉 于 2024-4-16 23:20 编辑 <br /><br /><style>
#mydiv { margin: 0 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: lightgreen url('https://pic.imgdb.cn/item/661e96320ea9cb1403b0a104.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://pic.imgdb.cn/item/661e96320ea9cb1403b0a104.jpg') no-repeat center/cover; z-index: -1;}

#mydiv::after { left: var(--begin2); transform: scale(-1,1);}
#play { position: absolute; left: calc(50% - 50px); top: 10px; width: 100px; cursor: pointer; animation: rotating 5s linear infinite var(--state); z-index: 100;}
#vid { position: absolute; right: 0; width: 40%; height: 30%; object-fit: cover; mix-blend-mode: screen; transform: rotate(-15deg); pointer-events: none;}
canvas { z-index: 99; 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=2145375993" 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 sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);
var lz = {papa: 'body', total: 100, maxsize: 20, speed: 1, move: false};

var ww = mydiv.offsetWidth;
var step = 0.5, 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;

    var 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());
    lz.move = !aud.paused;
};

</script>

朵拉 发表于 2024-4-16 23:21

@马黑黑
老师好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-4-16 23:22

挺漂亮

朵拉 发表于 2024-4-16 23:25

马黑黑 发表于 2024-4-16 23:22
挺漂亮

老师，学生昨天的帖子 您还木有看过哈~~
https://www.huachaowang.com/forum.php?mod=viewthread&tid=75467

愤怒的葡萄 发表于 2024-4-17 07:02

挺漂亮的。

樵歌 发表于 2024-4-17 07:21

太漂亮啦{:4_187:}

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

真漂亮。欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 埋 藏（马黑黑原创）