情人 - 刀郎 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2024-2-25 22:49

情人 - 刀郎

本帖最后由亚伦影音工作室于 2025-6-10 19:24 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:url(https://pic.imgdb.cn/item/65db13fa9f345e8d03a48992.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:122px;margin-left: -300px;}
#prog { position: absolute; bottom: 1%; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:5%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;cursor: pointer;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/0em serif;color:#ffffff; cursor: pointer; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }

#lrc{left: 20%;top: 70%;}#lrcc {left: 80%;transform: translate(-102%);top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.5em 华文新魏;color: #222222;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}

.zt{list-style: none;margin-left: 0px;width:600px;height:400px;position:absolute;z-index: 4;overflow:hidden;}
.zt e{width: 100%;height: 600px;position:relative;animation: myfirst 80s 1 ;line-height: 100px;text-align: center;font: normal 4em 华文行楷;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0;color:#000000;transform:scale(0)}10% {opacity: 1;color: #800000;transform:scale(1)}15% {opacity: 1;color: #800000;transform:scale(1)}50%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1) }}

.begeg{ width: 100%; height: 100%; position:absolute; overflow: hidden; transform: skewX(0deg) skewY(0deg); text-align: center;}
#square{top:10%;left: 10%;position: absolute;width: 80%;height: 80%;border:2px solid #ffffff;animation:cornerrot 30s ease infinite;}
#square:nth-child(1){transform-origin:top left;background: url('https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg')no-repeat center/cover;}
#square:nth-child(2){transform-origin: top right;background: url('https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg')no-repeat center/cover;}
#square:nth-child(3){transform-origin: bottom left; background: url('https://pic.imgdb.cn/item/65db15639f345e8d03a78720.jpg')no-repeat center/cover; }
#square:nth-child(4){transform-origin: bottom right; background: url('https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg')no-repeat center/cover; }
.stop #square:nth-child(1),
.stop #square:nth-child(2),
.stop #square:nth-child(3),
.stop #square:nth-child(4){animation-play-state: paused;}
@keyframes cornerrot{
0% {transform: rotate(0deg); }
50%{transform: rotate(360deg); }
80% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}
</style>
<div id="papa">
<div class="begeg"><div id="testImg" >
            <span id="square"></span>
            <span id="square"></span>
            <span id="square"></span>
            <span id="square"></span>
               </div>
   </div>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/a7/5b/79/3fe65c10759fbb9de352d8b4b16ed72c/audio.mp3" loop autoplay>
</audio>
<ul class="zt">
<e><div>情人 </div><br> <div style="transform: scale(0.6)" > 作词：刀郎<br>作曲：刀郎<br>演唱：刀郎</div></e>
</ul>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停">❊</span>
      <span id="slider">✈</span>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<span id="lrcStr" style="visibility: hidden;">
作词 : 刀郎
作曲 : 刀郎
编曲：刀郎

你是我的情人
像玫瑰花一样的女人
用你那火火的嘴唇
让我在午夜里无尽的销魂
让我在午夜里无尽的销魂
你是我的爱人
你是我的爱人
像百合花一样的清纯
像百合花一样的清纯
用你那淡淡的体温
用你那淡淡的体温
抚平我心中那多情的伤痕
来来来来来来
来来来来来来
来来来来来来
来来来来来来
我梦中的情人
我梦中的情人
忘不了甜蜜的香吻
忘不了甜蜜的香吻
每一个动情的眼神
每一个动情的眼神
都让我融化在你无边的温存
你是我的情人
像玫瑰花一样的女人
用你那火火的嘴唇
让我在午夜里无尽的销魂
你是我的情人
像玫瑰花一样的女人
用你那火火的嘴唇
让我在午夜里无尽的销魂
来来来来来来
来来来来来来
来来来来来来
来来来来来来
来来来来来来
来来来来来来
来来来来来来
来来来来来来
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let arr="";
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;

(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? (aud.play()): (aud.pause()); }
</script>

红影发表于 2024-2-26 08:49

又是个新的图片轮状方式，很漂亮。
欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-2-27 16:09

欣赏老师的好制作，学习了。谢谢！

页: [1]

花潮论坛's Archiver

情人 - 刀郎