Mars

马黑黑

马黑黑

帖子代码

 <style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/mars.jpg') no-repeat center/105% 105%; box-shadow: 4px 4px 8px #00000080; z-index: 1; display: grid; place-items: center; animation: chgsize 5s linear alternate infinite var(--state); position: relative; }
#player { position: absolute; filter: drop-shadow(0 0 2px black); }
#minHand, #secHand { animation: rot var(--tt) linear infinite var(--state); }
#line { transition: .5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes chgsize { to { background-size: 100% 100%; } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2095456478" autoplay loop></audio>
	<svg id="player" width="200" height="200" viewBox="-50 -50 100 100">
		<title id="ctt">play</title>
		<defs>
			<linearGradient id="bg1" x1="0" x2="0.5" y1="0" y2="1">
				<stop offset="0%" stop-color="red"/>
				<stop offset="50%" stop-color="green"/>
				<stop offset="100%" stop-color="darkred"/>
			</linearGradient>
		</defs>
		<circle cx="0" cy="0" r="44" fill="none" stroke="url(#bg1)" stroke-width="6"/>
		<line id="minHand" x1="0" y1="0" x2="0" y2="-32" stroke="red" stroke-width="3" stroke-linecap="round"/>
		<line id="secHand" x1="0" y1="0" x2="0" y2="-38" stroke="orange" stroke-width="2" stroke-linecap="round"/>
		<circle cx="0" cy="0" r="6" fill="orange"/>
		<line id="line" x1="-5" y1="25" x2="5" y2="25" stroke="yellow"/>
	</svg>
</div>

<script>
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	ctt.textContent = aud.paused ? '点击播放' : '点击暂停';
}
aud.oncanplaythrough = () => {
	minHand.style.setProperty('--tt', `${aud.duration}s`);
	secHand.style.setProperty('--tt', `${aud.duration / 10}s`);
};
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => line.setAttribute('transform', `rotate(${Math.random() * 720})`);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦江南

老师早上好！辛苦了！

红影

这个奇妙，分针秒针相差十倍地转着，转玩一圈正好音乐播完。
还有根小黄线在其中穿梭，这根小黄线的看着更难，0到720间用0.5秒完成吧。
很奇妙的设计

红影

背景的放大缩小也很奇妙，呼应了svg制作的线性渐变圆圈和小指针们的行动。
黑黑的制作都是技术感满满

梦江南

红影 发表于 2024-10-9 09:37
背景的放大缩小也很奇妙，呼应了svg制作的线性渐变圆圈和小指针们的行动。
黑黑的制作都是技术感满满{:4_1 ...

您的眼货正好，背景图只是微微地在动，不注意的是看不出的。

小辣椒

有点像时钟效果了

马黑黑

小辣椒 发表于 2024-10-9 11:38
有点像时钟效果了

马黑黑

梦江南 发表于 2024-10-9 08:20
老师早上好！辛苦了！

马黑黑

红影 发表于 2024-10-9 09:35
这个奇妙，分针秒针相差十倍地转着，转玩一圈正好音乐播完。
还有根小黄线在其中穿梭，这根小黄线的看着更 ...

0.5秒是 transition 属性值，这个用来规定元素完成一个动作的总用时。svg元素使用了这个 transition 属性之后和HTML元素一样有效果，这是因为svg子元素可以被DOM管理

花飞飞

这个背景是星云，隐约的缩放让这朵云活了起来。。
跟巨大的天空之眼似的，十分特别~~
@keyframes chgsize { to { background-size: 100% 100%; } }
背景变到100，仔细看了一下，起始数据原来是105~~
所以背景变化不算太大。。

花飞飞

小播原来全是代码完成的模拟时钟~~
整个时钟线性渐变，红色，绿色，暗红色。。小播外圆填充了这个渐变色，宽度为6，
外星配色再次出现。。乐一个。。。老师是真的喜欢这个配色呀。。

花飞飞

两根针长度不同，宽度不同，颜色不同，速度有10倍差别。。。有较明显的区别~~
中间有个小圆做为按纽。。。橙色的。。
和圆一起完成表盘。。

花飞飞

还有一条小小线，跟条小黄鱼似的，绕着圈游 。。
不是匀速的，慢的时候像是在发呆，快的时候溜得飞快。
看了半天没找到小黄鱼为啥用这个节奏跑。。
井line { transition: .5s; }0.5秒，只有这一句就有这样的效果了？

红影

梦江南 发表于 2024-10-9 11:23
您的眼货正好，背景图只是微微地在动，不注意的是看不出的。

还是看得出的呢，很奇妙的

红影

马黑黑 发表于 2024-10-9 12:11
0.5秒是 transition 属性值，这个用来规定元素完成一个动作的总用时。svg元素使用了这个 transition 属性 ...

是啊，然后svg元素的设计是区间变数，结果让小黄线那么灵活

朵拉

炫丽的效果，学习下

马黑黑

花飞飞 发表于 2024-10-9 19:28
这个背景是星云，隐约的缩放让这朵云活了起来。。
跟巨大的天空之眼似的，十分特别~~
@keyframes chgsize ...

太大了看着炫目

马黑黑

朵拉 发表于 2024-10-9 20:43
炫丽的效果，学习下

马黑黑

红影 发表于 2024-10-9 20:37
是啊，然后svg元素的设计是区间变数，结果让小黄线那么灵活

它起点缀作用