论坛 › 欢乐水吧 › 注定没结果-李乐乐

亚伦影音工作室 发表于 2024-6-25 12:26

注定没结果-李乐乐

本帖最后由 亚伦影音工作室 于 2024-7-18 15:36 编辑 <br /><br /><style>
#tz { left: 50%; transform: translateX(calc(-50% - 81px)); width: 1200px; height: 700px; overflow: hidden; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
li-zi { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 0%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0,0.36,0,0.14) infinite var(--state);z-index: 2; }

#player { position: absolute; right: 70px; bottom: 280px;mix-blend-mode: screen; width: 160px; height: 160px; 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); } }
#bjbs{animation: rotating 1s linear infinite;width: 1200px; height: 700px;position: z-index: 1;absolute;background:url('https://pic.imgdb.cn/item/666909d8d9c307b7e9e73532.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:90%; left:4%;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>
        <audio id="aud" src="https://songs.boonkiong.com/246238299.mp3" autoplay loop></audio>
        <img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/65165dfcc458853aeff44557.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 = 50).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 = `注定没结果-李乐乐
作词：龙奔
作曲：苗子
出品：王婷婷
出品公司：布丁音乐
「未经许可请勿商业翻唱」
留住你和放下你
我都做不到
想想真的太心酸
已无可救药
命运只是和我
开了个玩笑
而我却用一生
记着你的好
其实我们一开始
就注定没结果
但我还是一样的执著
就算我只是你
生命中的过客
我依然觉得很值得
我们相处的时光
并不算很长
但是却让我毕生难忘
只要你能够偶尔
记住我模样
不枉我痴心爱一场
留住你和放下你
我都做不到
想想真的太心酸
已无可救药
命运只是和我
开了个玩笑
而我却用一生
记着你的好
其实我们一开始
就注定没结果
但我还是一样的执著
就算我只是你
生命中的过客
我依然觉得很值得
我们相处的时光
并不算很长
但是却让我毕生难忘
只要你能够偶尔
记住我模样
不枉我痴心爱一场
其实我们一开始
就注定没结果
但我还是一样的执著
就算我只是你
生命中的过客
我依然觉得很值得
我们相处的时光
并不算很长
但是却让我毕生难忘
只要你能够偶尔
记住我模样
不枉我痴心爱一场
`;
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 >

红影 发表于 2024-6-25 14:23

漂亮，这个把粒子小球变成了小圆圈，像气泡漂浮，歌词色彩也漂亮{:4_199:}

红影 发表于 2024-6-25 14:24

欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-6-25 14:55

亚伦这个粒子我很喜欢的，小圆圆可爱{:4_199:}

小辣椒 发表于 2024-6-25 14:55

配上这个歌词也是漂亮，小辣椒过几天套用玩一个{:4_173:}

小辣椒 发表于 2024-6-25 14:56

谢谢亚伦的精彩分享

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

欣赏佳作，问候亚伦。

查看完整版本: 注定没结果-李乐乐