Earth

马黑黑

马黑黑

帖子代码

<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/earth.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 0 0 6px #111; z-index: 1; position: relative; }
#player { position: absolute; cursor: pointer; fill: none; stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;  }
li-zi { position: absolute; width: 10px; height: 6px; offset-path: path('M100 100Q200 800,1024 360'); offset-distance: 0%; background: green; animation: moving 10s linear infinite var(--state); }
@keyframes moving {	to { offset-distance: 100%; } }
</style>

<div id="tz">
	<!-- Earth -->
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=18649290" autoplay loop></audio>
	<svg id="player" width="200" height="200" viewBox="-100 -100 200 200">
		<ellipse cx="0" cy="0" rx="80" ry="60" fill="none" stroke-width="4" stroke="green" stroke-dasharray="4 8"></ellipse>
		<polygon points="0 -50, 50 50, -50 50" pathLength="1">
			<animate id="b1" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="0s;e1.end+.5s" fill="freeze"/>
			<animate id="e1" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e2.end" fill="freeze"/>
		</polygon>
		<circle cx="0" cy="0" r="50" pathLength="1">
			<animate id="b2" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b1.end" fill="freeze"/>
			<animate id="e2" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e3.end" fill="freeze"/>
		</circle>
		<rect x="-50" y="-50" width="100" height="100" pathLength="1" transform="rotate(45)">
			<animate id="b3" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b2.end" fill="freeze"/>
			<animate id="e3" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="b3.end+1s" fill="freeze"/>
		</rect>
	</svg>
</div>

<script>
Array(total=40).fill(0).forEach((lz,key) => {
	lz = document.createElement('li-zi');
	lz.style.cssText += `animation-delay: -${10 / total * key}s`;
	if(key % 2 === 0) lz.style.offsetPath = `path('M100 100Q800 -150,1024 360')`;
	tz.appendChild(lz);
	console.log(lz);
});

mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑

本帖：

（一）小播使用内嵌SVG代码制作，虚线框椭圆里的三角形、圆、转45度的矩形依次反复描边、擦除；
（二）粒子用HTML元素做成，做相抵路径运动，分两个路径，一个走上，一个走下，入、出处两线交汇。

梦江南

老师辛苦了！

冬天的雨

马老师好，背景黑色有点神秘感，加上这个效果特别有吸引力

冬天的雨

仔细欣赏，感觉现在的制作有点难的，冬雨好像不会做了

冬天的雨

地球中间的金黄色好像是流出了钢铁洪流，钢水的奔涌而下，

冬天的雨

代码粒子效果还可以这样做，马老师太厉害了

马黑黑

冬天的雨 发表于 2024-9-24 19:41
仔细欣赏，感觉现在的制作有点难的，冬雨好像不会做了

马黑黑

冬天的雨 发表于 2024-9-24 19:41
仔细欣赏，感觉现在的制作有点难的，冬雨好像不会做了

用了svg，这个有点繁琐

花飞飞

马黑黑 发表于 2024-9-24 12:43
本帖：

（一）小播使用内嵌SVG代码制作，虚线框椭圆里的三角形、圆、转45度的矩形依次反复描边、擦除；
...

这个小播好新啊。。
stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
这么长一串的stroke:参数，是SVG专用的吧。以前没见过。。有些12行又出现了一次。。。。

花飞飞

马黑黑 发表于 2024-9-24 12:43
本帖：

（一）小播使用内嵌SVG代码制作，虚线框椭圆里的三角形、圆、转45度的矩形依次反复描边、擦除；
...

粒子路径第一次看代码时大概知道了。。完全不明白的是虚线。。。
又仔细看过，小绿点是宽10高6，现在明白了，这是一个粒子的大小。。
贴子里这样的粒子共设了40个，
lz.style.cssText += `animation-delay: -${10 / total * key}s`;
这句是控制粒子延迟出现的时间。。这样，粒子就跟排队一样顺着设好的路径跑了。。

花飞飞

感觉又有无限可能了，因为路径它就有无限可能。
这创意，真是拍案叫绝。。

马黑黑

花飞飞 发表于 2024-9-24 20:39
感觉又有无限可能了，因为路径它就有无限可能。
这创意，真是拍案叫绝。。

就两个简单的Q路径

马黑黑

花飞飞 发表于 2024-9-24 20:37
粒子路径第一次看代码时大概知道了。。完全不明白的是虚线。。。
又仔细看过，小绿点是宽10高6，现在明 ...

提前的延时。注意看负数符号。当使用负数值的 animation-delay，表示提前运行多少时间，这样，页面一打开，粒子就在路上了

马黑黑

花飞飞 发表于 2024-9-24 20:29
这个小播好新啊。。
stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; st ...

12行是椭圆绘制，它静止不动

红影

这个帖子好神奇，那小播还能这样设计，三个图形依次展开和收起，就是黑黑说的小猫咬尾巴的自己触发把，还做了个不动的椭圆做参照。这设计的构思太绝妙了。

马黑黑

红影 发表于 2024-9-24 20:54
这个帖子好神奇，那小播还能这样设计，三个图形依次展开和收起，就是黑黑说的小猫咬尾巴的自己触发把，还做 ...

去熟悉一下svg，大致都可以做出来的

红影

对stroke-dasharray: 1; stroke-dashoffset: 1不够熟悉，原来它们还能操控动画呢。
粒子的那个也很神奇，使用js就可以让它们沿着不同路径分流了呢