情歌对对唱---帖赠蓝蓝贺芳辰
本帖最后由 宁静 于 2023-2-22 14:29 编辑 <br /><br /><style>#papa{left:-264px;width:1400px;height: 764px; top: 150px; background:tan url('https://pan.365.tf/uploads/lxx/20221112/bj.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display:grid;place-items:center;position:relative;z-index:1}#mplayer{position:absolute;left:1120px;bottom:460;width:150px;height:80px;user-select:none;display:grid;place-items:center;cursor:pointer}#mplayer:hover #btnwrap,#mplayer:hover #prog{transform:translateY(var(--yy))}#mplayer:hover#btnwrap{background:linear-gradient(to top right,rgba(0,0,255,.45),rgba(255,0,0,.35));border-radius:50%;opacity:.75}
#btnwrap,#prog{position:absolute;display:grid;place-items:center;transition:.5s}#btnwrap{--yy:-15px;width:40px;height:40px;transform:rotate(45deg);border:1px solid gray;border-radius:6px;opacity:.25}
#btnplay{width:20px;height:20px;background:rgba(255,255,255,.15);clip-path:polygon(0 0,0 100%,100% 50%)}#btnpause{width:2px;height:20px;border-style:solid;border-width:0 4px;border-color:transparent rgba(255,255,255,.15);display:none}#prog{--yy:20px;width:150px;height:16px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,255,.45),rgba(255,0,0,.35) 100%,transparent 0);border:1px solid gray;font:400 14px / 16px sans-serif;color:gray}
#lrc { position: absolute; top: 620px;left: 100px; font: bold 2.5em sans-serif;font-family:微软雅黑; filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);color: transparent; letter-spacing: 2px; background: linear-gradient(50deg, #000080, #ff0000, #000000, #00f000) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; }
.ball{--ss:0s;position:absolute;width:15px;height:15px;left:480px;top:140px;border-radius:50%;background:red;offset-distance:0;offset-path:path("M300 120 Q490 -20 560 120 Q640 300 300 580 Q-40 300 40 120 Q130 -20 300 120z");animation:move 6s var(--ss) linear infinite}
#dt1{ position: absolute; width: 480px; height: 150px; top: 40px; left: 150px; }
@keyframes move{to{offset-distance:100%}}
@keyframes bgMerge{from{background-position:0 0}to{background-position:-100% 0}}
</style>
<div id=papa>
<img id="dt1" src="https://pan.365.tf/uploads/lxx/20221112/6niao.gif" alt="" />
<div id=lrc>情歌对对唱--迟来的爱</div><div id=mplayer>
<div id=btnwrap><span id=btnplay></span><span id=btnpause></span></div><div id=prog>00:00 | 00:00</div></div></div>
<script>
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://pan.365.tf/uploads/lxx/20221112/clda.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'ball';
ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
papa.appendChild(ele);
});
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}</script>
<br><br><br><br><br><br><br><br><br><br> @一抹微蓝 蓝蓝生日快乐~~~
最近比较忙，做个简单的贺帖，别嫌弃啊 这首迟来的爱，是我情歌对对唱专辑里面第一首歌曲，我一直很喜欢这些对白。 祝福蓝蓝生日快乐，永远年轻漂亮{:10_401:} 一起贺蓝蓝生日快乐{:10_402:} 好听，这个流动的心也是特别好看 这个有点年份了！ 独白很精彩，歌曲经典好听，播放器看着也温馨~{:9_364:} 蓝蓝生日快乐，这个心的动态效果很漂亮！