今夜你想我不 （学习套用黑黑青山如昨播放器效果）
<style>
@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
#mama { margin: 140px 0 30px calc(50% - 831px); width: 1500px; height: 810px; background: black url('https://xlaj.cn/upfile/202411/23/03.jpg') no-repeat center/ cover; }
#player { width: 200px; height: 200px;left: calc(59% - 120px);top: 26.5%; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(180deg); transition: .7s; }
#prog { bottom: 200px; left: 49%; width: 300px; height: 2px;--bg1: Sienna; --bg2: DarkRed; --color: Sienna; }
#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
#lrc {bottom: 250px; left: 52%;font:normal 1.6em Microsoft YaHei;--bg: linear-gradient(rgba(128,128,0,.15),rgba(128,128,0,.25)); }
#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; bottom: 40px; color: DarkKhaki; padding: 2px 6px; border: 2px solid DarkKhaki; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes flash { to { filter: hue-rotate(360deg); } }
#dt1{ position: absolute; width:14px; height: 14px; top: 503px; left: 263px; }
#dt2{ position: absolute; width:32px; height: 32px; top: 90px; left: 190px; }
#dt4{ position: absolute; width: 400px; height: 270px; top: 15px; left: 968px; }
</style>
<div id="mama" class="pa">
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20231030141805.jpg" alt="" style="top: 503px; left: 263px;"/>
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" style="top: 90px; left: 190px;"/>
<img id="dt4" src="https://xlaj.cn/upfile/202411/12/4n.gif" alt="" style="top: 15px; left: 968px;"/>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/03/22/jyxw.mp3"></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/53/11/video636400070365e.mp" 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://xlaj.cn/upfile/202411/23/an1.png " 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');
// 动态图片控制
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'p\'z l.j(\'3\')){g.n.y=k(){6(2.b){2.b.q.x(2.b);2.b=A;2.5.s=\'\'}6(2.c){2.a=2.c}};g.n.w=k(){v 7=2.a.m(-4);6(7==\'.\')7=7.m(1);6(7==\'u\')7=\'B\';2.r=\'J/\'+7;o 3=l.j(\'3\');o 9=2.9,8=2.8;6(9&&8){6(!2.c){2.c=2.a}3.9=9;3.8=8;3.5.f=2.5.f;3.5.d=2.5.d;3.5.h=2.5.h;3.5.i=2.5.i;3.p(\'D\').F(2,0,0,9,8);G{2.a=3.E(2.r)}C(e){2.H(\'a\');3.5.K=\'I\';2.q.t(3,2);2.5.s=\'0\';2.b=3}}}}',47,47,'||this|canvas||style|if|suff|height|width|src|storeCanvas|storeUrl|left||top|HTMLImageElement|right|bottom|createElement|function|document|substr|prototype|var|getContext|parentElement|type|opacity|insertBefore|jpg|let|stop|removeChild|play|in|null|jpeg|catch|2d|toDataURL|drawImage|try|removeAttribute|absolute|image|position'.split('|'),0,{}))
let pState = () => {
audio.aud.paused ? (dt1.stop(), dt2.stop(), dt4.stop()) : (dt1.play() ,dt2.play() , dt4.play());
}
audio.aud.addEventListener('play', () => pState());
audio.aud.addEventListener('pause', () => pState());
</script> @马黑黑
黑黑学习玩一个青山如昨播放器效果，这个播放器变色效果特别漂亮，感觉浅颜背景变色效果明显一点 感谢黑黑源码分享{:4_187:} @冬天的雨
冬雨休息天玩一个，黑黑说你有实力完成3个的，现在要求不高，完成一个就可以{:4_170:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 夕阳黄昏 发表于 2024-11-23 20:18
老顽童晚上好，你速度快的，谢谢欣赏~{:4_187:} {:4_199:} 逐渐变色的播放器真好看。 这款播放器还自动变色，是上乘之作哈{:4_178:} 把这小播做成变色的也好美呢，背景制作和字体设计也好美。
欣赏亲爱的好帖{:4_199:} 变色播放器漂亮了，图片更喜欢了 小辣椒 发表于 2024-11-23 20:17
@冬天的雨
冬雨休息天玩一个，黑黑说你有实力完成3个的，现在要求不高，完成一个就可以
来了，先听歌{:4_208:} 小辣椒 发表于 2024-11-23 20:17
@冬天的雨
冬雨休息天玩一个，黑黑说你有实力完成3个的，现在要求不高，完成一个就可以
明天争取完成一个，就是不一定漂亮{:4_170:} 老歌经典，好听{:4_199:} 看高水平的制作，是享受！{:4_187:} 问候老师好！精美音画佳作，欣赏学习！https://cccimg.com/view.php/9c875bb2cbc549ffa2526aa6df3a9e1a.gif 你这已经是纯音画了，非常有东篱音画的特色，非常棒，真的，意境绝佳！樵哥哥我佩服得紧呐{:4_187:} 看来东篱喊你师傅没有喊错哈{:4_189:} 冬天的雨 发表于 2024-11-23 22:07
老歌经典，好听
你想夜里，樵哥哥想白天呗。{:4_189:} 马黑黑 发表于 2024-11-23 20:22
黑黑晚上好{:4_180:}