南无月 发表于 2024-3-24 19:52

【黑师代码】遨游（学习黑师20240324《天之涯》背景循环效果）

<style>
        #papa { margin: 120px 0 0 calc(50% - 931px); width: 1700px; height: 600px; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
        #canv { position: absolute;}
        .pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M1924,280 Q750,180 -500,70'); transform: rotateX(180deg);offset-distance: 100%; animation: fly 60s var(--delay) infinite var(--state); --delay: 0s;z-index: 2;}
        .pic:nth-of-type(2) { width: 60px;--delay: -20s; }
        .pic:nth-of-type(3) { width: 90px;--delay: -40s; }
    @keyframes fly { to { offset-distance: 0; } }
        #mypic { position: absolute; left: 26%; top: 60px; width: 80px; cursor: pointer; mix-blend-mode: multiply; transform: scale(0.8) rotate(-10deg); animation: scale 10s infinite alternate var(--state); }
        #lrc { --motion: cover2; --tt: 1s; --bg: repeating-linear-gradient(135deg, orange 1px, yellow 6px); position: absolute;left: 50%; transform: translate(-50%); bottom: 20px; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
        #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; border-bottom: 6px dotted orange; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
        @keyframes scale { to { transform: scale(1.2) rotate(360deg); } }
        @keyframes cover1 { from { width: 0%; }to { width: 100%; } }
        @keyframes cover2 { from { width: 0%; }to { width: 100%; } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051361761" loop autoplay></audio>
        <img class="pic" src="https://pic.imgdb.cn/item/65ffbe039f345e8d036fc70e.png" alt="" />
        <img class="pic" src="https://pic.imgdb.cn/item/65ffbed69f345e8d0375e3ec.png" alt="" />
        <img class="pic" src="https://pic.imgdb.cn/item/65ffbee79f345e8d037664e0.png" alt="" />
        <canvas id="canv"></canvas>
        <img id="mypic" src="https://pic.imgdb.cn/item/65ffc0b29f345e8d0384c33c.png" alt="" title="播放/暂停" />
        <div id="lrc" data-lrc="遨游">遨游</div>
</div>

<script>
var geci = [ ];
        var sf = document.createElement('script');
(function() {
        let w = canv.width = papa.offsetWidth;
        let h = canv.height = papa.offsetHeight;
        let x = 0, step = 0.5, raf = null;
        let ctx = canv.getContext('2d');
        let img = document.createElement('img');
        img.src = 'https://pic.imgdb.cn/item/65ffbcb79f345e8d036628f7.webp';

        let mState = () => {
                aud.paused ?
                        (papa.style.setProperty('--state', 'paused'),mypic.title = '点击播放') :
                        (papa.style.setProperty('--state', 'running'), mypic.title = '点击暂停');
                move();
        }

        let move = () => {
                ctx.clearRect(0,0,w,h);
                x -= step;
                if(x <= -w) x = 0;
                ctx.drawImage(img, x, 0, w, h);
                ctx.drawImage(img, w + x - 1, 0, w, h);
                raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(move);
        };

        img.onload = () => move();
        aud.onpause = aud.onplaying = () => mState();
        aud.onseeking = () => raf = cancelAnimationFrame(raf);
        mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>



大猫咪 发表于 2024-3-24 19:58

真漂亮！画面壮观又美丽，融合音乐气势磅薄而又震撼人心，赞！

南无月好制作！问好！

{:4_204:}{:4_199:}{:4_178:}

南无月 发表于 2024-3-24 20:01

大猫咪 发表于 2024-3-24 19:58
真漂亮！画面壮观又美丽，融合音乐气势磅薄而又震撼人心，赞！

南无月好制作！问好！


感谢大猫咪临贴支持。{:4_190:}

红影 发表于 2024-3-25 11:52

这个衔接漂亮，场景壮阔，动态也很适合。
月儿好帖{:4_199:}

南无月 发表于 2024-3-25 17:59

红影 发表于 2024-3-25 11:52
这个衔接漂亮，场景壮阔，动态也很适合。
月儿好帖

影子的回复真让人开心。。。{:4_187:}

南无月 发表于 2024-3-25 18:00

咦，这贴老师怎么没来改一个。。@马黑黑

小辣椒 发表于 2024-3-25 21:36

月月好制作，我也是画面拼命点击，看见那个飞行器了，月月设置的很完美，欣赏&#127543;️月精彩的制作

红影 发表于 2024-3-25 21:49

南无月 发表于 2024-3-25 17:59
影子的回复真让人开心。。。

月儿的制作很精美，真棒{:4_187:}

马黑黑 发表于 2024-3-25 22:04

南无月 发表于 2024-3-25 18:00
咦，这贴老师怎么没来改一个。。@马黑黑

来了来了，喝醉了{:4_206:}

南无月 发表于 2024-3-26 18:03

小辣椒 发表于 2024-3-25 21:36
月月好制作，我也是画面拼命点击，看见那个飞行器了，月月设置的很完美，欣赏&#127543;️月精彩的制 ...

{:4_170:}找了半天这个图比较像飞船，卡通又好玩，就用上了。

南无月 发表于 2024-3-26 18:04

红影 发表于 2024-3-25 21:49
月儿的制作很精美，真棒

影子夸了就乐一个。。。{:4_173:}

南无月 发表于 2024-3-26 18:05

马黑黑 发表于 2024-3-25 22:04
来了来了，喝醉了

不改作业是小事儿。。难得听老师说醉。。开心自在为上。{:4_170:}

马黑黑 发表于 2024-3-26 18:27

南无月 发表于 2024-3-26 18:05
不改作业是小事儿。。难得听老师说醉。。开心自在为上。

一高兴就会没数，喝多了正常

南无月 发表于 2024-3-26 20:39

马黑黑 发表于 2024-3-26 18:27
一高兴就会没数，喝多了正常

高兴喝的都不叫多。。都算正常{:4_170:}

马黑黑 发表于 2024-3-26 20:41

南无月 发表于 2024-3-26 20:39
高兴喝的都不叫多。。都算正常

那就正常吧

南无月 发表于 2024-3-26 20:50

马黑黑 发表于 2024-3-26 20:41
那就正常吧

叫尽兴

绿叶清舟 发表于 2024-3-26 20:57

画面真漂亮，还有外星人啊{:4_189:}

南无月 发表于 2024-3-26 20:58

绿叶清舟 发表于 2024-3-26 20:57
画面真漂亮，还有外星人啊

外星人的飞船在翻 跟斗{:4_170:}

绿叶清舟 发表于 2024-3-26 21:01

南无月 发表于 2024-3-26 20:58
外星人的飞船在翻 跟斗

来地球水土不服的吧{:4_189:}

南无月 发表于 2024-3-26 21:09

绿叶清舟 发表于 2024-3-26 21:01
来地球水土不服的吧

也可能油号不对{:4_170:}
页: [1] 2 3 4
查看完整版本: 【黑师代码】遨游（学习黑师20240324《天之涯》背景循环效果）