源码小屋

花简静

凡哥 发表于 2024-9-11 19:22
888888888

噼里啪啦，鼓掌啊。。

凡哥

花简静 发表于 2024-9-11 19:25
噼里啪啦，鼓掌啊。。

是发大财的意思

凡哥

2024年9月12日 星期四

梦幻

<style>
#tz { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/3/1001.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/t24/webp2/hrxl.webp') no-repeat center/cover, radial-gradient(orange,lightgreen, white, plum); background-blend-mode: difference; border: thick groove gray; position: relative; --state: running; --scale: 1; }
#tz:fullscreen #hsvg { --scale: 1.8;}
#hsvg { position: absolute; left: calc(50% - 160px); top: calc(50% - 160px); border-radius: 50%; filter: drop-shadow(0 0 8px green); cursor: pointer; animation: rot 30s linear infinite var(--state); }
#hsvg:hover { --state: paused; }
@keyframes rot { from { transform: rotate(0deg) scale(var(--scale)); } to { transform: rotate(360deg) scale(var(--scale)); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369592" autoplay loop></audio>
	<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="plum" stroke-linecap="round"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#tz', css: 'bottom: 20px; left: 50%; --fsBg: #eeeeee90; --color: #336699;'});
drawPolygon = (total) => {
	var pathstr = '<defs>', usestr = '';
	Array(total).fill(0).forEach((id,idx) => {
		id = idx + 1;
		var bstr = idx === 0 ? '0s' : `p1.begin+${idx}s`;
		var color = '#' + Math.random().toString(16).substring(2,8) + '9d';
		pathstr += `
		<path id="r${id}" stroke="${color}">
			<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
			<animate attributeName="stroke-width" values="0;4;4;4;0" dur="12s" repeatCount="indefinite" begin="${bstr}"/>
		</path>`;
		Array(total).fill(0).forEach((u,k) => {
			u = k + 1;
			var angle = id % 2 === 0 ? 360 / total * k + 360 / total / 2 : 360 / total * k;
			usestr += `<use xlink:href="#r${id}" transform="rotate(${angle} 160 160)"/>`;
		});
	});
	pathstr += '</defs>';
	return pathstr + usestr;
};
hsvg.innerHTML = drawPolygon(12);
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
hsvg.onclick = (e) => aud.paused ? aud.play() : aud.pause();
</script>

花简静

凡哥 发表于 2024-9-11 23:42
是发大财的意思

人间至乐

凡哥

2024年9月13日 星期五

大河之舞

<style>
#mydiv { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 720px; background: url('https://img.shetu66.com/2023/08/09/1691549357221680.png') center/cover; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; position: relative; }
#svg1 { position: absolute; top: 56%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 4px black); transition: 1s; }
#svg1:hover { filter: hue-rotate(200deg) drop-shadow(0 0 4px black); }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369439" autoplay loop></audio>
	<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="6" stroke-dasharray="6 12 6"></svg>
</div>

<script>
var ww = mydiv.offsetWidth;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', css: 'bottom: 20px; --fsBg: #eeeeee90; --color: #336699;'});
var observer = new ResizeObserver((elms) => {
	var cr = elms[0].contentRect;
	svg1.style.transform = `scale(${cr.width / ww * 1.2})`;
});
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
drawCircles = (num) => {
	var circlecode = '', anicode = '';
	Array(num).fill(0).forEach((c,k) => {
		c = k + 1;
		var bstr = k > 0 ? `ani${k}.begin+${k * 3 / num}s` : '0s';
		var color = `#${Math.random().toString(16).substring(2,8)}a0`;
		circlecode += `<circle id="cc${c}" cx="100" cy="100" r="0" stroke="${color}" transform="rotate(${360 / num * k} 100 100)"></circle>`;
		anicode += `<animate xlink:href="#cc${c}" attributeName="r" values="0;90;0" dur="20s" repeatCount="indefinite" id="ani${c}" begin="${bstr}"></animate>`;
	});
	return circlecode + anicode;
};
svg1.innerHTML = drawCircles(10);
observer.observe(mydiv);
aud.onplaying = aud.onpause = () => aud.paused ? svg1.pauseAnimations() : svg1.unpauseAnimations();
svg1.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

花简静

凡哥 发表于 2024-9-13 08:01
2024年9月13日 星期五
大河之舞

这个代码有点复杂。。生词多些

凡哥

花简静 发表于 2024-9-13 20:13
这个代码有点复杂。。生词多些

字母还是26个滴

花简静

凡哥 发表于 2024-9-14 19:20
字母还是26个滴

拆开我可都认得

凡哥

花简静 发表于 2024-9-14 19:27
拆开我可都认得

那就OK了

花简静

凡哥 发表于 2024-9-14 19:29
那就OK了

明明是被ko了。。