论坛 › 欢乐水吧 › 精品精品[]完美歌词[]精品精品

亚伦影音工作室 发表于 2025-12-4 08:51

精品精品[]完美歌词[]精品精品

本帖最后由 亚伦影音工作室 于 2026-3-31 23:55 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
        #pa {
                margin: 20px -300px;
                width: 1182px ;
                height: 620px;
                border: 1px solid gray;
                display: grid;overflow: hidden;
                place-items: center;background: url(https://pic1.imgdb.cn/item/692e211611af9ce9c3e936f1.png) no-repeat center/cover;
                position: relative;font-family: "Ma Shan Zheng","华文隶书","SimHei", "Arial", "sans-serif";
        }
zxx-slide {display: block;
z-index: 1;
   width: 100%; height:105%;
    position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
    position: absolute;
   display: none;
}
.zxx-slide-a.in {
    z-index: 1;
}
.zxx-slide-img { position: absolute;
height:100%;width: 100%;
   display: block;}

.zxx-slide-index-x {
    position: absolute;
    left: 0px;bottom: 0px;
    text-align: center;
    font-size: 0;
    z-index: 1;
}

@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
zxx-slide .in {
    -webkit-mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    -webkit-mask-size: 50px;
    mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 50px;
    animation: seed 1s;
}

#player {position:absolute;top: 65%;z-index: 98;
            left: 50%;
width: 150px;
height: 150px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
        #progressBar{width:50%;background:#55aa55;position: absolute;border-radius: 20px;cursor: pointer;top: 92%;z-index: 99;
            left: 30%;}
#playProgressBar{position: relative;left:0;background:ff0000;height:4px;width:100%;border-radius: 20px; cursor: pointer;}
.now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 4px;border-radius: 20px;
      width: 100%; cursor: pointer;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 12px;margin: -4px -2px;
      height: 12px;border-radius: 20px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;position: absolute;
       }
.end{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;right:0px;   position: absolute;}
        #wrapper {
                position: absolute;
                padding: 10px;
                font-weight:300;font-size:3.5em;
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
      width: 100%;left: 50%;transform: translateX(-50%);z-index: 12;text-align: center;
                bottom: 380px;
        }
        .char {
                display: inline-block;
                padding: 0 2px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
        }
        audio { position: absolute; left: 160px; top: 20px; }
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 0);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg);}

        }
        .stop .char{animation-play-state: paused;}
</style>

<div id="pa">
        <audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/64/06/55/1173813b72075fc166c110ce893bdfe3/audio.mp3" loop autoplay></audio>
<zxx-slide>
    <div class="zxx-slide-x">
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e211611af9ce9c3e936f1.png"></p>
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/6930d4a8d5fdcd03ca9d195b.png"></p>
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e224511af9ce9c3e936fa.png"></p>
          </div>
   </zxx-slide>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<divid="progressBar">
<spanclass="start"></span>
<divid="playProgressBar">
<spanclass="now"></span>
</div>
<spanclass="end"></span>
</div>

<div id="testImg" >
<div id="wrapper"></div>
</div>
</div>


<script>
       
