源码小屋

花简静

凡哥 发表于 2024-8-9 20:25
一样重要

两手抓。。

凡哥

花简静 发表于 2024-8-9 21:10
两手抓。。

要得

花简静

凡哥 发表于 2024-8-9 21:59
要得

一手镜子，一手梳子

凡哥

花简静 发表于 2024-8-9 22:26
一手镜子，一手梳子

花简静

凡哥 发表于 2024-8-10 00:07

凡哥

2024年8月12日 星期一

Drift

<style>
#mydiv {
	margin: 30px 0 30px calc(50% - 602px);
	width: 1024px;
	height: 576px;
	background: tan;
	box-shadow: 3px 3px 8px gray;
	overflow: hidden;
	position: relative;
}
#mydiv::before {
	position:absolute;
	content: '';
	inset: 0;
	background: url('https://638183.freep.cn/638183/t24/4/drift.jpg') no-repeat center/cover;
	-webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);
	transition: .72s;
	--size: 3px;
}
#mydiv:hover::before { --size: 32px; transform: scale(115%) rotate(2deg); }
#player {
	--inset: gray;
	position: absolute;
	left: calc(50% - 60px);
	top: 40px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat center/cover;
	mix-blend-mode: multiply;
	box-shadow: inset 0 0 30px var(--inset);
	cursor: pointer;
	animation: rot 8s linear infinite var(--state);
}
#player:hover { --inset: plum; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1929364487" autoplay loop></audio>
	<div id="player" title="播放/暂停"></div>
</div>

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

花简静

凡哥 发表于 2024-8-12 07:54
2024年8月12日 星期一
Drift

图案设计精美，有动态更是漂亮

凡哥

2024年8月13日 星期二

时间挂满山林

<style>
#tz {
	margin: 220px 0 30px calc(50% - 730px);
	width: 1280px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t24/4/ujlb.jpg') no-repeat center/cover;
	box-shadow: 0 0 8px gray;
	overflow: hidden;
	z-index: 1;
	display: grid;
	place-items: center;
	position: relative;
}
#tz > video {
	position: absolute;
	width: 100%;
	height: calc(100% + 200px);
	object-fit: cover;
	mix-blend-mode: screen;
	pointer-events: none;
}
</style>

<div id="tz" class="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2113820733" autoplay loop></audio>
	<video src="https://img.tukuppt.com/video_show/2629112/00/02/07/5b50a5c0803ab.mp4" autoplay loop muted></video>
	<img src="https://638183.freep.cn/638183/t23/1/timestop.png" width="100px" alt="" style="position: absolute; bottom: 50px; opacity: .75;" />
</div>

<script>
let geci = `[00:00.00]时间挂满山林\n[00:00.947]我从山上走下\n[00:04.239]拾尽落在天边的朝霞\n[00:08.467]我将她们都藏进\n[00:11.928]昆仑崩塌前的夜\n[00:15.275]\n[00:16.025]我从山上走下\n[00:19.488]叠卷爱人不住的春夏\n[00:23.759]我将她们都藏进\n[00:27.063]望山起\n[00:28.466]你不归的芳华\n[00:30.423]\n[00:48.540]时间造我\n[00:52.307]璀璨与晶莹\n[00:56.149]我遂将时间挂满山林\n[01:02.805]\n[01:03.721]群山缭绕着我的衣裙\n[01:07.569]群山晕染着我的阴影\n[01:11.355]群山栽育了我的文明\n[01:14.807]与光阴\n[01:18.025]\n[01:18.942]群山回响着我的声音\n[01:22.769]群山刻满了我的寓意\n[01:26.603]群山消融我瘦弱身体\n[01:29.978]去充盈\n[01:32.264]这片阴影\n[01:33.826]\n[02:12.368]我从山上走下\n[02:16.154]叠卷爱人不住的春夏\n[02:19.986]我将她们都藏进\n[02:23.790]望山起\n[02:25.293]你不归的芳华\n[02:27.071]\n[02:27.515]还好天地间如此多荒野\n[02:31.101]生在万重山之间\n[02:35.151]我多想再见你一面\n[02:39.077]昆仑崩塌在眼前\n[02:41.533]\n[02:42.772]还好天地间如此多荒野\n[02:46.106]不怒登我者之卑劣\n[02:50.393]使我爱人可覆于此山间\n[02:54.318]终成川河流过我身前\n[02:58.101]\n[03:13.333]作词：蒲羽\n[03:15.236]作曲：蒲羽\n[03:17.067]编曲：蒲羽\n[03:19.014]缩混：王天培\n[03:20.962]制作：蒲羽\n[03:22.788]吉他：王子石\n[03:24.739]鼓手：江江\n[03:26.643]古筝：蒲羽\n[03:28.559]歌手：雾也至Woo Yeah\n`;

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/yslrc/svgcircle_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
	HCPlayer({
		papa: '#tz',
		geci: geci,
		skip: 0,
		lrc_css: 'left: 340px; bottom: 50px; --bg: linear-gradient(#ffffee30, #008c00a0); color: #8ad68afa',
		player_css: 'left: 200px; bottom: 20px; --prog: #00aa00a2; --track: #dddddd90; color: #ccc;',
		fs_css: '--bg: #00800080; --color: snow;'
	});
};
</script>

花简静

看了今天的说明，
知道skip: 0,调整时间的意思了，那我昨天的跟贴也可以调一调
今天好象多了一个 average：
点赞，好用。。

凡哥

花简静 发表于 2024-8-14 18:45
看了今天的说明，
知道skip: 0,调整时间的意思了，那我昨天的跟贴也可以调一调
今天好象多了一个 average： ...

average 是一个估摸的值，理论上它是有用的，针对抒情类歌词，各句演唱用时差距比较大，所以引入这个机制，有木有用也不是很确定