本帖最后由 花简静 于 2025-2-27 20:46 编辑
<style>
@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
#mama { margin: 130px 0 30px calc(50% - 931px);width: 1700px;height: 900px; background: black url('https://642303.freep.cn/642303/tu/20250202meidai.webp') no-repeat center/ cover; overflow: hidden;}
#player { width: 60px;height: 60px; }
.player:nth-of-type(1) { right: calc(84% - 57px); top: calc(75% - 10px); filter: opacity(.8) blur(.5px); --du: 10s; }
.player:nth-of-type(2) { width: 60px;height: 60px;right: 360px; top: 220px; filter: hue-rotate(30deg); --du: 10s; }
.player:nth-of-type(3) { width: 60px;height: 60px;right: 120px; top: 360px; filter: hue-rotate(120deg); --du: 10s; }
#player:hover { filter: hue-rotate(30deg); transition: .7s; }
#prog { bottom: 20px; width: 220px; --bg1: Salmon; --bg2: Salmon; --color: Salmon;opacity: .36; }
#lrc {left: 50%;transform: translateX(-50%);bottom: 30px; --bg: linear-gradient(#ffffffaa,IndianRed); color:snow;font: bold 1.6em cursive;opacity: .66; }
#vid { position: absolute;
width: 70%;
height: 70%;
bottom:-40px;
left:-90px;
object-fit: cover;
mix-blend-mode:screen;
-webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent);
opacity: .36;}
</style>
<div id="mama" class="pa">
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=2669307352.mp3 "></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/07/08/16/28/54/video60e6b74618c00.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<img id="player" class="player" src="http://qslt.net/data/attachment/forum/202501/30/200424ip6c3e1g5pjgwgly.gif" alt="" />
<img class="player" src="http://qslt.net/data/attachment/forum/202501/30/200424ip6c3e1g5pjgwgly.gif" alt="" />
<img class="player" src="http://qslt.net/data/attachment/forum/202501/30/200424ip6c3e1g5pjgwgly.gif" alt="" />
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>
<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
var geci = [
[0.08,"回望",1.9],
[2.02,"昨日海棠",2.1],
[5.59,"沐浴晨光",1.6],
[8.01,"含苞待放",1.7],
[12.01,"犹记一抹斜阳",2.6],
[15.12,"照你脸庞",2.2],
[18.17,"扉半掩",1.3],
[20.05,"两人遥相望",1.9],
[23.81,"念念不忘",1.5],
[26.01,"朝思暮想",2.0],
[30.05,"你歌唱余音绕梁",3.7],
[36.08,"那双迷离眼眶",2.6],
[39.06,"明眸转笑嫣然",2.6],
[42.48,"青睐有加让我心如鹿撞",3.7],
[47.06,"我望眼欲穿",2.0],
[50.02,"总思量",1.8],
[54.07,"你身旁 是我天堂",3.7],
[59.6,"曾以为时光慢",2.6],
[63.2,"来日方长",2.0],
[66.01,"两情相悦如往常",4.1],
[71,"道世事无常",2.0],
[74.36,"生变幻",1.4],
[78.06,"当头棒",0.9],
[79,"猝不及防",2.8],
[83.89,"你我曾如鸳鸯",2.3],
[87.02,"儿女情长",2.2],
[90.03,"执子之手盼白首共烛光",4.1],
[95.04,"地老天荒",2.1],
[97.58,"单曲：望",1.1],
[98.88,"歌手：小时姑娘",1.1],
[99.88,"作词 : 孙无忧",1.1],
[100.18,"作曲: 孙无忧",1.1],
[101.88,"编曲 : 孙悠然",1.1],
[103.18,"千山论坛qslt.net音画版",5.1],
[109.18,"",5.1],
[121.02,"无望",1.3],
[123.15,"秋草逢霜",1.7],
[126.06,"饱沧桑",1.8],
[128.04,"不复芬芳",2.4],
[133.09,"那些地久天长",2.0],
[135.06,"已成过往",3.0],
[138.06,"翘首看",1.7],
[140.07,"你不在身旁",2.7],
[144.01,"念念不忘",1.8],
[147.11,"可有回响",1.8],
[150.04,"心已伤",1.8],
[152.04,"百孔千疮",2.3],
[156.09,"我已遍体鳞伤",3.0],
[159.08,"仍然故作坚强",3.3],
[163.02,"白发三千丈缘愁似个长",3.9],
[168.02,"世事终无常",1.8],
[171.03,"多变幻",1.4],
[175.08,"你离家",0.9],
[176.28,"为了梦想",2.2],
[180.02,"孤身独去襄阳",2.9],
[183.91,"我留周庄",2.1],
[187.31,"从此后天各一方",3.6],
[192.1,"无处话凄凉",1.8],
[195.16,"鬓成霜",1.1],
[198.99,"泪两行",1.0],
[200.04,"把梦锁上",2.5],
[204.07,"那些甜蜜时光",2.9],
[207.02,"虽成过往",2.7],
[211.05,"仍希望你可以落落大方",3.8],
[217.09,"浅笑依然",1.2]
];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: geci };
var audio = new Aud(mDatas);
audio.play();
</script>
|
