醉美水芙蓉 发表于 2023-9-12 21:01

秋风带走我的爱

<style>
#papa { margin: 0px 0 0 calc(50% - 681px); width: 1200px; height: 680px; box-shadow: 0px 0px 0px #000; position: relative; z-index: 1; display: grid; place-items: center; background:#000000 background: url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') no-repeat center/cover; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
.photo {width: 100%;
height: 100%;
position: absolute;z-index: 1;
top:0px; left:0px;
opacity: 0;
animation: round 60s linear infinite;-webkit-mask-image: radial-gradient(black 25% ,transparent 75%);}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:0}
4% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
8% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
12% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
16% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
22% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:0}
}
.photo:nth-child(1) {animation-delay: 48s;background: url('https://pic.imgdb.cn/item/64e74fdf661c6c8e54bad151.jpg') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 36s;background: url('https://pic.imgdb.cn/item/64e74fca661c6c8e54bac55a.jpg ') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/64e74fae661c6c8e54babe82.jpg ') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/64e74f81661c6c8e54bab6c0.jpg ') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/64e74f6b661c6c8e54baafc0.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;}
#prog { position: absolute; bottom: 85%;left: 4%; width: 300px; height: 2px; border: 0px solid lightblue; border-radius: 2px;background: linear-gradient(to right, #880000, #880000 var(--prg), #cccccc 0); color: #ffffff; --prg: 0%; --state: paused; z-index: 20;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 10px; }
#prog::after { right: 10px; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); bottom: -2px;}
#btnplay { position: absolute; top: -32px; left: 45%; opacity: .9;font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 10s infinite linear var(--state); }
.gecikuang { position: absolute; left:0%;top: 86%; width: 100%; height: 50px; z-index: 4;}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); top: 0%; font: normal 2.8em 华文行楷; color:#ff0000; -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:#000080 ; filter: #ffffff; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#flyBox { --w: 220px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:30px;bottom: -30px; font-size: 14px; }
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 100}
</style>
<div id="papa">
<div id="Img" >
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>
<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/17/79/V-177936-E71A3513.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video>
<span id="fullscreen">全屏观赏</span>
<div class="gecikuang">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
</div>
    <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
      <span id="btnplay" title="播放/暂停"><div id="bnt">❊</div></span>
<span id="slider"></span>
    <div id="flyBox"><div>秋风带走我的爱DJ-思雨</div></div>
</div>

</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music235883106.mp3" autoplay loop></audio>

<script>
(function() {
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 vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());
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);
});
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `秋风带走我的爱DJ
作词：林晓杰
作曲：杰哥哥；思雨
演唱：思雨
LRC编辑：醉美水芙蓉
繁华过后树叶被风吹走
树叶飘零我满腹的忧愁
为何我们在秋天分了手
铮铮誓言你飘到了脑后
我任由泪水在肆意的流
多少往事又浮现在心头
你的无情像这冷漠的秋
早知这样当初何必追求
枯黄的树叶布满了街头
冷漠的背影刺痛我胸口
时至今日我算把你看透
还说什么要十指紧相扣
我们的感情被秋风吹走
我的心被伤得一无所有
我在风中任泪水默默流
相遇街口我在为谁守候

我任由泪水在肆意的流
多少往事又浮现在心头
你的无情像这冷漠的秋
早知这样当初何必追求
枯黄的树叶布满了街头
冷漠的背影刺痛我胸口
时至今日我算把你看透
还说什么要十指紧相扣
我们的感情被秋风吹走
我的心被伤得一无所有
我在风中任泪水默默流
相遇街口我在为谁守候
我们的感情被秋风吹走
我的心被伤得一无所有
我在风中任泪水默默流
相遇街口我在为谁守候
我在风中任泪水默默流
相遇街口我在为谁守候

谢谢欣赏！
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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); /*获得歌词数组*/
})();






var image = document.getElementById("Img"),
    button = document.getElementById("bnt");
    if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.classList.remove('stop');
            this.value = '.';
      } else {
            image.classList.add('stop');
            this.value = '';
      }
    };
}

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };       
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-9-12 21:36

视频背景和人物的色彩很协调，真漂亮的制作。欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-9-12 23:03

红影 发表于 2023-9-12 21:36
视频背景和人物的色彩很协调，真漂亮的制作。欣赏水芙蓉美女好帖

谢谢红影点评支持！

冬天的雨 发表于 2023-9-12 23:05

问好美女，欣赏{:4_199:}

醉美水芙蓉 发表于 2023-9-12 23:09

冬天的雨 发表于 2023-9-12 23:05
问好美女，欣赏

问候冬雨老师晚上好！

小文 发表于 2023-9-13 07:54

唯美的画面，好听的音乐

红影 发表于 2023-9-13 12:45

醉美水芙蓉 发表于 2023-9-12 23:03
谢谢红影点评支持！

这个做得很完美{:4_187:}

小辣椒 发表于 2023-9-13 13:01

亚伦这个播放器下面加的滚动字效果很漂亮的{:4_199:}

小辣椒 发表于 2023-9-13 13:02

欣赏水芙蓉的精彩制作，小辣椒欣赏来迟{:4_187:}

醉美水芙蓉 发表于 2023-9-13 17:19

小文 发表于 2023-9-13 07:54
唯美的画面，好听的音乐

谢谢小文支持！

醉美水芙蓉 发表于 2023-9-13 17:20

小辣椒 发表于 2023-9-13 13:02
欣赏水芙蓉的精彩制作，小辣椒欣赏来迟

小辣椒不用着急，有空再看，都在你的论坛！

千羽 发表于 2023-9-13 19:39

芙蓉的特效图做得太美了，选材和制作都棒棒哒{:4_187:}

醉美水芙蓉 发表于 2023-9-13 21:58

千羽 发表于 2023-9-13 19:39
芙蓉的特效图做得太美了，选材和制作都棒棒哒

谢谢千羽美女光临支持！

马黑黑 发表于 2023-9-14 07:54

{:4_199:}
页: [1]
查看完整版本: 秋风带走我的爱