论坛 › 祝福礼堂 › 红影美女生日快乐！

冬天的雨 发表于 2024-1-7 00:00

红影美女生日快乐！

<style>
#papa {
        margin: 120px 0 0 calc(50% - 781px);
        width: 1400px;
        height: 788px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://pic.imgdb.cn/item/65997056871b83018a677d44.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#player {
        position: absolute; z-index: 2;
        left: 780px;
        top: 50px;
        width: 580px;
        height: 580px;
        cursor: pointer;
        animation: rotating 6s infinite alternate linear var(--state);
}
li-zi {
        position: absolute;
        width: 36px;
        height: 39px;
       
        background: navy;
        opacity: 1;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
        position: absolute;
        top: -0px;
        width: 100%;
        height: 120%;
        opacity: .30;
        mix-blend-mode: screen;
        object-fit: cover;
        pointer-events: none;
}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 75%; transform: translate(-50%); top: 90%; font: bold 2.2em sans-serif; color: hsl(300, 100%, 100%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(0, 100%, 50%, .45), hsla(32, 100%, 66%, .6), hsla(60, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes moving {
        from { transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); }
        to { transform: translate(var(--x1),var(--y1)) rotate(var(--deg)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b491dd2b9164_10s_big.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=388763.mp3" autoplay loop></audio>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>       
<div id="player" title="播放/暂停"></div>
</div>

<script>

(function() {
let vid = document.querySelector('#vid');
let r = player.offsetWidth / 2 - 18, total = 15;
Array.from({length: total}).forEach((item,key) => {
        let rad0 = (Math.PI / 180) * 360 / total * key,
                rad1 = (Math.PI / 180) * (180 + (360 / total * key));
        item = document.createElement('li-zi');
        item.style.cssText += `
                --x0: ${r + r * Math.cos(rad0)}px;
                --y0: ${r + r * Math.sin(rad0)}px;
                --x1: ${r + r * Math.cos(rad1)}px;
                --y1: ${r + r * Math.sin(rad1)}px;
        --deg: ${360 / total * key}deg;
                --duration: ${4 + Math.random() * 6}s;
                --delay: -${Math.random() * 8}s;
                background: url('https://pic.imgdb.cn/item/659970da871b83018a6a166f.png') no-repeat center/cover;
        `;
        player.appendChild(item);
});
let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,       
       
];
let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), lrc.style.setProperty('--state', 'paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), lrc.style.setProperty('--state', 'running'), vid.play());
};
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');lrc.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;}}});

aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
player.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

小辣椒 发表于 2024-1-7 00:03

刚一个尺寸错误了，你运气，给你占了

冬天的雨 发表于 2024-1-7 00:04

小辣椒 发表于 2024-1-7 00:03
刚一个尺寸错误了，你运气，给你占了

我等你的，看你没有发我就赶紧掐时间发了

小辣椒 发表于 2024-1-7 00:05

冬天的雨 发表于 2024-1-7 00:04
我等你的，看你没有发我就赶紧掐时间发了

郁闷，一个尺寸出来不对，看了一下迟了

冬天的雨 发表于 2024-1-7 00:08

小辣椒 发表于 2024-1-7 00:05
郁闷，一个尺寸出来不对，看了一下迟了

别郁闷，早点下了去休息{:4_197:}{:4_185:}

冬天的雨 发表于 2024-1-7 00:10

美女，冬雨就这么点技术，再漂亮也是做不出来的，笑纳笑纳 {:4_170:}祝生日快乐!{:4_187:}

红影 发表于 2024-1-7 00:11

准点的祝福，生日正日子里最早的祝福，太感动了，谢谢冬雨{:4_187:}

小辣椒 发表于 2024-1-7 00:13

冬雨这个是正日子吃蛋糕的节奏{:4_170:}

红影 发表于 2024-1-7 00:13

我用手机看的，屏幕横过来缩小一下，正好充满。这个太美了{:4_199:}

小辣椒 发表于 2024-1-7 00:14

红影 发表于 2024-1-7 00:11
准点的祝福，生日正日子里最早的祝福，太感动了，谢谢冬雨

啊，亲爱的在啊，生日快乐！{:4_179:}

冬天的雨 发表于 2024-1-7 00:15

小辣椒 发表于 2024-1-7 00:13
冬雨这个是正日子吃蛋糕的节奏

准备下，太迟了，明天见{:4_179:}

冬天的雨 发表于 2024-1-7 00:16

红影 发表于 2024-1-7 00:13
我用手机看的，屏幕横过来缩小一下，正好充满。这个太美了

美女生日快乐，可以睡觉了。

明天见！

红影 发表于 2024-1-7 00:16

小辣椒 发表于 2024-1-7 00:05
郁闷，一个尺寸出来不对，看了一下迟了

亲爱的，你俩商量着在掐点发送祝福啊，你还没全好啊，还弄到这么晚。都不知道说什么好了，抱抱{:4_179:}

小辣椒 发表于 2024-1-7 00:18

红影 发表于 2024-1-7 00:16
亲爱的，你俩商量着在掐点发送祝福啊，你还没全好啊，还弄到这么晚。都不知道说什么好了，抱抱

亲爱的，明天再欣赏了，准备下了{:4_179:}

红影 发表于 2024-1-7 00:19

谢谢冬小雨，谢谢小辣椒，这份情义记在心中{:4_187:}{:4_187:}

大猫咪 发表于 2024-1-7 00:23

冬天也是在，哈哈，一起给红影贺生辰{:4_187:}

辫子哥哥 发表于 2024-1-7 00:33

还有冬雨在，难怪小辣椒这么迟还没有睡觉{:4_397:}

樵歌 发表于 2024-1-7 07:48

准点在正日子送，这份心意可是特别意义。
正好要早餐了，就把蛋糕分一大砣了{:4_189:}

樵歌 发表于 2024-1-7 07:49

小辣椒 发表于 2024-1-7 00:03
刚一个尺寸错误了，你运气，给你占了

你俩恰着点儿竞赛谁先谁后吗{:4_196:}

红影 发表于 2024-1-7 09:46

冬天的雨 发表于 2024-1-7 00:16
美女生日快乐，可以睡觉了。

明天见！

谢谢冬小雨，太开心了{:4_177:}

查看完整版本: 红影美女生日快乐！