亚伦影音工作室 发表于 2025-4-27 13:29

人生路 - 祁隆

本帖最后由 亚伦影音工作室 于 2025-5-21 09:14 编辑 <br /><br /><style>
      #bj {
            position: relative;
            width: 1286px;
            height:740px;
            margin: 140px -300px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:#800 url('https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg') no-repeat center / cover;--state:paused;
      }
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;   
top:0px; left:0px;
animation: rod 6s linear infinite var(--state);}
@keyframes rod{20% {opacity:1;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(58,58,241,0.29968483975621496) 0%);}
40% {opacity: 1;}
60% {opacity: 1;background: linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(17,1,1,0.30808820110075286) 0%);}
80% {opacity: 1;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(241,58,58,0.2) 0%);}
100% {opacity: 1;background:linear-gradient(180deg, rgba(124,7,13,0.0643907221091562) 0%, rgba(241,190,58,0.29968483975621496) 0%);}
}
#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:0%;background:#0000;
   left: 10%;z-index: 20;}

#tu{   
      position:absolute;
      width: 300px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;
      height:300px;border-radius: 10px;
      top:10%;background:#000 url('https://img2.kuwo.cn/star/albumcover/500/0/94/2112732210.jpg') no-repeat center / cover;
   left: 2%;z-index: 2;}
#cp{   
      position:absolute;
      width: 260px;border-radius: 50%;
      height:260px;animation: rotating 6s infinite linear var(--state);
      top:15%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   
   left: 41%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 260px;
height: 260px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('https://img2.kuwo.cn/star/albumcover/500/0/94/2112732210.jpg') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
#bnt{margin: 240px 10px ; width: 30px; height: 30px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 30px; height: 30px;
background:#000;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
opacity:0; background:#000;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}

.lrc {z-index: 1;
            position: absolute;
            top: 30%;
            left: 60%;
         
            width: 540px;
            height: 350px;
            overflow: hidden;

      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
         
            color: #fff;
            font: normal 20px 'FZYaoti', sans-serif;
            transition: .3s all ease;
         list-style-type: none;
    text-align: center;
       display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
             margin: 0 auto;
            cursor: pointer;
      }

      .lrc #ul li.active {
         transform:scale(1.4);
            color: #ff0000;
      font-weight: 650;
             text-align: center;
            
      }
</style>
<div id="bj">
<div id="dh" ></div>
<div id="bfq">
<div id="tu">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>
<audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w7/audio/43/ee/53/f0374f25e4f95f73ea9affe615c3e1f3/audio.mp3" loop autoplay ></audio>

<script>
      let lrc = `人生路 - 祁隆
词：祁隆
曲：祁隆
回首走过的这一段旅程
是那样的熟悉而又陌生
曾经彷徨过哭过也笑过
眼前浮现着漂泊的身影
短暂而又漫长的这段人生
不知在那个驿站我们相逢
曾经付出过恨过也爱过
到现在留给自己的是什么
有谁能够了解人生的寂寞
有谁能够打开生命的枷锁
这段人生路 有谁陪着我
谁又能把握人生的潮起潮落
谁能知道幸福是怎样的生活
谁能知道快乐是怎样的选择
谁能静下来 为自己想过
如何能趟过人生的这条河
短暂而又漫长的这段人生
不知在那个驿站我们相逢
曾经付出过恨过也爱过
到现在留给自己的是什么
有谁能够了解人生的寂寞
有谁能够打开生命的枷锁
这段人生路 有谁陪着我
谁又能把握人生的潮起潮落
谁能知道幸福是怎样的生活
谁能知道快乐是怎样的选择
谁能静下来 为自己想过
如何能趟过人生的这条河
谁能静下来 为自己想过
如何能趟过人生的这条河
`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
            

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

      let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });

var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );


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

bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0');

</script>

红影 发表于 2025-4-27 13:57

漂亮的背景变色和代码光盘效果，好听的歌儿。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-4-27 14:04

点歌词可以让歌曲快进呢，这个奇妙{:4_187:}

梦油 发表于 2025-4-27 16:51

欣赏佳作，问候亚伦。

杨帆 发表于 2025-4-27 18:25

漂亮，谢谢亚伦老师精彩分享{:4_191:}

冬天的雨 发表于 2025-4-27 20:32

这个圆盘转换的效果加得效果太美了{:4_199:}

冬天的雨 发表于 2025-4-27 20:32

变色背景效果也是不错{:4_199:}

冬天的雨 发表于 2025-4-27 20:33

欣赏老师精彩的分享

清茶煮雪 发表于 2025-4-28 10:18

好美的贴，歌曲真好听，老师好才情，欣赏学习{:4_204:}

小辣椒 发表于 2025-4-29 22:28

亚纶这个播放器设计的漂亮，背景也是有变色效果，整体效果很好{:4_178:}

小辣椒 发表于 2025-4-29 22:30

这个封面加转盘做按钮，效果漂亮的，小长假可以玩一个的
页: [1]
查看完整版本: 人生路 - 祁隆