论坛 › 动画音画 › 红蔷薇 - 走不完的路

亚伦影音工作室 发表于 2025-12-6 12:12

红蔷薇 - 走不完的路

本帖最后由 亚伦影音工作室 于 2025-12-9 19:56 编辑 <br /><br /><style>
        #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/692e1f0e11af9ce9c3e936de.jpg) no-repeat center/cover;
                position: relative;
        }
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: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    -webkit-mask-size: 60px 60px;
    mask: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 60px 60px;
    animation: seed 1s;
}

#player {position:absolute;top: 60%;z-index: 99;
            left: 70%;
width: 300px;
height: 300px;
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);
}

        #wrapper {z-index: 9;
                position: absolute; writing-mode: vertical-lr;white-space: pre; width: 60px;height: 90%;top: 50px; left: 8%;
                padding: 0px;
                font:normal 2.6em 华文隶书;
                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);
      
        }

        .char {
                display: inline-block;
                padding: 2px 2px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards, flash 1s infinite alternate;
        }
       
        @keyframes fadeIn {
                to {
                        transform:scale(1);
                        opacity: 1;
                }
        }
        @keyframes flash {
                to { filter: hue-rotate(360deg)brightness(60%); }
        }

</style>

<div id="pa">
        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/96/ad/79/969030f3e99e465e22e7d73f15a2bb19/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/692e1cd511af9ce9c3e936bc.jpg"></p>
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e1cdf11af9ce9c3e936bd.jpg"></p>
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e1f0e11af9ce9c3e936de.jpg"></p>
      

    </div>
   </zxx-slide>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
        <div id="wrapper">红蔷薇 - 走不完的路</div>



</div>

<script>

        const gc = `红蔷薇 - 走不完的路
出品 亚伦影音工作室
人生就像趟不完的河
无论多少曲折都要过
风一程雨一程艰难跋涉
所有苦累全都埋心窝
人生就像唱不完的歌
酸甜苦辣又能跟谁说
爱一场痛一场历尽苦涩
受过的伤今生难愈合
人的这一生起起落落
不知要面对多少坎坷
走不完的路爬不完的坡
无论多难都不能退缩
人的这一生对对错错
谁能参透这世间因果
流不完的泪受不完寂寞
总有挥之不去的困惑
人生就像唱不完的歌
酸甜苦辣又能跟谁说
爱一场痛一场历尽苦涩
受过的伤今生难愈合
人的这一生起起落落
不知要面对多少坎坷
走不完的路爬不完的坡
无论多难都不能退缩
人的这一生对对错错
谁能参透这世间因果
流不完的泪受不完寂寞
总有挥之不去的困惑
人的这一生起起落落
不知要面对多少坎坷
走不完的路爬不完的坡
无论多难都不能退缩
人的这一生对对错错
谁能参透这世间因果
流不完的泪受不完寂寞
总有挥之不去的困惑
总有挥之不去的困惑
`;

        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 ? -240 : 800);
                        const y = Math.random() * (Math.random() > 0.5 ? -250 : 250);
                        span.style.cssText += `
                                color: #${Math.random().toString(16).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);
});



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

偶然~ 发表于 2025-12-6 15:01

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

偶然~ 发表于 2025-12-6 15:01

制作大气！

偶然~ 发表于 2025-12-6 15:01

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

偶然~ 发表于 2025-12-6 15:01

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

偶然~ 发表于 2025-12-6 15:01

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

偶然~ 发表于 2025-12-6 15:01

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

杨帆 发表于 2025-12-6 20:23

制作精致，视听盛宴，谢谢亚伦老师精彩分享{:4_180:}

亚伦影音工作室 发表于 2025-12-6 21:03

本帖最后由 亚伦影音工作室 于 2025-12-7 07:31 编辑 <br /><br />attach://48121.rar

亚伦影音工作室 发表于 2025-12-7 07:34

本帖最后由 亚伦影音工作室 于 2025-12-7 08:18 编辑

attach://48123.rar

查看完整版本: 红蔷薇 - 走不完的路