源码小屋

凡哥

2024年9月14日 星期六

三角形的梦想

<style>
	#tz { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/sjx.webp') center/cover; box-shadow: 3px 3px 6px #00000080; z-index: 1; display: grid; place-items: center; position: relative; }
	#player { position: absolute; border-radius: 50%; animation: rot 8s linear infinite var(--state); cursor: pointer; filter: drop-shadow(2px 2px 4px #000) drop-shadow(0 0 2px lightblue); }
	@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1399118450" autoplay loop></audio>
	<img id="player" src="https://638183.freep.cn/638183/web/svg/sjx.svg" width="300" height="300" alt="" />
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
	papa: '#tz',
	scale: [player],
	css: 'bottom: 20px; --bg: transparent; --color: white',
});
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	player.title = aud.psuded ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

凡哥

花简静 发表于 2024-9-14 19:31
明明是被ko了。。

又不是拳击比赛

花简静

凡哥 发表于 2024-9-14 19:39
又不是拳击比赛

对我来说差不多，直接败给它了

凡哥

花简静 发表于 2024-9-14 19:42
对我来说差不多，直接败给它了

倒也痛快

花简静

凡哥 发表于 2024-9-14 19:43
倒也痛快

瞄一眼不懂得太多，力量悬殊太大，只能望而兴叹

凡哥

花简静 发表于 2024-9-14 19:52
瞄一眼不懂得太多，力量悬殊太大，只能望而兴叹

凡哥

2024年9月16日 星期一

坠入亚特兰蒂斯

<style>
#mydiv { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/web/svg/balls1.svg') repeat-x 0 5% / 25% 25%, url('https://638183.freep.cn/638183/t24/webp2/ytlds.webp') center/cover; z-index: 1; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; animation: hue-rot 10s linear infinite alternate var(--state); position: relative; }
#player { position: absolute; width: 200px; height: 200px; border-radius: 50%; top: 20px; filter: drop-shadow(-400px 200px 0 silver) drop-shadow(400px 200px 0 silver); cursor: pointer; transition: .5s; }
@keyframes hue-rot { to { filter: hue-rotate(360deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2625047869" autoplay loop></audio>
	<img id="player" src="https://638183.freep.cn/638183/web/svg/rotc.svg" alt="" title="播放/暂停" />
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', scale: [player], css: 'bottom: 20px; --fsBg: #eeeeee90; --color: #336699;'});

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

凡哥

2024年9月17日 星期二

Ancient Voices

<style>
#mydiv { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/acvoices.webp') no-repeat center/cover; box-shadow: 3px 3px 6px #333; z-index: 1; display: grid; place-items: center; position: relative; --rad: 80px; }
#player { position: absolute; left: 100px; top: 60px; width: 100px; height: 100px; background: white; border-radius: 50%; box-shadow: inset 0 0 50px #7cb6a0a0, 0 0 var(--rad) white; cursor: pointer; transition: 0.2s; }
#psvg { position: absolute; width: 500px; height: 500px; filter: drop-shadow(100px 0 10px white) drop-shadow(-100px 0 6px white); transition: 0.75s;  }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=23969998" autoplay loop></audio>
	<img id="psvg" alt="" src="https://638183.freep.cn/638183/web/svg/balls2.svg" />
	<div id="player" title="播放/暂停"></div>	
</div>

<script>
aud.ontimeupdate = () => mydiv.style.setProperty('--rad', Math.random() * 100 + 50 + 'px');
player.onclick = () => aud.paused ? (aud.play(), psvg.style.opacity="1") : (aud.pause(), psvg.style.opacity="0");
</script>

花简静

凡哥 发表于 2024-9-16 07:47

花简静

这两个贴子音乐都神秘空灵，耐听