源码小屋

花简静

凡哥 发表于 2024-10-8 12:04
无理科就是相当于文科吧

我也不是文科，我是文盲科

凡哥

2024年10月9日 星期三

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>

凡哥

花简静 发表于 2024-10-8 19:51
我也不是文科，我是文盲科

文盲科简称文科，况且，高于普通的文科

花简静

凡哥 发表于 2024-10-9 07:54
文盲科简称文科，况且，高于普通的文科

文科就是文盲科，前半句我看到了。。不能高，恐高来着

凡哥

花简静 发表于 2024-10-9 19:41
文科就是文盲科，前半句我看到了。。不能高，恐高来着

越高越好

花简静

凡哥 发表于 2024-10-10 19:56
越高越好

不怕高的可以考虑去蹦个极我怕

凡哥

花简静 发表于 2024-10-10 20:21
不怕高的可以考虑去蹦个极我怕

蹦极很刺激的

花简静

凡哥 发表于 2024-10-10 23:10
蹦极很刺激的

知道，看别人蹦都得闭着眼。。

凡哥

花简静 发表于 2024-10-11 20:26
知道，看别人蹦都得闭着眼。。

有点吓人

凡哥

2024年10月12日 星期六

和光同尘

<style>
	#tz { margin: 20px auto; width: 600px; height: 900px; border: 1px solid gray; background: url('https://638183.freep.cn/638183/t24/4/hgti.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 8px; z-index: 1; position: relative; }
	#player, #ssvg { position: absolute; }
	#player { width: 200px; height: 200px; left: calc(50% - 100px); top: 20px; cursor: pointer; animation: rot 8s infinite linear var(--state); }
	.down { animation: down var(--dur) var(--delay) linear infinite var(--state), flash 1s var(--delay) infinite alternate linear var(--state); }
	@keyframes down { to { transform: rotate(-10deg) translate(0, 1000px); } }
	@keyframes flash { to { opacity: 0; } }
	@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35729475" autoplay loop></audio>
	<svg id="ssvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
		<symbol id="cc" width="10" height="10" viewBox="0 0 10 10">
			<circle cx="5" cy="5" r="5"></circlie>
		</symbol>
		<defs>
			<g><animate attributeName="y" to="400" dur="10s" repeatCount="indefinite"></animate></g>
		</defs>
	</svg>
	<img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" />
</div>

<script>
mkBalls = (num) => {
	var ww = ssvg.clientWidth,
		str = '',
		colors = ['orange', 'tan', 'yellow', 'gold', 'red', 'plum', 'pink', 'purple'];
	Array(num).fill(0).forEach((a,b) => {
		var x = Math.round(Math.random() * (ww - 20)),
			size = Math.floor(Math.random() * 6) + 6,
			fill = colors[Math.floor(Math.random() * colors.length)],
			dur = Math.floor(10 * Math.random() + 10),
			delay = -1 * Math.round(Math.random() * 15);
		str += `<use x="${x}" y="-20" width="${size}" height="${size}" fill="${fill}" href="#cc" class="down" style="--dur:${dur}s;--delay:${delay}s"/>`;
	});
	return str;
};

ssvg.innerHTML += mkBalls(50);

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