论坛 › 音乐沙龙 › 《好人多》 - 斯兰

杨帆 发表于 2025-6-5 17:00

《好人多》 - 斯兰

本帖最后由 杨帆 于 2025-6-5 20:38 编辑 <br /><br /> <style>
#papa {
        margin: 30px 0 30px calc(50% - 781px);
        width: 1400px;
        height: 750px;
        background: url('https://s4.ax1x.com/2022/03/05/bwbPNq.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 16px #00000080;
      overflow: hidden;
        position: relative;
      z-index: 1;
}
#bt {color:#99ff00;
            position: absolute;
            left: 20%;
            top: 86%;
            font-size: 40px;
            font-family: 华文行楷;
            z-index: 1;
            animation: yd 20s linear infinite var(--state);
            filter: drop-shadow(#ffffff 1px 0 0)
                  drop-shadow(#ffffff 0 1px 0)
                  drop-shadow(#ffffff -1px 0 0)
                  drop-shadow(#ffffff 0 -1px 0);
      }
      @keyframes yd {
            50% {
                opacity: 1;
                left: 55%;
            }
      }
.lrc {
            position: absolute;
            top: 5%;
            left: 5%;
            width: 540px;
            height: 235px;
            overflow: hidden;
            z-index: 15;
            border-radius: 8px;
            padding: 10px;
      }
   .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }
      .lrc #ul li {   
            color:#fff;
            font: bold 1.6em 'YouYuan', sans-serif;
            transition: .3s all ease;
            text-align: center;
            height: 50px;
            line-height: 45px;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight:666;
      }
   .lrc #ul li.active {
            transform: scale(1.2);
            color: #33FF33;
            font-weight: 650;
      }      
#player {
        position: absolute;
        width: 130px;
        height: 130px;
        left: calc(50% - 680px);
        top: calc(50% + 230px);
        cursor: pointer;
        display: grid;
        place-items: center;
        z-index:10;
        filter: drop-shadow(1px 1px 0 #000);
        animation: rot linear 10s infinite var(--state);
}
#player::before {
        position: absolute;
        content: '';
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: plum;
}
#player:hover {
       transform:scale(1.1,1.1); filter: invert(.8);
}
@keyframes rot { to { transform: rotate(360deg); } }
#vid1 {position: absolute;width: 100%; height: 100%;mix-blend-mode:screen;left:-50px;opacity: .5; -webkit-mask: linear-gradient(to right top, red 85%, transparent 5%, transparent);
}
#vid2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: calc(100% + 65px);
        object-fit: cover;
        -webkit-mask: linear-gradient(200deg, red 70%, transparent 75%, transparent);
}
.photo {
      width: 500px;
      height: 300px;
      position: absolute;
      top:30px;
      left:650px;
      z-index:1;
      filter:contrast(120%)brightness(100%);
      -webkit-mask-image: radial-gradient(black 30% ,transparent 75%);
      animation: round 64s infinite var(--state);
      opacity: 0;
}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,-100%)scale(0);}
5% {
opacity: 1;
transform:translate(0%,-100%)scale(0);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,100%)scale(1);}
}
img:nth-child(8) {animation-delay: 56s;}
img:nth-child(7) {animation-delay: 48s;}
img:nth-child(6) {animation-delay: 40s;}
img:nth-child(5) {animation-delay: 32s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 16s;}
img:nth-child(2) {animation-delay: 8s;}
img:nth-child(1) {animation-delay: 0s;}
.clover { position: absolute; top: -100px; width: 100px; height: 100px; outline: 0; border: 0; background: green; opacity: .7; animation: up 20s var(--delay) infinite linear var(--state); }
@keyframes up { to { transform: rotate(var(--deg)) translateY(1200px) rotate(2turn); } }
</style>
<div id="papa">       
        <audio id="aud" src="https://cccimg.com/view.php/865fe2862f51e17527a9d8e6a9af86c6.mp3" autoplay loop></audio>
<video id="vid1" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.mp4" loop muted autoplay=""></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/19287209/00/14/63/5e58bbdc51116.mp4" autoplay loop muted></video>
        <svg id="bsvg" width="1400" height="750">
                <rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="#60949090" stroke-width="8" stroke-dasharray="8 4">
                        <animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
                </rect>
        </svg>       
    <div id="bt"><div id="klok">好人多 - 斯兰</div></div>
    <div class="lrc">
            <ul id="ul"></ul></div>
        <div id="player"></div>
