Illusion

马黑黑

马黑黑

帖子代码

<style>
	#tz {
		margin: 30px 0 30px calc(50% - 721px);
		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>

红影

想着黑黑的这个帖子应该是前面那个svg图案的具体应用，果真如此呢

红影

颜色重新调过了，用在帖子里有星星点点的效果，好美

红影

这个除了旋转都动画，还增加了stroke-dashoffset:的动画，比讲解帖子里的效果更漂亮。
而且能使用--state就达到一键暂停，太厉害了

花飞飞

矮油，这贴跑油坊串门来了

花飞飞

音乐好听，小播从技术到颜值都闪亮高级，贴子动态梦幻浪漫，完美之贴。。

梦江南

问好老师，辛苦了！

马黑黑

梦江南 发表于 2024-10-2 17:47
问好老师，辛苦了！