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=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>

马黑黑

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

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

红影

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

红影

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

红影

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

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

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

花飞飞

好创意，好设计，白老师金点子多，且出其不意。。

马黑黑

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

像素尺用上

马黑黑

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

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

马黑黑

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

一切都可以设计

马黑黑

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

谬赞谬赞

朵拉

叹为观止，点赞

红影

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

即使用上，也是的细致的调整工作呢

红影

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

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

红影

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

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

马黑黑

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

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

马黑黑

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

马黑黑

红影 发表于 2024-10-13 10:45
即使用上，也是的细致的调整工作呢

量好了就行。应根据 viewBox 的设定来量：我这个视窗设计，一切就以中心为基准，如果量最左上的灯位，把像素尺的 0 对准灯位中心，将鼠标指针移到帖子父元素中心点，像素尺上就有了水平方向的坐标值，然后左键单击像素尺让它变成垂直指向，以同样的方法量垂直方向的坐标值。

红影

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

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