<img alt="" class="photo"src="https://pic1.imgdb.cn/item/683fe7f258cb8da5c82b3f0f.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/683fe80c58cb8da5c82b4098.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/683fe82058cb8da5c82b4292.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/683fe83258cb8da5c82b435e.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/683fe84558cb8da5c82b44f3.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/683fe85658cb8da5c82b46c5.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/683fe86658cb8da5c82b4850.jpg" />
<img alt="" class="photo"
src="https://pic1.imgdb.cn/item/683fe7f258cb8da5c82b3f0f.jpg" /></div>
<script>
             const lrcText = `好人多 - 斯兰
词：许冬子
曲：徐代泉
冰封大地时

太阳最暖和

雪中送盆炭
化作一团火

漫漫长夜里
彼此手牵手

蓝蓝天空下
还是好人多

久旱逢甘霖

洒下爱的歌

雨中送把伞
笑意满心窝

一方困难时
八方汇真情

看看这世界
还是好人多

好人是岁月间 芬芳的记忆

好人是菩提花 甜蜜的寄托
好人是
山水间永恒的新绿

好人是
星空下不老的传说

好人是岁月间 芬芳的记忆

好人是菩提花 甜蜜的寄托

好人是
山水间永恒的新绿

好人是
星空下不老的传说

好人多啊 好人多

好人有你有他也有我

好人多啊 好人多啊

好人 是你是他也是我

好人 是你是他也是我

好人多
`;
      const lrcArr = lrcText.split('\n').filter(line => line.trim() !== '');
      const doms = {
            audio: document.querySelector("#aud"),
            ul: document.querySelector("#ul"),
            container: document.querySelector(".lrc")
      };

      function parseTime(timeStr) {
            const = timeStr.split(':');
            const = secMs.split('.').map(Number);
            return min * 60 + sec + ms / 1000;
      }

      const lyricList = lrcArr.map(line => {
            const = line.split(']');
            const time = parseTime(timePart.slice(1));
            return { time, text: text || '' };
      });

      function createLyricElements() {
            const frag = document.createDocumentFragment();
            lyricList.forEach(({ text }) => {
                const li = document.createElement('li');
                li.textContent = text;
                frag.appendChild(li);
            });
            doms.ul.appendChild(frag);
      }
      createLyricElements();

      let containerHeight = doms.container.clientHeight;
      let liHeight = doms.ul.children?.clientHeight || 50;
      function updateLyric() {
            const currentTime = doms.audio.currentTime;
            let currentIndex = lyricList.findIndex(({ time }, index) => {
                const nextTime = lyricList?.time || Infinity;
                return currentTime >= time && currentTime < nextTime;
            });

            if (currentIndex === -1) currentIndex = lyricList.length - 1;

            const offset = currentIndex * liHeight - (containerHeight - liHeight) / 2;
            doms.ul.style.transform = `translateY(-${Math.max(0, Math.min(offset, doms.ul.clientHeight - containerHeight))}px)`;

            const activeLi = doms.ul.querySelector('.active');
            if (activeLi) activeLi.classList.remove('active');
            const currentLi = doms.ul.children;
            if (currentLi) currentLi.classList.add('active');
      }

      doms.audio.addEventListener('timeupdate', updateLyric);
      doms.audio.addEventListener('loadedmetadata', () => {
            containerHeight = doms.container.clientHeight;
            liHeight = doms.ul.children.clientHeight;
      });

mState = () => {
    papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
    player.title = aud.paused ? '点击播放' : '点击暂停';
    aud.paused ? (vid1.pause(), vid2.pause()) : (vid1.play(), vid2.play());
}

mkParticles = (circles, columns, target) => {
        let size = Math.floor(target.clientWidth / 2 / circles - 10);
        for(let i = 0; i < circles; i ++) {
                let distance = i * (size + 5) + size + 10;
                for(let k = 0; k < columns; k ++) {
                        let angle =360 / columns * k;
                        let span = document.createElement('span');
                        span.style.cssText += `
                                position: absolute;
                                width: ${size}px;
                                height: ${size}px;
                                background: #${Math.random().toString(16).substring(2,8)};
                                border-radius: 100% 80%;
                                transform: rotate(${angle}deg) translate(${distance}px);
                        `;
                        target.appendChild(span);
                }
        }
};

aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? (aud.play(), vid1.play(), vid2.play()): (aud.pause(),vid1.pause(),vid2.pause());
mkParticles(4,9,player);

const papa = document.querySelector('#papa');
(function() {
Array.from({ length: 36 }).forEach(() => {
    let ww = 50 + Math.floor(Math.random() * 50);
    let ar = ;
    let item = document.createElement('span');
    item.className = 'clover';
    item.style.cssText += `
      --deg: ${80 - Math.random() * 140}deg;
      --delay: ${Math.random() * 10 - 20}s;
      width: ${ww}px;
      height: ${ww}px;
      left: ${30 + Math.random() * 40}%;
    `;
    papa.appendChild(item);
    item.style.clipPath = mkClover(item, ar);
});

function mkClover(ele, num) {
    let r = ele.offsetWidth / 2, pathAr = [];
    for (let i = 0; i < 200; i++) {
      let angle = i * 2 * Math.PI / 200;
      let x = r - r * Math.sin(num * angle) * Math.cos(angle);
      let y = r - r * Math.sin(num * angle) * Math.sin(angle);
      pathAr.push(x + 'px ' + y + 'px');
    }
    return 'polygon(' + pathAr.join(', ') + ')';
}
})();

</script>

马黑黑 发表于 2025-6-5 20:15

{:4_174:}

杨帆 发表于 2025-6-5 20:42

马黑黑 发表于 2025-6-5 20:15


感恩老师教导，感谢老师鼓励，请多多指教{:4_190:}

红影 发表于 2025-6-5 20:48

这么多小花瓣，还有荷花图和柳树的飘拂。
这个还能一键全控的。欣赏杨帆好帖{:4_187:}

杨帆 发表于 2025-6-5 22:30

红影 发表于 2025-6-5 20:48
这么多小花瓣，还有荷花图和柳树的飘拂。
这个还能一键全控的。欣赏杨帆好帖

谢谢影子观赏、雅评与鼓励{:4_204:}

梦江南 发表于 2025-6-6 11:50

欣赏精彩的音画，歌曲好听。学习了！{:4_187:}

杨帆 发表于 2025-6-6 12:00

梦江南 发表于 2025-6-6 11:50
欣赏精彩的音画，歌曲好听。学习了！

谢谢江南观赏、雅评与鼓励{:4_204:}

查看完整版本: 《好人多》 - 斯兰