论坛 › 欢乐水吧 › 风尘下榻(DJ 阿本版)-姜晨艾凝

亚伦影音工作室 发表于 2024-11-11 14:24

风尘下榻(DJ 阿本版)-姜晨艾凝

本帖最后由 亚伦影音工作室 于 2024-11-12 19:06 编辑 <br /><br /><style type="text/css">
#papa{
        position: relative;
        width: 1164px;
        height: 620px;
      margin-left:-300px;
        margin-top:120px;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
      border-radius: 2px;
        background:url(https://file.moyublog.com/d/file/2024-08-05/04f7865d9368bdc22c09799e905d5b3c.jpg)no-repeat center/cover;
        overflow: hidden;
}
#pa{z-index: 1;
width: 104%;
height: 104%;
position: absolute;
top: -2px;
left: -2px;background:url(https://pic.imgdb.cn/item/6731a660d29ded1a8c3ce42e.webp)no-repeat center/cover;
filter: url(#water)
}

.gallery {width: 110%;height: 100%;
        position: absolute;z-index: 1;
top:0%; left:-5%;display: flex;
}
.left, .right {
width: 50%;
display: flex;
overflow: hidden;
}
.left {
& .inner { perspective-origin: right center; }
& .item {
    right : -10rem;
    &:item:nth-child(1) { transform: translate3d(-10rem,0,-4rem); }
    &:item:nth-child(2) { transform: translate3d(-20rem,0,-8rem); }
    &:item:nth-child(3) { transform: translate3d(-30rem,0,-12rem); }
    &:item:nth-child(4) { transform: translate3d(-40rem,0,-16rem); }
    &:item:nth-child(5) { transform: translate3d(10rem,0,-4rem); }
}
}
.right {
& .inner { perspective-origin: left center; }
& .item {
    left :-10rem;
    &:item:nth-child(1) { transform: translate3d(10rem,0,-4rem); }
    &:item:nth-child(2) { transform: translate3d(20rem,0,-8rem); }
    &:item:nth-child(3) { transform: translate3d(30rem,0,-12rem); }
    &:item:nth-child(4) { transform: translate3d(40rem,0,-16rem); }
    &:item:nth-child(5) { transform: translate3d(-10rem,0,-4rem); }
}
}
.inner {
position: relative;
width: 100%;
display: flex;
align-items: center;
perspective: 600px;
transform-style: preserve-3d;
}
.item {
position: absolute;
width: 48%;
height: 28%;
border: 2px solid #ffffff;
background-color: white;
object-fit: cover;
transition: transform 0.3s cubic-bezier(0, 0.55, 0.45, 1);
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: #880000;border:0px solid black;position: absolute;z-index: 5;font:normal 2.5em 华文隶书;color: #ccc;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #800000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}

main {z-index: 2;
position: relative;
overflow: hidden;
width: 100%;
min-height: 98vh;
perspective: 340px;
}


/* star field */
#stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;border-radius: 50%;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fff,
    145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
    212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
    308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
    671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
    1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
    311px -475px #fff, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
    -790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
    -1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
    -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
    -1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
    36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
    1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
    624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
    410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
    977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
    -1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
    -437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
    -925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
    993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
    -170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
    -1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
    1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
    1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
    1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
    -997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
    -468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
    823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
    94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
    1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
    1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
    205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
    649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
    -1405px 397px #cfcfcf, 30px -81px #e6e6e6;
animation: fly 3s linear infinite;
transform-style: preserve-3d;
}
#stars:before,
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite;
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite;
}
@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.5;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0;
}
to {
    opacity: 0.5;
}
}

</style >
<div id="papa">
<div id="pa" >
<svg width="0" height="0"id="p" >
<filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="8" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>

<div class='gallery'>
<div class='left'>
      <div class='inner' >
      <img class='item' src='https://pic.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp' data-counter='1' >
      <img class='item' src='https://pic.imgdb.cn/item/6732a9bed29ded1a8cf916f5.webp' data-counter='2'>
      <img class='item' src='https://pic.imgdb.cn/item/6732aa0cd29ded1a8cf9467a.webp' data-counter='3'>
      <img class='item' src='https://pic.imgdb.cn/item/6732aa17d29ded1a8cf94f4f.webp' data-counter='4'>
      <img class='item' src='https://pic.imgdb.cn/item/6732a9fed29ded1a8cf93f09.webp' data-counter='5'>
    </div>
</div>
<div class='right'>
   <div class='inner'>
       <img class='item' src='https://pic.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp' data-counter='5' >
      <img class='item' src='https://pic.imgdb.cn/item/6732a9bed29ded1a8cf916f5.webp' data-counter='4'>
      <img class='item' src='https://pic.imgdb.cn/item/6732a9f0d29ded1a8cf936c6.webp' data-counter='3'>
      <img class='item' src='https://pic.imgdb.cn/item/6732aa17d29ded1a8cf94f4f.webp' data-counter='2'>
      <img class='item' src='https://pic.imgdb.cn/item/6732a9fed29ded1a8cf93f09.webp' data-counter='1'>
    </div>
</div>
</div>

<main>
<div id="stars"></div>
</main>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2a/fd/7f/36208a1240aa7e16bede45b9a765cb96/audio.mp3" autoplay loop ></audio>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
</div>
<script >const leftItems = document.querySelectorAll(".left .item");
const rightItems = document.querySelectorAll(".right .item");
const limit = leftItems.length;
const leftCoordinates = [
{ x: -10, z: -4 },
{ x: -20, z: -8 },
{ x: -30, z: -12 },
{ x: -40, z: -16 },
{ x: 10, z: -4 }
];
const rightCoordinates = [
{ x: 10, z: -4 },
{ x: 20, z: -8 },
{ x: 30, z: -12 },
{ x: 40, z: -16 },
{ x: -10, z: -4 }
];
const itemPos = (item,{x,z}) => item.style.transform = `translate3d(${x}rem,0,${z}rem)`;
function animateItems(item,coordinates) {if(!aud.paused) {
const count = Number(item.dataset.counter);
itemPos(item,coordinates);
item.dataset.counter = `${count === limit ? 1 : count + 1}`;
}
}
function activate() {
setInterval(() => {
    for (let i = 0; i < limit; i++) {
      animateItems(leftItems,leftCoordinates);
      animateItems(rightItems,rightCoordinates);
    }
},2000);
};
window.addEventListener('load',activate,false);
</script>
<script>
mdiv.onclick = () => aud.paused ? (aud.play(),p.unpauseAnimations()): (aud.pause(), p.pauseAnimations());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';

stars.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => stars.style.animationPlayState = 'running');
aud.addEventListener('pause', () => stars.style.animationPlayState = 'paused');

</script>
<span id="lrcStr" style="visibility: hidden;">
风尘下榻(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"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.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>

梦油 发表于 2024-11-11 14:26

欣赏佳作，问候亚伦。

亚伦影音工作室 发表于 2024-11-11 14:26

本帖最后由 亚伦影音工作室 于 2024-11-11 14:32 编辑








attach://46293.webp





图片可能不显示，若不显示请反馈！

老谟深虑 发表于 2024-11-11 17:40

      欣赏老师的代码音画，我看都很正常。

红影 发表于 2024-11-11 21:37

图片显示的，很漂亮，又是个向两边扩展的图片轮播方式。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-11-11 21:38

这个评分会出现问题，一下子跳转成空白页了，需要刷新才能恢复。

查看完整版本: 风尘下榻(DJ 阿本版)-姜晨艾凝