小辣椒 发表于 2024-6-25 19:39

明月不懂我伤悲(Live 合唱版)-魏佳艺

<style>
#tz { left: 50%; transform: translateX(calc(-50% - 81px)); top: 150px;width: 1400px; height: 789px; overflow: hidden; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
li-zi { position: absolute; top: 0; width: 80px; height: 80px; border-radius: 0%; background: olive; offset-path: path('M200 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -180px 10px var(--shadow)); animation: fly 20s cubic-bezier(0,0.36,0,0.14) infinite var(--state);z-index: 2; }

#player { position: absolute;left: 120px; bottom: 100px;mix-blend-mode: screen; width: 110px; height: 110px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); z-index: 81;}
#player:hover { filter: brightness(1.2);filter: hue-rotate(180deg) drop-shadow(0 0 -40px cyan); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }

#dt2{ position: absolute; width:32px; height: 32px; top: 60px; left: 938px; }
#dt3{ position: absolute; width: 32px; height: 32px; top: 120px; left: 332px; }


#bjbs{animation: rotating 1s linear infinite;width: 1400px; height: 789px;position: z-index: 1;absolute;background:url('https://xlaj.cn/assets/file/zp/20240625164335.jpg')no-repeat center/cover;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: block;position: absolute;top:88%; left:-1%;z-index: 5;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
</style>

<div id="tz">
<div id="bjbs"> </div>


<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />


        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/35/13/b8/fd565ee0f1347815c5375feaceb8bab7/audio.mp3" autoplay loop></audio>
        <img id="player" alt="" title="播放" src="https://xlaj.cn/assets/file/zp/20240602132409.png " />

<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>

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

new Array(total =6).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
               background: url('https://xlaj.cn/assets/file/zp/20240629141645.png') no-repeat center/cover;
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(16).substring(2,8)};
        `;
        tz.prepend(i);
});
var mState = () => {
        tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();



var lrc = `明月不懂我伤悲(Live 合唱版)-魏佳艺
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
曾经以为谁今生可依偎
不顾一切掏心又掏肺
像一场宿醉分不清是非
清醒后才知痛彻心扉
你曾说你的眼里我最美
转过头恋上别人的妩媚
我曾问究竟你爱的是谁
你无言留给我一片天黑
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
。。。。。
你曾说你的眼里我最美
转过头恋上别人的妩媚
我曾问究竟你爱的是谁
你无言留给我一片天黑
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
伤心都化成灰
从此不再思念谁
莫问天上月
能否懂我的伤悲
所有流的泪
替我埋葬了后悔
从今后不会再为谁心碎
谢谢欣赏

`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便

function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}

var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("aud").ontimeupdate = setPosition;

</script >
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2024-6-25 19:43

完成同一首，晚上没有时间上来玩的，就套用了亚伦的代码完成的，这样了

無名 发表于 2024-6-25 20:31

{:5_136:}

{:5_158:}

admin 发表于 2024-6-25 21:11

赞👍🏻   漂亮啊音乐好听{:5_140:}

liumang 发表于 2024-6-25 21:51

这个变色漂亮{:5_150:}

liumang 发表于 2024-6-25 21:52

好听，这首和声不错{:5_150:}

liumang 发表于 2024-6-25 22:27

小辣椒同一首速度的{:5_150:}

小辣椒 发表于 2024-6-29 00:22

liumang 发表于 2024-6-25 22:27
小辣椒同一首速度的

有时间就同一首玩

liumang 发表于 2024-6-29 13:46

小辣椒 发表于 2024-6-29 00:22
有时间就同一首玩

小辣椒继续啊{:5_137:}
页: [1]
查看完整版本: 明月不懂我伤悲(Live 合唱版)-魏佳艺