亚伦影音工作室 发表于 2024-7-25 18:03

日不落dj

<style>
#papa{ margin: 0 0 0 calc(30% - 381px);
top:10px;
display: grid;
place-items: center;
width: 1200px;
height: 640px;
background: lightblue url('https://pic.imgdb.cn/item/666909d8d9c307b7e9e73532.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 3;}
.photo {width: 100%; height: 100%;
position:absolute;z-index: 3;
top:0%; left:0%;
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round {0%   {transform: rotateZ(0deg); opacity: 0;}
1% {transform: rotateZ(0deg); opacity: 1; }

7% {transform: rotateZ(0deg); opacity: 1; }

14% {transform: rotateZ(0deg); opacity: 0; }
}
.photo:nth-child(15) {animation-delay: 84s;background: url(https://pic.imgdb.cn/item/6600f6f19f345e8d03ebaf86.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 78s;background: url(https://pic.imgdb.cn/item/6600c3689f345e8d032ea733.jpg)no-repeat center/cover}
.photo:nth-child(13) {animation-delay: 72s;background: url(https://pic.imgdb.cn/item/65d054569f345e8d0339cb08.jpg)no-repeat center/cover}
.photo:nth-child(12) {animation-delay: 66s;background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover}
.photo:nth-child(11) {animation-delay: 60s;background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover}
.photo:nth-child(10) {animation-delay: 54s;background: url(https://pic.imgdb.cn/item/65db13fa9f345e8d03a48992.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 48s;background: url(https://pic.imgdb.cn/item/65db12cb9f345e8d03a20693.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://pic.imgdb.cn/item/65dac8db9f345e8d03eac742.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 36s;background: url(https://pic.imgdb.cn/item/65bb5ce1871b83018a3ed949.jpg)no-repeat center/cover}
.photo:nth-child(6){animation-delay: 30s;background: url(https://pic.imgdb.cn/item/65b8fae0871b83018a629f5a.jpg)no-repeat center/cover}
.photo:nth-child(5){animation-delay: 24s;background: url(https://pic.imgdb.cn/item/65b8fa8e871b83018a610f7f.jpg)no-repeat center/cover}
.photo:nth-child(4){animation-delay: 18s;background: url(https://pic.imgdb.cn/item/658d7b30c458853aefc07335.jpg)no-repeat center/cover}
.photo:nth-child(3){animation-delay: 12s;background: url(https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 6s;background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover}
.photo:nth-child(1) {animation-delay: 0s;background: url(https://pic.imgdb.cn/item/6600e87c9f345e8d03adc879.jpg)no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}


#vid1 {
      position: absolute;
      width: 140%;
      height: 140%;
      top:-50px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index:5;
      opacity: .8;
}
#vid2 {
      position: absolute;
      width: 140%;
      height: 140%;
      top:-50px;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 3;
      opacity: .8;
}
#mplayer {
      position: absolute;z-index: 40;
      left:20px;
      bottom: 5px;background:#600000;
      width: 30px;
      height: 30px;
      border: 3px solid #cccccc;
      border-radius: 50%;
      opacity: 1;
      transition: .7s;
      display: grid;
      place-items: center;
      --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
      border-style: solid;
      border-color: #cccccc;
      cursor: pointer;
      transition: .4s;
}
#mplayer::before {
      width: 0;
      height: 0;
      left: 10px;
      border-width: 10px 14px;
      border-color: transparent transparent transparent #cccccc;
      opacity: var(--disp1);
}
#mplayer::after {
      width: 2px;
      height: 18px;
      border-width: 0 5px 0 5px;
      opacity: var(--disp2);
}
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #ff0000, #ff0000);border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000;white-space: pre;-webkit-background-clip: text;z-index: 10;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute;   top:20px; left:90%;font: normal 1.5em/0em 楷体;color:#000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); opacity: 1; cursor: pointer; z-index: 111}
</style>   
<div id="papa">
<span id="fullscreen">全屏展示</span>
<div id="testImg" >
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
</div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec496c9a706d.mp4" autoplay="" loop="" muted=""></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec496c9a706d.mp4" autoplay="" loop="" muted=""></video>
<div id="mplayer"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audioid="aud" loopautoplay>
<source src="https://s2.ananas.chaoxing.com/sv-w9/audio/78/27/2c/086d6162acc01885a4b2118b2823aa6a/audio.mp3" type="audio/mp3" /></audio>

<script>
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop')): (aud.pause(),image.classList.add('stop'));
var image= document.getElementById("testImg");

(function() {let vid2 = document.querySelector('vid2');
let mState = () => aud.paused ?vid2.pause() :vid2.play();
})();
setInterval( () => { aud.paused ? vid2.pause() : vid2.play(); },100);

(function() {let vid1 = document.querySelector('vid1');
let mState = () => aud.paused ?vid1.pause() :vid1.play();
})();
setInterval( () => { aud.paused ? vid1.pause() : vid1.play(); },100);

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏展示', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">
视频蒙版
00:00.100]日不落dj
天空的雾来得漫不经心
河水像油画一样安静
和平鸽慵懒步伐押着韵
心偷偷地放晴
祈祷你像英勇的禁卫军
动也不动地守护爱情
你在回忆里留下的脚印
是我爱的风景
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
爱的巴士总是走了又停
微笑望着广场上人群
我要把爱全都装进心里
陪我一起旅行
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
</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;
                }
      }
});
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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

liumang 发表于 2024-7-25 22:15

亚伦老师好制作，帖子没有居中

liumang 发表于 2024-7-25 22:16

亚伦老师这2个背景视频效果出彩的{:5_150:}

liumang 发表于 2024-7-25 22:17

感谢分享{:5_124:}
页: [1]
查看完整版本: 日不落dj