源码小屋

凡哥

花简静 发表于 2024-7-31 22:25
艾玛，小李家的脚丫子这事儿你也门清儿。。
老师博学还杂学还冷门学

果酱果酱，就知道些不三不四的

花简静

凡哥 发表于 2024-7-31 22:58
果酱果酱，就知道些不三不四的

就是天文地理无所不知呗。啥也瞒不过嫩法眼

凡哥

2024年8月1日 星期四

另一个自己

<style>
@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#tz {
	--ox: 90px;
	--lrc-top: 90%;
	--lrc-bg: radial-gradient(silver,gray,darkgray) 50%/90px 60px;
	--lrc-shadow ：rgba(0, 0, 0, .7);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/4/self0.jpg') no-repeat center/cover;
	box-shadow: 2px 2px 6px gray;
	position: relative;
}
#player {
	--size: 200px;
	left: 30%;
	top: 50px;
}
.yz {
	position: absolute;
	width: 500px;
	height: 100%;
	background: url('https://638183.freep.cn/638183/t24/4/self1.jpg') no-repeat center/cover;
	-webkit-mask: linear-gradient(to right, red, transparent);
}
.yz:nth-of-type(2) {
	right: 0;
	filter: opacity(.35) sepia(80%);
	transform: rotateY(180deg);
}
.vid { height: calc(100% + 60px); }
</style>

<div id="tz" class="tz" data-lrc="HUACHAO">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=41640630" autoplay loop></audio>
	<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67a9a991900.mp4" autoplay loop muted></video>
	<div class="yz"></div>
	<div class="yz"></div>
	<img id="player" class="player" title="播放/暂停" src="https://638183.freep.cn/638183/small/ytji.png" alt="" />
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `[00:00:12]大粉乐队 - 另一个自己\n[00:20.17]想象在某天 星河坍塌\n[00:25.17]在某天 海水枯干\n[00:29.20]想象在某天 你爬上悬崖\n[00:34.00]这一天 你就像个娃\n[00:38.53]就算某天 时光倒转\n[00:43.50]在某天 毁灭都不再可怕\n[00:47.35]想象在某天 我感觉有点麻\n[00:52.27]这一天 我会让你死在我的怀\n[01:02.87]有个自己在慢慢中学会装聋和作哑\n[01:11.80]还有另一种自己在想象狂热中 把世界都颠倒\n[01:24.04]就算某天 钟不再摆\n[01:28.78]在某天 秒针都不再滴答\n[01:33.10]想象在某天 我感觉有点扎\n[01:37.98]这一天 我会亲手把你埋葬\n[02:11.16]有个自己在慢慢中学会装聋和作哑\n[02:20.23]还有另一种自己在想象狂热中 把世界都颠倒`;
</script>

月落空庭

看看神奇的源码

凡哥

月落空庭 发表于 2024-8-2 18:54
看看神奇的源码

嗯，来来去去就是一些单词

花简静

凡哥 发表于 2024-8-2 19:48
嗯，来来去去就是一些单词

单词在这里都出神入化了

凡哥

花简静 发表于 2024-8-2 21:00
单词在这里都出神入化了

单词找到了自己的位置

花简静

凡哥 发表于 2024-8-3 07:43
单词找到了自己的位置

完美组合在一起。主要是因为有神手

凡哥

2024年8月3日 星期六

海滩

<style>
#mydiv {
	margin: 30px 0 30px calc(50% - 602px);
	width: 1024px;
	height: 574px;
	background: url('https://638183.freep.cn/638183/t24/webp/seas.webp') no-repeat center/cover;
	display: grid;
	place-items: center;
	pointer-events: none;
	box-shadow: 0 0 6px rgba(0,0,0,.6);
	z-index: 1;
	position: relative;
	--conic: 2%;
}
#mydiv::after {
	position: absolute;
	content: '';
	top: 20px;
	width: 120px;
	height: 120px;
	background: repeating-conic-gradient(transparent, green, transparent var(--conic));
	-webkit-mask: url('https://638183.freep.cn/638183/small/4yc.png') no-repeat center/cover;
	pointer-events: auto;
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
	transform: rotate(var(--deg));
}
#mydiv:hover::after { --conic: 4%; }
#vid {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask: linear-gradient(to bottom left, transparent, transparent, red);
}
@keyframes rot {
	to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2014710195" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/96/5b4f838b05080.mp4" autoplay loop muted></video>
</div>

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

凡哥

2024年8月4日 星期日

T台人生

<style>
#mydiv {
	margin: 230px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 768px;
	background: url('https://638183.freep.cn/638183/t24/4/tt1.jpg') no-repeat center/cover;
	box-shadow: 0 0 6px rgba(0,0,0,.6);
	user-select: none;
	z-index: 1;
	position: relative;
	--pos: 0.1%;
}
#mydiv::after {
	position: absolute;
	content: '';
	inset: 0;
	background: url('https://638183.freep.cn/638183/t24/4/tt2.jpg') no-repeat center/cover;
	-webkit-mask: linear-gradient(to top right, red var(--pos), transparent calc(var(--pos) + 5%), transparent);
}
#player {
	position: absolute;
	left: calc(50% - 61px);
	top: -61px;
	cursor: pointer;
	transition: 1.2s;
	z-index: 2;
	animation: rot 6s linear infinite var(--state);
}
#player:hover { filter: drop-shadow(0 0 50px fuchsia); }
#vid {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask: linear-gradient(to top right, red 90%, transparent 91%, transparent 0);
	mix-blend-mode: screen;
}
@keyframes rot {
	to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1340764398" autoplay loop></audio>
	<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/16/47/5ea1bb1bbf5ad.mp4" autoplay loop muted></video>
	<img id="player" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/t23/btn/plum.png" />
</div>

<script>
var zStep = 0.2, zVal = 0, zDo = false;
zMask = () => {
	zVal += zStep;
	if(zVal > 100 || zVal < -5) zStep = -zStep;
	setTimeout( () => {
		mydiv.style.setProperty('--pos', zVal + '%');
		if(zDo) zMask();
	}, 20);
};
mState = () => {
	mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
	player.title = '点击' + ['暂停','播放'][+aud.paused];
	aud.paused ? vid.pause() : vid.play();
	zDo = aud.paused;
};
mydiv.onmouseover = (e) => {
	if(e.target.id.toLowerCase() !== 'mydiv' || aud.paused) return;
	zDo = true;
	zMask();
};
mydiv.onmouseout = () => zDo = false;
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>