论坛 › 动画音画 › 山楂树の恋 - 程jiajia【控】

亚伦影音工作室 发表于 2023-9-22 15:18

山楂树の恋 - 程jiajia【控】

本帖最后由 亚伦影音工作室 于 2023-11-19 22:19 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
        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 3em/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/music73433206.mp3" type="audio/mpeg"></audio></div>

      <div id="tx"><div id="lrc" data-lrc="HCPlayer">HCPlayer</div></div>

</div>

<style type="text/css">
#lrc {
      --motion: cover2;
      --tt: 2s;
      --state: paused;
      position: absolute;
top: 80%;
z-index: 12;
      font: normal 2.6em 微软雅黑;
    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 = `山楂树の恋 - 程jiajia
词：大能人
曲：大能人
我的山楂树之恋
只有是和你才会纯洁
可以丢弃
我的底线
锁定与你的是我视线
我的山楂树之恋
永远站在你的身边
我保证我的爱不会变
共享
永恒时间
像蝴蝶起舞翩翩
每次懊恼在于相见恨晚
不管相隔的距离是长
或是短
能在一起的时候不要快只想慢
想和你有个孩子
围着你团团转
世界变化不停
人潮川流不息
不在乎沉淀你肩膀上的经历
让你少份畏惧
还你一颗少女心
有一种超凡动力是为你而打拼
爱你的坦诚
像一面清澈的湖水
就算眼睛肿了我也觉得世上你最美
许愿十年之后你在我的枕边睡
我用我的嘴巴抚平你一天的疲惫
心里总有期待所以过的度日如年
每天会关注你生活的片片面面
你说心里话的时候我像在充电
不理睬的时候我只能自己去找空间
我的山楂树之恋
只有是和你才会纯洁
可以丢弃
我的底线
锁定与你的是我视线
我的山楂树之恋
永远站在你的身边
我保证我的爱不会变
共享
永恒时间
像蝴蝶起舞翩翩
你的喜好你的习惯
你爱吃的我都记着
你爱的高冷我做不来
可以逐渐适应着
我不会
你没睡我不睡
即使第二天和你在一起会很疲惫
过的自由自在
美丽置身事外
陪你走路回家在每个
All day all night
也不能深陷情海
为了你的那一半
用太多的精力
因为上天他自有
安排
你是一只飞鸟
飞上我的树梢
从此我乏味的生活
变得热闹
我知道
你会为我停留
时间也会随之
而过的很久
说什么好
念什么糟
行如此情
却无从知晓
我怕来不及
我怕保不齐
山楂树下站的我和你
我的山楂树之恋
只有是和你才会纯洁
可以丢弃
我的底线
锁定与你的是我视线
我的山楂树之恋
永远站在你的身边
我保证我的爱不会变
共享
永恒时间
像蝴蝶起舞翩翩
`;
/*变量 ：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>

红影 发表于 2023-9-22 16:52

好多的美人，漂亮的制作，欣赏亚伦老师好帖{:4_187:}

查看完整版本: 山楂树の恋 - 程jiajia【控】