647号宇宙

马黑黑 发表于 2024-10-13 08:13

马黑黑 发表于 2024-10-13 08:14

<h2>代码</h2>
<div class="hE"><pre>
<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=414611131" 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://638183.freep.cn/638183/t24/4/room.jpg"/>
<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="-314" y="-228" href="#light" />
<use x="-95" y="-148" href="#light" />
<use x="46" y="-145" href="#light" />
<use x="150" y="-169" href="#light" />
<use x="318" y="-212" 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>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-10-13 08:19

一室一屋谓之宇，一生一世谓之宙。

音乐源自刘欣慈先生《三体3：死神永生》。

红影发表于 2024-10-13 09:16

这个又是个新的操控方式呢，让房间从下方滑动上来，然后灯光开始闪烁，一切都是那么刚刚好{:4_199:}

红影发表于 2024-10-13 09:17

灯的位置选择是个细致的活计，让一个个次序进行也是个精准控制的过程。
太赞了{:4_199:}

红影发表于 2024-10-13 09:19

马黑黑发表于 2024-10-13 08:19
一室一屋谓之宇，一生一世谓之宙。

音乐源自刘欣慈先生《三体3：死神永生》。

这音乐好听，关于宇宙两字的解也特别奇妙。令人心驰神往{:4_187:}

花飞飞 发表于 2024-10-13 10:15

好创意，好设计，白老师金点子多，且出其不意。。{:4_173:}

马黑黑 发表于 2024-10-13 10:22

红影发表于 2024-10-13 09:17
灯的位置选择是个细致的活计，让一个个次序进行也是个精准控制的过程。
太赞了

像素尺用上

马黑黑 发表于 2024-10-13 10:22

红影发表于 2024-10-13 09:19
这音乐好听，关于宇宙两字的解也特别奇妙。令人心驰神往

宇宙有大小，对摸鱼者而言，小宇宙合适

马黑黑 发表于 2024-10-13 10:23

红影发表于 2024-10-13 09:16
这个又是个新的操控方式呢，让房间从下方滑动上来，然后灯光开始闪烁，一切都是那么刚刚好

一切都可以设计

马黑黑 发表于 2024-10-13 10:23

花飞飞发表于 2024-10-13 10:15
好创意，好设计，白老师金点子多，且出其不意。。

谬赞谬赞

朵拉发表于 2024-10-13 10:26

叹为观止，点赞{:4_178:}

红影发表于 2024-10-13 10:45

马黑黑发表于 2024-10-13 10:22
像素尺用上

即使用上，也是的细致的调整工作呢{:4_190:}

红影发表于 2024-10-13 10:46

马黑黑发表于 2024-10-13 10:22
宇宙有大小，对摸鱼者而言，小宇宙合适

古人云，人体就是小宇宙。
不过黑黑这里说的，应该是上面两句里的后一句：宙

红影发表于 2024-10-13 10:47

马黑黑发表于 2024-10-13 10:23
一切都可以设计

这个帖子有位置上的控制，也有时间上的控制，一切都是那么刚刚好。
尤其时间上的控制，这个太棒了{:4_199:}

马黑黑 发表于 2024-10-13 11:53

红影发表于 2024-10-13 10:47
这个帖子有位置上的控制，也有时间上的控制，一切都是那么刚刚好。
尤其时间上的控制，这个太棒了{:4_19 ...

设计是人为的，就是说，是人就可以设计出来

马黑黑 发表于 2024-10-13 11:54

红影发表于 2024-10-13 10:46
古人云，人体就是小宇宙。
不过黑黑这里说的，应该是上面两句里的后一句：宙

{:4_203:}

马黑黑 发表于 2024-10-13 11:57

红影发表于 2024-10-13 10:45
即使用上，也是的细致的调整工作呢
量好了就行。应根据 viewBox 的设定来量：我这个视窗设计，一切就以中心为基准，如果量最左上的灯位，把像素尺的 0 对准灯位中心，将鼠标指针移到帖子父元素中心点，像素尺上就有了水平方向的坐标值，然后左键单击像素尺让它变成垂直指向，以同样的方法量垂直方向的坐标值。

醉美水芙蓉 发表于 2024-10-13 14:19

红影发表于 2024-10-13 16:01

马黑黑发表于 2024-10-13 11:53
设计是人为的，就是说，是人就可以设计出来

这个也要熟悉代码的人才能设计出来呢，哦，我说得不对，是才能实现呢{:4_187:}

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

647号宇宙