论坛 › 马黑黑教程专版 › 马黑老师风车转转转

亚伦影音工作室 发表于 2024-3-2 20:41

马黑老师风车转转转

本帖最后由 亚伦影音工作室 于 2024-4-1 14:45 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:150px;margin-left: -300px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;z-index: 123456;}
audio {position:absolute;top:580px;z-index: 50;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}
audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}
audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}

#lrc{left: 10%;top: 75%;}#lrcc {left: 90%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#EE0000 35%,#EE0000 65%,#EE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #000079;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 -1px 0);z-index: 15;}
#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); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}

li-zi { z-index: 6;top:1600px;left: 0px;position:absolute;background: url('https://pic.imgdb.cn/item/65bf44e6871b83018a0bba00.png')0 0/cover; offset-path: path('M0 400 Q570 -260 1140 400'); offset-distance: 0; animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state); }
@keyframes move { to { offset-distance: 100%; filter:hue-rotate(360deg)contrast(100%)brightness(150%);} }
</style>
<div id="papa">
<div class="cemp" id="testImg" >
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<divid="body" ><li-zi ></li-zi ></div>
<audioid="aud" loop >
<source src="https://bzgz.club/view.php/7ec2021e6d24db7015f0f59e17533718.mp3" type="audio/mp3" /></audio>
<div id="mplayer" title="暂停/播放"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>

<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象

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

mplayer.onclick = () => aud.paused ? (aud.play()): (aud.pause());

mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>
<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")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","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>

var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: all=14}).forEach(star => {
      var size = 30 + Math.floor(Math.random() * 30);
      star = document.createElement('li-zi');
      star.style.cssText += `
            left: 0;
            top: ${Math.random() * 140 + 60}px;
            width: ${size}px;
            height: ${size}px;
            opacity: ${Math.random() * 0.4 + 0.4 };
            animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
      `;
      papa.prepend(star);
    });

</script>
<style type="text/css">
.cemp{z-index: 5;
width: 1164px;
position: absolute;
left: 140px;
top: 23%;
margin: 0px auto;
}
.box {z-index: 5;
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://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
   left:0px;top:0px;position: absolute;
animation: moveo 3s 2.25s infinite;}
.box:nth-child(2) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;
animation: moveo 3s 1.5s infinite;}
.box:nth-child(3) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;
animation: moveo 3s 0.75s infinite;}
.box:nth-child(4) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;
animation: moveo 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 moveo {
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>

<style>
#mplayer{position: absolute;z-index: 50;
    left:10px;top:470px;
    width: 120px;
    height: 120px;
    background:
      linear-gradient(tan 50%, #00ff00 0),
      linear-gradient(90deg, #ff0000 50%, #00ff00 0),
      radial-gradient(circle, #ffffff 2px, #000000 6px, transparent 6px, transparent 0);
    background-blend-mode: saturation;
    clip-path: polygon(0 50%, 33.3% 33.3%, 50% 33.3%, 50% 0, 66.6% 33.3%, 66.6% 50%, 100% 50%, 66.6% 66.6%, 50% 66.6%, 50% 100%, 33.3% 66.6%, 33.3% 50%);
animation: fengche 6s linear infinite ;
}

@keyframes fengche {0% {transform: rotate(360deg);}}
</style>

红影 发表于 2024-3-3 08:59

亚伦老师做得真快啊，还结合了黑黑的星星粒子，真棒{:4_199:}

红影 发表于 2024-3-3 09:00

图片轮播也很漂亮。一键全控。欣赏亚伦老师好帖{:4_187:}

查看完整版本: 马黑老师风车转转转