源码小屋

凡哥

花简静 发表于 2024-9-29 20:56
这是老师站里那一版。。创新复杂版。
第一次看到URL和IMG不是图片地址，而是代码当场绘制的。。。 ...

有空查一查图片变 base64 代码

凡哥

2024年9月30日 星期一

茉

<style>
#dbox {
	margin: 30px auto;
	width: 1024px;
	height: 640px;
	background: url('https://638183.freep.cn/638183/t24/4/mo.jpg') no-repeat center/cover;
	box-shadow: 4px 4px 16px #00000080;

	position: relative;
}
#player {
	position: absolute;
	width: 200px;
	height: 200px;
	left: calc(50% - 100px);
	top: calc(50% - 150px);
	cursor: pointer;
	display: grid;
	place-items: center;
	filter: drop-shadow(1px 1px 0 #000);
	animation: rot linear 10s infinite var(--state);
}
#player::before {
	position: absolute;
	content: '';
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: plum;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="dbox">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1387600520" autoplay loop></audio>
	<svg id="bsvg" width="1024" height="640">
		<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="snow" stroke-width="8" stroke-dasharray="8 4">
			<animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
		</rect>
	</svg>
	<div id="player"></div>
</div>

<script>
mState = () => {
	dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
	player.title = aud.paused ? '点击播放' : '点击暂停';
}
mkParticles = (circles, columns, target) => {
	let size = Math.floor(target.clientWidth / 2 / circles - 10);
	for(let i = 0; i < circles; i ++) {
		let distance = i * (size + 5) + size + 10;
		for(let k = 0; k < columns; k ++) {
			let angle =  360 / columns * k;
			let span = document.createElement('span');
			span.style.cssText += `
				position: absolute;
				width: ${size}px;
				height: ${size}px;
				background: #${Math.random().toString(16).substring(2,8)};
				border-radius: 100% 80%;
				transform: rotate(${angle}deg) translate(${distance}px);
			`;
			target.appendChild(span);
		}
	}
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mkParticles(4,9,player);
</script>

凡哥

本页起，代码加行号和着色采用了新的实现机制，渲染速度更快。

《茉》的播放器：50~68行是 mkParticles(圈数, 列数, 父元素) 函数，用于生成粒子并对粒子进行布局。71行调用函数，生成4圈9列的粒子，粒子加载到 id="player" 的元素。粒子的父元素请按CSS代码中 #player 选择器那样，宽高一致、令子元素绝对居中（18~19行）。父元素的宽高和粒子圈数最终决定粒子的大小尺寸。粒子的形状和颜色请修改函数第62、61行代码。

凡哥

2024年10月1日 星期二

Entropy

<style>
#tz {
	margin: 20px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 600px;
	background: url('https://638183.freep.cn/638183/t24/webp2/entropy.webp') no-repeat center/cover;
	box-shadow: 3px 3px 6px rgba(0,0,0,.6);
	overflow: hidden;
	z-index: 1;
	position: relative;
}
#vid {
	position: absolute;
	width: 100%;
	height: calc(100% + 60px);
	top: -60px;
	object-fit: cover;
	mix-blend-mode: screen;
	pointer-events: none;
}
#player {
	position: absolute;
	left: calc(50% - 100px);
	top: calc(50% - 85px);
	cursor: pointer;
	animation: rot 10s linear infinite var(--state);
}
use:nth-child(odd) { --bg: snow; }
use:nth-child(even) { --bg: palevioletred; }
@keyframes rot {
	to { transform: rotate(360deg); }
}
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29751208" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a31a0b980d.mp4" autoplay loop muted></video>
	<svg id="player" width="200" height="200" viewBox="0 0 200 200">
		<title id="tt">播放/暂停</title>
		<defs>
			<g id="p1" fill="none" stroke="var(--bg)" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 6">
				<path id="p1" d="M10 100 Q50 270,100 100 T 190 100">
					<animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
				</path>
			</g>
		</defs>
		<use href="#p1" transform="rotate(0 100 100)"></use>
		<use href="#p1" transform="rotate(30 100 100)"></use>
		<use href="#p1" transform="rotate(60 100 100)"></use>
		<use href="#p1" transform="rotate(90 100 100)"></use>
		<use href="#p1" transform="rotate(120 100 100)"></use>
		<use href="#p1" transform="rotate(150 100 100)"></use>
	</svg>
</div>

<script>
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? (player.pauseAnimations(), vid.pause()) : (player.unpauseAnimations(), vid.play());
	tt.textContent = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

花简静

凡哥 发表于 2024-9-30 07:35
有空查一查图片变 base64 代码

原来有相关专门的介绍，不知道看得懂不。。

花简静

凡哥 发表于 2024-9-30 07:52
本页起，代码加行号和着色采用了新的实现机制，渲染速度更快。

《茉》的播放器：50~68行是 mkParticles(圈 ...

helight代码生成器这个有关吗？看老师今天有更新了这个工具。。

花简静

凡哥 发表于 2024-9-30 07:52
本页起，代码加行号和着色采用了新的实现机制，渲染速度更快。

《茉》的播放器：50~68行是 mkParticles(圈 ...

小播越来越先进，得学会先找说明来看。。不然懵圈圈。。

花简静

凡哥 发表于 2024-9-30 07:35
有空查一查图片变 base64 代码

查完了。打开新世界新大门，往门缝里瞅了几眼。。有优势，也很神奇~~

花简静

凡哥 发表于 2024-10-1 08:25
本帖最后由 凡哥 于 2024-10-1 12:14 编辑 2024年10月1日 星期二
Entropy

这个贴子尽显线条之美

凡哥

花简静 发表于 2024-10-1 15:46
这个贴子尽显线条之美

还行