青山如昨
<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 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
</script> <h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</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属性值中用小角逗号隔开 漂亮，欣赏学习了{:4_190:} 背景图漂亮！老师辛苦了！{:4_190:} 马黑黑 发表于 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补充上来。
现在算是看明白了。。{:4_173:} 马黑黑 发表于 2024-11-22 12:22
#prog { bottom: 30px; width: 300px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
#prog:: ...
滑块这么整一下很方便更改到与贴子色彩一致。。
同理，歌词和全屏按纽也一样可以重新配置 。。
就是又简洁又灵活。。
高配版 今天用的还是花潮格式精准歌词，加了全屏配置，
现在这个作品用了全屏无论是画面还是视频都清晰依旧。。。
全屏效果真的震撼，漂亮极了。。
视频的暗角效果使整个作品有明暗层次区别，
代码暗角效果是真的好赞，
音画人梦寐以求的效果。。 音画顶配模板。。
可惜没听到音乐，
白老师的音乐值得期待，晚上再赏。。{:4_170:} 花飞飞 发表于 2024-11-22 15:26
音画顶配模板。。
可惜没听到音乐，
白老师的音乐值得期待，晚上再赏。。
音乐还不错 花飞飞 发表于 2024-11-22 15:25
今天用的还是花潮格式精准歌词，加了全屏配置，
现在这个作品用了全屏无论是画面还是视频都清晰依旧。。。 ...
夸张了 朵拉 发表于 2024-11-22 13:38
漂亮，欣赏学习了
{:4_190:} 梦江南 发表于 2024-11-22 14:43
背景图漂亮！老师辛苦了！
{:4_190:} 花飞飞 发表于 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对应的下面那句也在包里{:4_173:} 马黑黑 发表于 2024-11-22 17:44
再高也搞不过姚明
你这是高明，不是姚明{:4_173:} 马黑黑 发表于 2024-11-22 17:43
夸张了
我最实事求事了，一般不夸张的 马黑黑 发表于 2024-11-22 17:43
音乐还不错
开始循环听了。。前奏中。。。{:4_173:}