论坛 › 欢乐水吧 › 待定。。。。。。

亚伦影音工作室 发表于 2024-2-19 23:18

待定。。。。。。

本帖最后由 亚伦影音工作室 于 2024-11-23 12:04 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background: linear-gradient(0deg, #000 75%,#000 75%);display: grid;place-items: center;overflow:hidden;margin-top:0px;margin-left: -300px;}
#prog { position: absolute; bottom: 5%; 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: 30%;top: 80%;}#lrcc {left: 90%;transform: translate(-102%);top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;z-index: 6;font:bold 2.5em 华文新魏;color: #ffffff;white-space: pre;text-shadow:1px 1px 1px #fff078}
#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); animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);-webkit-background-clip: text;}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
#bk {
   margin: 0 ;
   position: relative;
   width: 1164px;
   height: 620px;
   z-index: 4;
   overflow: hidden;
}
#bm{ z-index: 4;
   position: absolute;
   content: '';
   inset: 0;animation: up 8s ease-in-out infinite alternate ;
background: repeating-linear-gradient(0deg, rgba(203, 160, 7, 0.25) 10%,rgba(121, 250, 3, 0.37) 12%,rgba(52, 152, 219, 0.41) 14%);
}
@keyframes up {50% { inset: 50% 0% 50% 0%; }}
.zt{list-style: none;margin-left: 0px;width:600px;height:400px;position:absolute;z-index: 8;overflow:hidden;}
.zt e{width: 100%;height: 600px;position:relative;animation: myfirst 40s 1 ;line-height: 600px;text-align: center;font: normal 3.5em 黑体;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) }}
#vid {position: absolute;width: 100%;height: 100%;top:0px;object-fit: cover;pointer-events: none;opacity: 0;}
</style>

<div id="papa">
<div id="bk"><div id="bm"></div></div>
<div class="cemp" id="testImg" >
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
   
<video id="vid" src="http://" autoplay="" loop="" muted=""></video>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1942740960.mp3" loop autoplay></audio>
<ul class="zt">
<e><div>不如见一面</div><br> <div style="zoom: .7" > 作词：海来阿木<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;">
不如见一面（春晚独唱版）
作词：海来阿木
作曲：海来阿木
演唱：海来阿木
编曲：海来阿木、色特比且
录混：曲比阿且
OP：坚诚文化

他们说提起我你沉默
常借着酒意分着对错
我不懂得你情深似海
你不懂得我思念成灾
不如见一面
哪怕是一眼
这世间太多的难免亏欠
你是我穿过思念的箭
不如见一面
哪怕是一眼
回首相濡以沫的那几年
不顾一切的你我从前
都说靠时间遗忘的人
经不住见面再次寒暄
晚风轻轻地递着挂牵
我揪着心事不肯翻篇
不如见一面
哪怕是一眼
这世间太多的难免亏欠
你是我穿过思念的箭
不如见一面
哪怕是一眼
回首相濡以沫的那几年
不顾一切的你我从前
不如见一面
哪怕是一眼
这世间太多的难免亏欠
你是我穿过思念的箭
不如见一面
哪怕是一眼
回首相濡以沫的那几年
不顾一切的你我从前
好在我记牢了你的容颜
凭借着回忆与你相见
</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;
bm.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bm.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bm.style.animationPlayState = 'paused');

(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());
})();

vid=document.querySelector('#vid');
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? (aud.play(),vid.play()): (aud.pause(),vid.pause()); }

</script>

<style type="text/css">
.cemp{background: url(http://chuangshicdn.data.mvbox.cn/album/22/06/30/22063012111375877295.pn) 0 0/100% 100%,url(https://img-baofun.zhhainiao.com/fs/5ff2512a52b4b07ff00e29b1f1417766.jpg)0 0px/100% 100%;
width: 1024px;z-index: 6;
position: absolute;
left: 0px;text-align: center;
right: 0;top: 20%;
margin: 0px auto;
}
.box {z-index: 6;
position: relative;
width: 300px;
height: 220px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px #D2691E;
}
.box:nth-child(1) {
background: url(https://img-baofun.zhhainiao.com/fs/ff4ad3821a4a29b0909290eb9f307b8c.jpg)no-repeat center/cover;
   left:0px;top:0px;position: absolute;
animation: move 3s 2.25s infinite;}
.box:nth-child(2) {
left:0px;top:0px;position: absolute;
background: url(https://img-baofun.zhhainiao.com/fs/fad8d29ff61243c5ecf73730d8a1a0e5.jpg)no-repeat center/cover;
animation: move 3s 1.5s infinite;}
.box:nth-child(3) {
left:0px;top:0px;position: absolute;
background: url(https://img-baofun.zhhainiao.com/fs/8774f25f23b42c9045558b8aea97c28f.jpg)no-repeat center/cover;
animation: move 3s 0.75s infinite;}
.box:nth-child(4) {
left:0px;top:0px;position: absolute;
background: url(https://img-baofun.zhhainiao.com/fs/3bdc2c70f81652375629d4fe0c5f3044.jpg)no-repeat center/cover;
animation: move 3sinfinite;
}
.stop .box:nth-child(1),
.stop .box:nth-child(2),
.stop .box:nth-child(3),
.stop .box:nth-child(4){animation-play-state: paused;}

@keyframes move {
0% {transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
    z-index: 0;}
25% {transform: perspective(400px) translate(300px) scale(1.5, 1.5) rotateY(50deg);
    z-index: 10;}
50% {transform: perspective(400px) translate(600px) scale(1) rotateY(0deg);
    z-index: 0;}
75% {transform: perspective(1200px) translate(300px) scale(.5, .5) rotateY(-50deg);
    z-index: -10;}
100% {transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
    z-index: 0}
}
</style>

红影 发表于 2024-2-20 10:15

这个把那格栅变成只有上下方向的变化了呢。
轮播图片很漂亮。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-2-20 10:18

又是小飞机的进度条上的标志，漂亮{:4_187:}

红影 发表于 2024-2-20 10:20

这个标题不懂，是在做试验么？{:4_204:}

查看完整版本: 待定。。。。。。