查看: 543|回复: 21

[特效] 致你

[复制链接]
江月晃重山

樱果相依
发表于 2025-1-12 21:11 | 显示全部楼层 |阅读模式
HCPlayer

评分

8

查看全部评分

点评
回复

使用道具

江月晃重山

樱果相依
 楼主| 发表于 2025-1-12 21:12 | 显示全部楼层

代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
	#tz { --state: running; margin: 30px 0 30px calc(50% - 603px); background: url('https://638183.freep.cn/638183/t24/webp3/yihv.webp') no-repeat center/cover; }
	#fsbtn { top: 20px; }
	#lrc { bottom: 20px; }
	#mplayer { left: 100px; width: 240px; height: 240px; display: grid; place-items: center; }
	.feather { position: absolute; width: 40px; height: 120px; background: url('https://638183.freep.cn/638183/small/f1.png') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1867217766"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<div id="mplayer" class="mplayer"></div>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
	import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
	var lrcAr = [[2.0,"致你(演唱 :yihuik苡慧)",3.1],[10.9,"作词 : 周萌",1.8],[12.75,"作曲 : 郭子阳",2.2],[16.96,"编曲 : 周智旭",9.4],[18.33,"恋恋不舍又念念不忘",4.0],[22.3,"被汹涌浪潮淹没",3.0],[26.11,"覆盖了属于我",2.4],[28.48,"最孤独的海洋",2.2],[30.67,"迷茫的游荡",3.7],[34.36,"不知去往何方",1.6],[35.94,"支离破碎",2.0],[38.21,"或遍体鳞伤",1.9],[40.09,"研磨成匆匆过往",3.2],[43.59,"一幕幕的相逢",2.6],[46.22,"都不甘于平庸",2.3],[48.48,"原谅我此番",3.4],[52.08,"不经意的设防",1.6],[53.69,"跌跌宕宕",2.3],[55.94,"你占据我的遐想",2.2],[58.09,"封上你路过的窗",3.1],[61.68,"你的声音",1.8],[63.63,"来来往往",1.8],[65.77,"穿梭在无人演出的剧场",4.4],[70.27,"若想念是凋谢的云",2.8],[73.05,"乘着风也飘向你",2.0],[75.1,"降落在你耳边低语",4.1],[79.22,"像沉默的打字机",2.7],[81.87,"满怀热烈情绪",2.3],[84.21,"写不出会别离太爱你",3.2],[87.38,"到最后",0.2],[87.56,"我只好小心翼翼",3.2],[90.78,"尝试着偷偷靠近",2.1],[92.89,"触碰你那透明的心",4.3],[97.17,"猜你启封的表情",2.3],[99.48,"只敢写下开篇的",2.5],[102.09,"致你",2.7],[125.19,"恋恋不舍又念念不忘",3.8],[129.04,"被汹涌浪潮淹没",3.3],[132.32,"覆盖了属于我",2.7],[135.02,"最孤独的海洋",2.3],[137.36,"迷茫的游荡",3.8],[141.18,"不知去往何方",1.5],[142.64,"支离破碎",2.0],[144.88,"或遍体鳞伤",1.9],[146.74,"研磨成匆匆过往",3.2],[150.48,"一幕幕的相逢",2.4],[152.91,"都不甘于平庸",2.3],[155.21,"原谅我此番",3.4],[158.72,"不经意的设防",1.6],[160.32,"跌跌宕宕",2.2],[162.47,"你占据我的遐想",2.2],[164.7,"封上你路过的窗",3.1],[167.94,"你的声音",1.8],[170.11,"来来往往",1.8],[172.57,"穿梭在无人演出的剧场",4.2],[177.13,"若想念是凋谢的云",2.5],[179.63,"乘着风也飘向你",2.1],[181.71,"降落在你耳边低语",4.2],[185.88,"像沉默的打字机",2.6],[188.48,"满怀热烈情绪",2.1],[190.62,"写不出会别离太爱你",3.4],[194.06,"到最后",1.2],[195.22,"我只好小心翼翼",2.2],[197.4,"尝试着偷偷靠近",2.1],[199.47,"触碰你那透明的心",4.0],[203.69,"猜你启封的表情",2.4],[206.14,"只敢写下开篇的",2.3],[209.11,"致你",2.0],[212.56,"若想念是凋谢的云",2.6],[215.14,"乘着风也飘向你",2.1],[217.26,"降落在你耳边低语",4.2],[221.47,"像沉默的打字机",2.5],[223.95,"满怀热烈情绪",2.4],[226.38,"写不出会别离太爱你",3.5],[229.83,"到最后",1.2],[231.01,"我只好小心翼翼",1.9],[232.86,"尝试着偷偷靠近",2.2],[235.05,"触碰你那透明的心",4.1],[239.11,"猜你启封的表情",2.5],[241.64,"只敢写下开篇的",2.4],[244.46,"致你",2.0]];
	var total = 9, a = 360 / total;
	for(var i = 0; i < total; i++) {
		var f = document.createElement('span');
		f.className = 'feather';
		f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
		mplayer.appendChild(f);
	}
	hcplay(tz, lrcAr);
	fscreen.fs(tz, fsbtn);
</script>

评分

5

查看全部评分

点评
回复

使用道具

江月晃重山

樱果相依
 楼主| 发表于 2025-1-12 21:16 | 显示全部楼层
帖子为自由按钮模块加LRC歌词同步(需要花朝格式的LRC歌词数组)

本帖按钮是一个复合按钮:id="mplayer" class="mplayer" 的 div 标签(14行代码)内含若干个子元素(羽毛背景图案),其实可以简单到只是一张图片。如此,就不要第 7行代码、第22-28行代码,第14行代码则改为 img 标签,第6行代码根据需要不要或改写。

评分

4

查看全部评分

点评
回复

使用道具

随遇而安

闲花落

版主勋章 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 一叶知秋 樱果相依
发表于 2025-1-12 21:44 | 显示全部楼层
歌词版的来了,我远山那贴本来可以有歌词的。
点评
回复

使用道具

随遇而安

闲花落

版主勋章 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 一叶知秋 樱果相依
发表于 2025-1-12 21:45 | 显示全部楼层
寒风 发表于 2025-1-12 21:16
帖子为自由按钮模块加LRC歌词同步(需要花朝格式的LRC歌词数组)

本帖按钮是一个复合按钮:id="mplayer" c ...

第六行如果不要,它封的是个什么样的呢。我瞅瞅去
点评
回复

使用道具

随遇而安

闲花落

版主勋章 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 一叶知秋 樱果相依
发表于 2025-1-12 21:47 | 显示全部楼层
寒风 发表于 2025-1-12 21:16
帖子为自由按钮模块加LRC歌词同步(需要花朝格式的LRC歌词数组)

本帖按钮是一个复合按钮:id="mplayer" c ...

试了一下哈,第六行可以改写,加个背景,但不能不要。。。
点评
回复

使用道具

随遇而安

闲花落

版主勋章 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 一叶知秋 樱果相依
发表于 2025-1-12 21:48 | 显示全部楼层
小播给了个亮度滤镜,触碰变亮一些,这个操作十分常见,但在这一贴里还是有了不一样的感觉,变化的时候过渡自然。
点评
回复

使用道具

『默然守候』

小青龙

赴山海 三周年庆 山之勤奋 江湖之上 桃花朵朵 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 海洋之心 蝴蝶精灵 山间红叶 花漫千山 音画同行 中秋月圆 欢度国庆 雪花精灵 一叶知秋 我书我心 樱果相依
发表于 2025-1-12 23:35 | 显示全部楼层
凡凡老师?
点评
回复

使用道具

『默然守候』

小青龙

赴山海 三周年庆 山之勤奋 江湖之上 桃花朵朵 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 海洋之心 蝴蝶精灵 山间红叶 花漫千山 音画同行 中秋月圆 欢度国庆 雪花精灵 一叶知秋 我书我心 樱果相依
发表于 2025-1-12 23:35 | 显示全部楼层
好久不见凡凡老师,问好。。。
点评
回复

使用道具

『默然守候』

小青龙

赴山海 三周年庆 山之勤奋 江湖之上 桃花朵朵 山高为峰 山外有山 巳巳如意 两周年庆 守望千山 少年歌行 海洋之心 蝴蝶精灵 山间红叶 花漫千山 音画同行 中秋月圆 欢度国庆 雪花精灵 一叶知秋 我书我心 樱果相依
发表于 2025-1-12 23:36 | 显示全部楼层
欣赏凡凡老师带来的精美作品。。。
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表