源码小屋

凡哥

花简静 发表于 2024-10-1 15:43
查完了。打开新世界新大门，往门缝里瞅了几眼。。有优势，也很神奇~~

是的吧

凡哥

花简静 发表于 2024-10-1 15:39
小播越来越先进，得学会先找说明来看。。不然懵圈圈。。

看看就懂

凡哥

花简静 发表于 2024-10-1 15:30
helight代码生成器这个有关吗？看老师今天有更新了这个工具。。

这个，修改过之后渲染速度很快，但是在千山水土不服

凡哥

2024年10月2日 星期三

Illusion

<style>
	#tz {
		margin: 30px 0 30px calc(50% - 730px);
		width: 1280px;
		height: 800px;
		background: url('https://638183.freep.cn/638183/t24/webp2/Illusion.webp') no-repeat center/cover;
		box-shadow: 0 0 6px rgba(0,0,0,.5);
		z-index: 1;
		position: relative;
	}
	#vid {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		-webkit-mask: radial-gradient(tan, transparent 60%, transparent);
	}
	#player {
		position: absolute;
		left: calc(50% - 100px);
		bottom: 10px;
		cursor: pointer;
	}
	.rect {
		fill: none;
		stroke: url(#lGd);
		stroke-width: 6;
		stroke-dasharray: 6;
		transform-origin: 50%;
		animation-delay: 0s;
		animation: change 8s linear infinite var(--state);
	}
	.rect:nth-child(even) { animation-delay: -1s; }
	@keyframes change {
		to { transform: rotate(360deg); stroke-dashoffset: 300; }
	}
</style>

<div id="tz">
	<video id="vid" src="https://img.tukuppt.com/video_show/2419216/00/01/99/5b5030b7d3f01.mp4" autoplay loop muted></video>
	<svg id="player" width="200" height="200">
		<defs>
			<linearGradient id="lGd" x1="0" y1="0" x2="0" y2="1">
				<stop offset="0%" stop-color="yellow" />
				<stop offset="25%" stop-color="green" />
				<stop offset="50%" stop-color="white" />
				<stop offset="75%" stop-color="green" />
				<stop offset="100%" stop-color="yellow" />
			</linearGradient>
		</defs>
		<rect class="rect" x="5%" y="5%" width="90%" height="90%" rx="50%"/>
		<rect class="rect" x="20%" y="20%" width="60%" height="60%"/>
		<rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
		<rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
		<rect class="rect" x="40%" y="40%" width="20%" height="20%"/>
		<rect class="rect" x="40%" y="40%" width="20%" height="20%"/>
	</svg>
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1348252954" autoplay loop></audio>
</div>

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

花简静

凡哥 发表于 2024-10-2 12:01
还行

静的还好，动态的就很高级

花简静

凡哥 发表于 2024-10-2 12:01
是的吧

眼花缭乱呗

花简静

凡哥 发表于 2024-10-2 12:02
看看就懂

函数看看就只是看看，要懂可真难

花简静

凡哥 发表于 2024-10-2 12:03
这个，修改过之后渲染速度很快，但是在千山水土不服

小白是懵着用的，差别老师才清楚。。

花简静

凡哥 发表于 2024-10-2 12:07
2024年10月2日 星期三
Illusion

小播颜值高还友好，JS计算的不多

凡哥

花简静 发表于 2024-10-2 16:21
小播颜值高还友好，JS计算的不多

纯手写的，JS没有参与写svg