青山如昨

马黑黑

HCPlayer

马黑黑

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
	#mama { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 800px; background: black url('https://638183.freep.cn/638183/t24/5/qkuj.jpg') no-repeat center/ cover; }
	#player { width: 60px; height: 60px; bottom: 35px; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
	#player:hover { filter: hue-rotate(180deg); transition: .7s; }
	#prog { bottom: 30px; width: 300px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
	#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
	#lrc { top: 65%; color: lightgreen; --bg: linear-gradient(rgba(0,128,0,.25),rgba(0,128,0,.75)); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	#fsbtn { position: absolute; top: 20px; color: lightgreen; padding: 2px 6px; border: 2px solid lightgreen; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
	@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>

<div id="mama" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2646858693"></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/53/11/video636400070365e.mp4" autoplay loop muted></video>
	<span id="fsbtn"></span>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<img id="player" class="player" src="https://638183.freep.cn/638183/web/svg/jupm.svg" alt="" />
	<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
	import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
	import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
	var lrcAr = [[2.93,"青山如昨",8.4],[11.33,"歌手 世界之外",6.9],[18.21,"作词 Lyricist：璇子",1.5],[19.74,"作曲 Composer： AST",2.2],[21.97,"制作人 Producers：张光磊/ AST",3.1],[25.03,"编曲 Arrangement： AST/张光磊",1.6],[26.61,"曾记得晚秋夜色",3.5],[32.83,"共走过身影交错",4.0],[38.85,"千山尽染白雪落",4.0],[43.44,"青山如昨",2.4],[51.54,"林花谢春红零落",3.8],[57.68,"太匆匆问几时重",3.8],[64.08,"怦然心动泡影如梦",3.8],[68.12,"不舍也就不得",6.0],[76.18,"浮世灿烂非我所愿",3.9],[82.3,"人间繁华俱归黄土",4.1],[88.5,"万里雁去与你同归",4.0],[93.04,"谁解我同宿命纠葛",6.4],[101.05,"上叩天命下问黄泉",4.1],[107.09,"我独不知己命在何",4.9],[113.32,"年华易老情深不寿",4.2],[118,"是我无情又执着",5.8],[148.17,"缘分如指间流沙",3.6],[154.29,"越紧握越易流散",3.9],[160.51,"三生石上自写前缘",4.0],[164.81,"奈何桥畔等我",5.7],[172.56,"朔风凛冽雪落寒彻",4.1],[178.81,"叩问神佛因缘何错",4.5],[184.98,"若命运说乱了因果",4.4],[189.74,"我宁愿就将错就错",6.5],[197.63,"天道无情偏我执着",4.3],[203.7,"年华往复一如初见",5.5],[209.93,"想同你看青山白首",4.2],[214.63,"岁月不老你和我",7.1],[235.51,"伴你走",1.4],[237.44,"此生白首",2.1],[241.53,"还想要来生不舍",3.7],[247.76,"谁解我宿命纠葛",3.9],[253.81,"是为何",1.5]];
	var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
	var audio = new Aud(mDatas);
	audio.play();
	fscreen.fs('mama', 'fsbtn');
</script>

马黑黑

#prog { bottom: 30px; width: 300px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }

进度条可以重设宽度尺寸、底轨颜色、滑块颜色、文本颜色；
时间信息文本使用 ::before 做的，重设宽度、高度、位置可得到本帖的样式。

马黑黑

#player { width: 60px; height: 60px; bottom: 35px; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }

小播需要加入其它CSS动画时，会覆盖 @import 引入的旋转预设，如果仍然需要按钮旋转，在这里一并写出，在animation属性值中用小角逗号隔开

朵拉

漂亮，欣赏学习了

梦江南

背景图漂亮！老师辛苦了！

花飞飞

马黑黑 发表于 2024-11-22 12:28
#player { width: 60px; height: 60px; bottom: 35px; animation: flash 4s linear infinite var(--state), ...

刚还奇怪这一句呢，就看到了说明。。

animation: rot 8s linear infinite var(--state);这个是打包CSS插件里面的，
但因为增加了flash动态覆盖了rot运动，所以需要把rot补充上来。
现在算是看明白了。。

花飞飞

马黑黑 发表于 2024-11-22 12:22
#prog { bottom: 30px; width: 300px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
#prog:: ...

滑块这么整一下很方便更改到与贴子色彩一致。。
同理，歌词和全屏按纽也一样可以重新配置 。。
就是又简洁又灵活。。
高配版

花飞飞

今天用的还是花潮格式精准歌词，加了全屏配置，
现在这个作品用了全屏无论是画面还是视频都清晰依旧。。。
全屏效果真的震撼，漂亮极了。。

视频的暗角效果使整个作品有明暗层次区别，
代码暗角效果是真的好赞，
音画人梦寐以求的效果。。

花飞飞

音画顶配模板。。
可惜没听到音乐，
白老师的音乐值得期待，晚上再赏。。

马黑黑

花飞飞 发表于 2024-11-22 15:26
音画顶配模板。。
可惜没听到音乐，
白老师的音乐值得期待，晚上再赏。。

音乐还不错

马黑黑

花飞飞 发表于 2024-11-22 15:25
今天用的还是花潮格式精准歌词，加了全屏配置，
现在这个作品用了全屏无论是画面还是视频都清晰依旧。。。 ...

夸张了

马黑黑

朵拉 发表于 2024-11-22 13:38
漂亮，欣赏学习了

马黑黑

梦江南 发表于 2024-11-22 14:43
背景图漂亮！老师辛苦了！

马黑黑

花飞飞 发表于 2024-11-22 15:22
滑块这么整一下很方便更改到与贴子色彩一致。。
同理，歌词和全屏按纽也一样可以重新配置 。。
就是又 ...

再高也搞不过姚明

马黑黑

花飞飞 发表于 2024-11-22 15:17
刚还奇怪这一句呢，就看到了说明。。

animation: rot 8s linear infinite var(--state);这个是打包CSS ...

具体地说，是animation属性被新的设置覆盖了

花飞飞

马黑黑 发表于 2024-11-22 17:45
具体地说，是animation属性被新的设置覆盖了

说了就明白了，不然还在纳闷。且这个rot对应的下面那句也在包里

花飞飞

马黑黑 发表于 2024-11-22 17:44
再高也搞不过姚明

你这是高明，不是姚明

花飞飞

马黑黑 发表于 2024-11-22 17:43
夸张了

我最实事求事了，一般不夸张的

花飞飞

马黑黑 发表于 2024-11-22 17:43
音乐还不错

开始循环听了。。前奏中。。。