小辣椒 发表于 2024-6-25 17:40

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

<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: 120px; height: 120px; border-radius: 0%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -180px 0 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 = 3).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
               background: url('https://pic.imgdb.cn/item/65bf4406871b83018a08c712.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 17:41

@亚伦

套个玩一下，把粒子减少了，加大了一点，也是学习的。谢谢亚伦

梦油 发表于 2024-6-25 18:25

五彩缤纷的美不胜收。

樵歌 发表于 2024-6-25 19:52

就是喜欢这种带和声合唱的歌曲。{:4_205:}

樵歌 发表于 2024-6-25 19:53

是不是又是无损音乐呀，这么好听。{:4_203:}

樵歌 发表于 2024-6-25 19:56

又把小辣椒音乐和代码粒子捣鼓到一起了。真的还挺有意境的{:4_187:}

东篱闲人 发表于 2024-6-25 20:42

这个变色效果特别好。。。{:5_116:}

醉美水芙蓉 发表于 2024-6-25 21:01

红影 发表于 2024-6-25 21:42

哇，这个小球弄大点更漂亮呢，亲爱的这个太美了{:4_199:}

千羽 发表于 2024-6-29 19:34

好惊艳的图，小辣椒现在的图做得太美了，画面融合自然，色调具有冲击力，美美的享受啊{:4_187:}

千羽 发表于 2024-6-29 19:37

播放器还掌控了色调的变化呢，特效也加得自然唯美，陶醉其中了……{:4_185:}

千羽 发表于 2024-6-29 19:39

越看越美，小辣椒的播放器制作和制图技艺都堪称一流{:4_181:}

千羽 发表于 2024-6-29 19:41

音乐也很好听，歌词的色调也很讲究，小辣椒棒棒哒{:4_173:}

千羽 发表于 2024-6-29 19:42

问好小辣椒，周末快乐{:4_185:}

老谟深虑 发表于 2024-6-30 12:40

          欣赏老师的佳作，这首歌好听！

千羽 发表于 2024-6-30 19:04

再来欣赏小辣椒的佳作，愉悦身心，很喜欢{:4_179:}

小辣椒 发表于 2024-6-30 22:08

千羽 发表于 2024-6-30 19:04
再来欣赏小辣椒的佳作，愉悦身心，很喜欢

千羽好，今天上来迟了，谢谢欣赏{:4_179:}

小辣椒 发表于 2024-6-30 22:09

老谟深虑 发表于 2024-6-30 12:40
欣赏老师的佳作，这首歌好听！

问好老谟，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-6-30 22:09

千羽 发表于 2024-6-29 19:42
问好小辣椒，周末快乐

千羽好，今天是真正的周末了，明天上班了

小辣椒 发表于 2024-6-30 22:10

千羽 发表于 2024-6-29 19:41
音乐也很好听，歌词的色调也很讲究，小辣椒棒棒哒

谢谢千羽，小辣椒想做漂亮的，现在就是做吧出来了
页: [1] 2
查看完整版本: 明月不懂我伤悲(Live 合唱版)-魏佳艺 TO：亚伦