查看: 278|回复: 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 | 显示全部楼层
欣赏凡凡老师带来的精美作品。。。
点评
回复

使用道具

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

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-8 06:03

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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