首页 › 音画作品 › 痴情可笑 - 李英

亚伦影音工作室 发表于 2023-11-19 22:32

痴情可笑 - 李英

本帖最后由 亚伦影音工作室 于 2023-11-19 22:33 编辑 <br /><br /><style>
#papa {margin: 10px -150px;
        width: 1164px;
        height: 640px;
        background: linear-gradient(135deg, #880000 0%,#000080 60%,#ff0000 100%);
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #191970;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #191970 8%,#cccccc 8.5%,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0) 100%,black 100%);opacity: 1;}
#papa:hover #mb { display:block ;opacity: 1;}
.photo {width: 100%;
height: 100%;mix-blend-mode: hard-light;
position: absolute;z-index: 1;
top:0px; left:0;
opacity: 0;
animation: round 30s linear infinite;}
@keyframes round{0%{opacity: 0;}8% {opacity: 1;}25% {opacity: 0}}
.photo:nth-child(1) {animation-delay: 24s;background: url('https://img-baofun.zhhainiao.com/fs/fd4a9b89a939aedd51b50b5b8f91a6e4.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 18s;background: url('https://img-baofun.zhhainiao.com/fs/3fd3685dc30d76e7ce4f01dcae16a992.jpg')no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 12s;background: url('https://img-baofun.zhhainiao.com/fs/f7675c5c107944f918884e444f0bd39d.jpg')no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 6s;background: url('https://img-baofun.zhhainiao.com/fs/b30257f83a3f3938ed4da1918fb7cd93.jpg')no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://img-baofun.zhhainiao.com/fs/7d40cc25e5ad0ddb40f62ef62a86299f.jpg')no-repeat center/cover}
.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#mplayer {position: absolute; left: 0%;top:92%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%) ;opacity: 1;}

#papa:hover #mplayer { display:block ;opacity: 1;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(85% - 15px);font: normal 2em/0em 华文行楷;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}

</style>

<div id="papa">

<span id="fullscreen">全屏欣赏</span>
<div id="mb"></div>
<div id="Img" >
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
</div>

<divid="mplayer"><audiostyle="width:100%;" id="aud"   controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music313173350.mp3" type="audio/mpeg"></audio></div>

      <div id="tx"><div id="lrc" data-lrc="痴情可笑 - 李英">痴情可笑 - 李英</div></div>

</div>

<style type="text/css">
#lrc {
      --motion: cover2;
      --tt: 2s;
      --state: paused;
      position: absolute;
top: 80%;
z-index: 12;
      font: normal 3.2em 华文行楷;
    left: 50%;
      transform: translate(-50%);
      color:#000078;
      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 -1px0);
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: #ff0000;
    -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0;filter: hue-rotate(360deg); } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; filter: hue-rotate(360deg);} }
</style>
<script >
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `痴情可笑 - 李英
词：李政明
曲：会飞的鱼
编曲：姜凯升（姜山）
制作人：亚伦
OP：亚伦影音工作室
你走的时候天刚破晓
枕边只留下一张字条
就在你关上门的那一秒
我的泪如雨湿透了枕套
谁曾说今生陪我到老
为何却半路选择潜逃
我以为是我对你不够好
原来是你有了新的依靠
错爱是一杯断肠的毒药
痴情的人为它备受煎熬
从不曾预料真心付出的回报
最后结局竟是心如刀绞
错爱是一杯断肠的毒药
痴情的人注定在劫难逃
当魂牵梦绕换来不再打扰
肝肠寸断才懂痴心多可笑
谁曾说今生陪我到老
为何却半路选择潜逃
我以为是我对你不够好
原来是你有了新的依靠
错爱是一杯断肠的毒药
痴情的人为它备受煎熬
从不曾预料真心付出的回报
最后结局竟是心如刀绞
错爱是一杯断肠的毒药
痴情的人注定在劫难逃
当魂牵梦绕换来不再打扰
肝肠寸断才懂痴心多可笑
错爱是一杯断肠的毒药
痴情的人为它备受煎熬
从不曾预料真心付出的回报
最后结局竟是心如刀绞
错爱是一杯断肠的毒药
痴情的人注定在劫难逃
当魂牵梦绕换来不再打扰
肝肠寸断才懂痴心多可笑
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引*/
let mKey = 0, mFlag = true;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      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) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 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 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;
}

/*函数 ：歌词同步状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.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); /*获得歌词数组*/
})();

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? image.classList.add('stop'): image.classList.remove('stop');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

</script>

liumang 发表于 2023-11-19 22:43

{:5_150:}

深色的界面，图片变换效果出彩

欣赏赞的

liumang 发表于 2023-11-19 22:44

{:5_150:}{:5_150:}{:5_150:}

小辣椒 发表于 2023-11-20 22:47

习惯亚伦都带动图的效果，发现这帖很安静

查看完整版本: 痴情可笑 - 李英