小辣椒 发表于 2023-4-18 21:18

殇雪 TO：队长生日快乐！(4月21号）


<style>
#papa {
        margin:150px 0 0 calc(50% - 720px);
        width:1278px;
        height: 670px;
        border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
        background: url('https://wj1.zp68.com:812/lxx/yunhua/2022/12/06/xF.gif') center/cover no-repeat;
        box-shadow: 3px 8px 20px rgba(0,0,0,.6);
        position: relative;
        display:grid;
        overflow: hidden;
        place-items: center;
    --state: paused;
    animation: hue 10s infinite alternate var(--state);
}
#mplayer {position: absolute;width: 120px;height: 120px; right: 188px;top: 44px;;cursor: pointer;transform-style: preserve-3d;}
.line {position: absolute;width: 1px;height: 100%;transform-style: preserve-3d;}

#lrc {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translate(-50%);
    height: 50px;
    font: bold 40px/50px sans-serif;
    background: transparent;
    color:Thistle ;
    display: grid;
    place-items: center start;
    pointer-events: none;
    --motion: cover2;
    --tt: 1s;
}

#lrc::before,
#lrc::after {
    position: absolute;
    content: '';
}

#lrc::before {
    content: attr(data-lrc);
    width: 0%;
    height: 100%;
    color: Purple;
    white-space: pre;
    overflow: hidden;
    animation: var(--motion) var(--tt) linear forwards var(--state);
}

#lrc::after {
    width: 100px;
    height: 100px;
    left: -100px;
    border-radius: 50%;
    background:center/cover no-repeat;
    cursor: pointer;
    pointer-events: auto;
    animation: rot 4s infinite linear var(--state);
}


#dt{ position: absolute; width: 40px; height: 153px; top: 100px; left: 952px; }
#dt1{ position: absolute; width: 110px; height: 125px; top: 500px; left: 150px; }


@keyframes cover1 {
    to {
      width: 100%;
    }
}

@keyframes cover2 {
    to {
      width: 100%;
    }
}
@keyframes rot {
    to {
      transform: rotate(360deg);
    }
}
@keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
@keyframes hue {
      to { filter: hue-rotate(360deg); }

</style>

<div id="papa">

<img id="dt" src="https://pic.imgdb.cn/item/643e1dde0d2dde57773b20c5.png" alt="" />
       <img id="dt1" src="https://wj1.zp68.com:812/lxx/yunhua/2022/11/13/xrh.png" alt="" />


      <div id="mplayer"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div> </video>
</div>
<audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2022/12/06/001.mp3" autoplay loop></audio>

<script>
let total = 60, spans = [];
let mKey = 0, mFlag = true;
let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
Array.from({length: 64}).forEach( (item,key) => {
      let sp = document.createElement('span');
      sp.className = 'line';
      sp.style.cssText += `
                --sy: ${Math.random() * 720 - 360}deg;
                --sz: ${Math.random() * 720 - 360}deg;
                background: rgba(${Math.random() * 50}, ${Math.random() * 255}, ${Math.random() * 50}, .8);
                transform: rotateY(var(--sy)) rotateZ(var(--sz));
                animation: rot 30s linear infinite var(--state);
      `;
      mplayer.appendChild(sp);
});

mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

小辣椒 发表于 2023-4-18 21:20

@加林森

队长生日快乐·····无论收不收礼都没关系，只是小辣椒的心意，祝福队长生日快乐！健康长寿！

小辣椒 发表于 2023-4-18 21:23

@悄然

抄个作业，最近没有时间玩，图歌曲都是以前的 现成的，只是现在加了个宝塔，把播放器修改了一下位置和尺寸，其他都是你的{:4_170:}

小辣椒 发表于 2023-4-18 21:24

@马黑黑
谢谢黑黑的教程分享，你的源码我也是练习做了一个，只是图没有做好，暂时不发了

顾-念 发表于 2023-4-18 21:27

小辣椒 总是很细心温暖，帖子好看 给你点赞！

小辣椒 发表于 2023-4-18 21:29

顾-念 发表于 2023-4-18 21:27
小辣椒 总是很细心温暖，帖子好看 给你点赞！

谢谢暖男，我怕后面几天没有时间上来，先送礼了

千羽 发表于 2023-4-18 21:31

挺美的，变色代码加上就更美了，播放器缩小了，放那好正{:4_187:}

千羽 发表于 2023-4-18 21:32

同贺队长生日快乐，健康快乐{:4_187:}

马黑黑 发表于 2023-4-18 22:59

创意挺好

红影 发表于 2023-4-18 23:16

亲爱的把播放器放在了塔上，真漂亮，变色背景也好美。借帖同祝队长生日快乐{:5_166:}{:4_187:}

梦油 发表于 2023-4-19 09:16

借小辣椒朋友精美贺帖，祝福队长生日快乐、身体健康。俺时时在想念你。

亦是金 发表于 2023-4-19 10:59

祝队长生日快乐！{:4_187:}帖子精美！欣赏！问好小辣椒！{:4_204:}

樵歌 发表于 2023-4-19 15:40

各种美丽元素都揉合在一起，让人不开心都对不起这帖子{:4_187:}
祝队长生日快乐，平安吉祥。

梦缘 发表于 2023-4-19 20:00

借老师的帖祝福队长生日快乐！健康长寿！{:5_166:}{:4_177:}

亚伦影音工作室 发表于 2023-4-19 20:25

这个音画有特色！

风信子 发表于 2023-4-19 22:17

祝福队长生日快乐！健康长寿！

{:4_204:}{:4_199:}

辫子哥哥 发表于 2023-4-21 12:00

祝队长生日快乐！{:4_177:}

加林森 发表于 2023-4-21 17:00

小辣椒 发表于 2023-4-18 21:20
@加林森

队长生日快乐·····无论收不收礼都没关系，只是小辣椒的心意，祝福队长生日快乐！健康长寿 ...

谢谢小辣椒。我今天终于出院了。今天的生日真快乐！{:4_171:}{:4_191:}{:4_179:}

加林森 发表于 2023-4-21 17:02

千羽 发表于 2023-4-18 21:32
同贺队长生日快乐，健康快乐

谢谢千羽。大家快乐！{:4_171:}{:4_191:}

加林森 发表于 2023-4-21 17:03

红影 发表于 2023-4-18 23:16
亲爱的把播放器放在了塔上，真漂亮，变色背景也好美。借帖同祝队长生日快乐

谢谢红影。大家快乐！{:4_204:}{:4_191:}
页: [1] 2
查看完整版本: 殇雪 TO：队长生日快乐！(4月21号）