const gc = ` 《与你走过的老路》

作词：许玲玲

作曲：许玲玲

演唱：许玲玲

LRC歌词编制：亚伦影音工作室

晚风漫过巷口吹过你的脸

影子跟着脚步 叠了又几圈

你曾把我手 攥在你掌心间

说这条路 要走满岁岁年年

许多年后街景 换了新容颜

可是你不在我的身边

想念总让我在 深夜辗转难眠

是否我们今生注定无缘

想回到那条老路上和你慢慢走

再听你说那句“等我好久”

当风吹过落叶飘满肩头 我才懂

原来最珍贵是你给的细水长流

许多年后街景 换了新容颜

可是你不在我的身边

想念总让我在 深夜辗转难眠

是否我们今生注定无缘

想回到那条老路上和你慢慢走

再听你说那句“等我好久”

当风吹过落叶飘满肩头 我才懂

原来最珍贵是你给的细水长流

就算世界在变 你仍是我的温柔`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      aud.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(aud.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      aud.onended = () => {
                curkey = 0;
                aud.play();
      }

      aud.onseeked = () => calcKey();

      function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                              let result = item.match(reg);
                              let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                              lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
      };

      function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (aud.currentTime <= gcAr) {
                              curkey = j - 1;
                              break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
      }

      function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        span.style.cssText += `
                              color: #${Math.random().toString(10).substring(2,8)};
                              --x: ${x}px;
                              --y: ${y}px;
                              --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
      }
</script>


<script>var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
        var timerSlide = null;
        var indexSlide = 0;
        container.addEventListener('mouseover', function () {
                clearTimeout(timerSlide);
        });
        container.addEventListener('mouseout', function () {
                clearTimeout(timerSlide);
                funSlide();
        });
       
        var eleSlides = [].slice.call(container.querySelectorAll('p'));
        var eleButtons = [].slice.call(container.querySelectorAll('button'));
       
       
        eleButtons.forEach(function (button, index) {
                ['mouseover', 'click'].forEach(function (eventType) {
                        button.addEventListener(eventType, function () {
                                clearTimeout(timerSlide);
                                indexSlide = index;
                                funSlide();
                        });
                });
        });

       
        eleSlides.forEach(function (slide, index) {
                slide.addEventListener('animationend', function () {
                        eleSlides.forEach(function (slide2) {
                                if (slide2.classList.contains('in') == false) {
                                        slide2.style.display = '';
                                }
                        });
                });
        });
       
        var funSlide = function() {
                eleSlides.forEach(function (slide, index) {if(!aud.paused){               
                        if (indexSlide == index) {
                                slide.classList.add('in');
                                slide.style.display = 'block';
                        } else if (slide.classList.contains('in')) {
                                slide.classList.remove('in');
                        }
                }});
                eleButtons.forEach(function (button, index) {
                        button.classList.remove('active');
                        if (indexSlide == index) {
                                button.classList.add('active');
                        }
                });
               
                timerSlide = setTimeout(function () {
                        indexSlide++;
                        if (indexSlide == eleSlides.length) {
                                indexSlide = 0;
                        }
                        funSlide();
                }, 6000);
        }
       
        indexSlide++;

        setTimeout(funSlide, 2000);
});


// Audiotimeupdate
                        aud.addEventListener("timeupdate",function(){
                               
                                ///
                                var percent= aud.currentTime / aud.duration
                               
                                //,*,100%
                                var sp = 600 / 100 ;
                               
                                //width
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
                               
                                //
                                document.getElementById("playProgressBar").style.width = swidth;
                                const now = document.querySelector('.now')//
progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    now.style.width = p.toFixed(3) * 100 + '%'
})

        progressBar.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / progressBar.offsetWidth; }//})
                                //2λС
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
        })                       
                       
                //       
        const start = document.querySelector('.start')
const end = document.querySelector('.end')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
               
console.dir(aud)
image=document.getElementById('testImg');

player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',image.classList.remove('stop')) :( aud.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'));
</script>

偶然~ 发表于 2025-12-4 09:12

来欣赏亚伦影音工作室精品佳作！

偶然~ 发表于 2025-12-4 09:13

音画唯美

偶然~ 发表于 2025-12-4 09:13

背景歌曲动听

偶然~ 发表于 2025-12-4 09:13

制作大气

偶然~ 发表于 2025-12-4 09:13

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~ 发表于 2025-12-4 09:13

期待亚伦影音工作室佳作频出！

偶然~ 发表于 2025-12-4 09:14

愿亚伦影音工作室事事如意吉祥，幸福快乐绵长。

偶然~ 发表于 2025-12-4 09:14

感谢亚伦影音工作室支持花潮论坛，辛苦了，祝您和家人岁岁安康，幸福吉祥！

杨帆 发表于 2025-12-4 13:17

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

查看完整版本: 精品精品[]完美歌词[]精品精品