绿叶清舟 发表于 2024-3-24 20:40

套一个


<style>
    #papa { margin: 30px 0 0 calc(50% - 633px); width: 1100px; height: 700px; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
    #canv { position: absolute; }
    #mypic { position: absolute; left: 45%; top: 50px; width: 160px; cursor: pointer; mix-blend-mode: multiply; transform: scale(0.8) rotate(-10deg); animation: scale 2.5s infinite alternate var(--state); }
    @keyframes scale { to { transform: scale(1.5) rotate(10deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=189987" loop autoplay></audio>
    <canvas id="canv"></canvas>
    <img id="mypic" src="https://5b0988e595225.cdn.sohucs.com/images/20180731/51f1497308ba4906ad6f0ad43c412220.gif" alt="" title="播放/暂停" />
</div>

<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/66001e629f345e8d0366df97.jpg';

    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 20:48

清舟构图真棒！ 色彩好漂亮！还是开直升飞机走阿 {:5_106:}

10年前有风吹过的地方就有张学友的音乐回荡，{:5_117:}唱出了几代人的心声。。。

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

绿叶清舟 发表于 2024-3-24 20:50

大猫咪 发表于 2024-3-24 20:48
清舟构图真棒！ 色彩好漂亮！还是开直升飞机走阿

10年前有风吹过的地方就有张学友的音乐回荡 ...

直升机省地方啊{:4_189:}

大猫咪 发表于 2024-3-24 20:52

绿叶清舟 发表于 2024-3-24 20:50
直升机省地方啊

{:4_172:}走的真霸气

起个网名好难 发表于 2024-3-24 20:54

https://img0.baidu.com/it/u=2292154268,3811096393&fm=253&fmt=auto&app=138&f=GIF?w=300&h=280

绿叶清舟 发表于 2024-3-24 20:56

大猫咪 发表于 2024-3-24 20:52
走的真霸气

走要走得洒脱的嘛

绿叶清舟 发表于 2024-3-24 20:56

起个网名好难 发表于 2024-3-24 20:54


谢谢网名

马黑黑 发表于 2024-3-24 21:33

大猫咪 发表于 2024-3-24 20:48
清舟构图真棒！ 色彩好漂亮！还是开直升飞机走阿

10年前有风吹过的地方就有张学友的音乐回荡 ...

{:4_181:}

马黑黑 发表于 2024-3-24 21:33

这个设计得分

绿叶清舟 发表于 2024-3-24 21:50

马黑黑 发表于 2024-3-24 21:33
这个设计得分

找两边一样的图太难了，只能加个框

马黑黑 发表于 2024-3-24 22:28

绿叶清舟 发表于 2024-3-24 21:50
找两边一样的图太难了，只能加个框

自己拍可以的，手机拍照功能都有全景

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

这个构思精巧，直升机也很给力。
欣赏清舟好帖{:4_199:}

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

绿叶清舟 发表于 2024-3-24 21:50
找两边一样的图太难了，只能加个框

可以把图图中间切开，然后两头对接起来，最后把连接部位ps一下就差不多了{:4_173:}

绿叶清舟 发表于 2024-3-25 19:31

马黑黑 发表于 2024-3-24 22:28
自己拍可以的，手机拍照功能都有全景

去找了一下看到了，不知道咋玩，那个箭头拖不动的啊

绿叶清舟 发表于 2024-3-25 19:32

红影 发表于 2024-3-25 11:55
可以把图图中间切开，然后两头对接起来，最后把连接部位ps一下就差不多了

但要四边的图内容连接起来有难度了

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

清舟我拼命点击画面，终于音乐和效果出来了{:4_172:}

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

画面放大看见有架无人机，这个就是按钮吧，设置的太好了{:4_199:}

绿叶清舟 发表于 2024-3-25 21:32

小辣椒 发表于 2024-3-25 21:31
清舟我拼命点击画面，终于音乐和效果出来了

播放器是那个直升飞机了{:4_189:}

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

套一个也是很漂亮的，音乐也是好听的，张学友的歌{:4_178:}

绿叶清舟 发表于 2024-3-25 21:40

小辣椒 发表于 2024-3-25 21:34
套一个也是很漂亮的，音乐也是好听的，张学友的歌

是啊，找不到有感觉的音乐，就来听学友的歌了
页: [1] 2 3
查看完整版本: 套一个