梦江南 发表于 2024-10-14 15:40

学习黑黑老师的647号宇宙 代码


<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; box-sizing: border-box; filter: drop-shadow(3px 3px 4px gray); position:relative; display: block; }
#bg { animation: move 20s linear forwards; }
#player { cursor: pointer; animation: rot 10s linear infinite var(--state); }
#light { opacity: 0; animation: flash .2s 22s infinite var(--state); }
@keyframes move { to { x: -512; y: -320;} }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes flash { to { filter: brightness(2); } }
</style>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1969148475" autoplay loop></audio>
<svg viewBox="-512 -320 1024 640" id="tz" xmlns="http://www.w3.org/2000/svg">
        <defs>
                <g id="light">
                        <ellipse cx="0" cy="0" rx="10" ry="7" fill="lightgreen" transform="skewX(0)" />
                </g>
        </defs>
        <image id="bg" x="512" y="320" width="100%" height="100%" href="https://pic.imgdb.cn/item/670cc070d29ded1a8ccc8a49.gif"/>
        <g>
                <title id="tit">play</title>
                <image id="player" x="-100" y="-100" width="200" height="200" xlink:href="https://638183.freep.cn/638183/web/svg/light.svg" />
        </g>
        <use x="-345" y="-218" href="#light" />
        <use x="-250" y="-256" href="#light" />
        <use x="-18" y="-285" href="#light" />
        <use x="202" y="-258" href="#light" />
        <use x="307" y="-218" href="#light" />
</svg>

<script>
mState = () => {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        tit.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
bg.onanimationend = () => light.style.setProperty('opacity', '1');
</script>

梦油 发表于 2024-10-14 17:39

缓缓而动的画面很好看啊。

老谟深虑 发表于 2024-10-14 18:12

          欣赏老师的音画，点赞！

红影 发表于 2024-10-14 18:35

漂亮的动态背景，灯光效果位置也很准确。
江南的这个做得好{:4_199:}

红影 发表于 2024-10-14 18:36

这个灯光貌似用圆更好呢，不需要用椭圆啊{:4_204:}

起个网名好难 发表于 2024-10-14 19:44

https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif

梦江南 发表于 2024-10-15 08:13

梦油 发表于 2024-10-14 17:39
缓缓而动的画面很好看啊。

早上问好，谢谢梦油老师支持。{:4_187:}

梦江南 发表于 2024-10-15 08:14

老谟深虑 发表于 2024-10-14 18:12
欣赏老师的音画，点赞！

早上好，谢谢老谟老师支持！{:4_187:}

梦江南 发表于 2024-10-15 08:15

红影 发表于 2024-10-14 18:35
漂亮的动态背景，灯光效果位置也很准确。
江南的这个做得好

早上好，谢谢影子支持鼓励！{:4_187:}

梦江南 发表于 2024-10-15 08:16

红影 发表于 2024-10-14 18:36
这个灯光貌似用圆更好呢，不需要用椭圆啊

灯光的椭圆是黑黑老师设置好的，不敢造次。怕弄不好。

梦江南 发表于 2024-10-15 08:17

起个网名好难 发表于 2024-10-14 19:44


早上好，谢谢老师支持！{:4_187:}

梦油 发表于 2024-10-15 17:11

梦江南 发表于 2024-10-15 08:13
早上问好，谢谢梦油老师支持。

梦江南朋友别客气。

梦江南 发表于 2024-10-15 17:16

梦油 发表于 2024-10-15 17:11
梦江南朋友别客气。

不是客气，习惯了。

梦油 发表于 2024-10-15 17:19

梦江南 发表于 2024-10-15 17:16
不是客气，习惯了。

你是一位很具修养的朋友，认识你好高兴。

红影 发表于 2024-10-16 21:25

梦江南 发表于 2024-10-15 08:15
早上好，谢谢影子支持鼓励！

早上外出了，回复迟了{:4_173:}

红影 发表于 2024-10-16 21:26

梦江南 发表于 2024-10-15 08:16
灯光的椭圆是黑黑老师设置好的，不敢造次。怕弄不好。

这个可以根据背景修改的呢{:4_173:}

梦江南 发表于 2024-10-17 09:47

梦油 发表于 2024-10-15 17:19
你是一位很具修养的朋友，认识你好高兴。

老师是一位学识渊博的人，认识您也很幸运。

梦江南 发表于 2024-10-17 09:48

红影 发表于 2024-10-16 21:26
这个可以根据背景修改的呢

怕给时钟弄得不像样了。{:4_201:}

梦江南 发表于 2024-10-17 09:50

红影 发表于 2024-10-16 21:25
早上外出了，回复迟了

您很忙，没事的。{:4_187:}

梦油 发表于 2024-10-17 13:41

梦江南 发表于 2024-10-17 09:47
老师是一位学识渊博的人，认识您也很幸运。

呵呵，你高抬我啦。
页: [1] 2
查看完整版本: 学习黑黑老师的647号宇宙 代码