雨中悄然 发表于 2023-8-8 19:22

孤勇者

<style>#mydiv {
       margin: 0 0 0 calc(50% - 590px);
        width: 1024px;
        height: 640px;
        background: lightblue url('https://pic2.imgdb.cn/item/6453ac420d2dde5777ff29c8.jpg') no-repeat center/cover;
        position: relative;
                --state: paused;
        box-shadow: 0 0 8px #000;
        z-index: 1;
                overflow: hidden;
}
#vid {
        position: absolute;
        width: 1400px;
        height: 100%;
        border-radius: 3%;
        opacity: .23;
        object-fit: cover;
        pointer-events: none;
               mix-blend-mode: screen;
}

#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;bottom: 20px;transform: translate(-50%);font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-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: DarkSlateGray;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards var(--state);}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style><div id="mydiv"><css-doodle grid="1" id="mplayer">:doodle {@size: 200px;@shape: circle;background: pink url('https://pic2.imgdb.cn/item/6453a9af0d2dde5777fab973.gif') no-repeat center/cover;mix-blend-mode: screen;position: absolute;left: 100px;top: 50px;}@size: 80px;@place: 50%;background: conic-gradient(red, yellow, orange, green, cyan, blue, purple);border-radius: 50%;box-shadow: 0 0 8px #333;cursor: pointer;:hover { box-shadow: 0 0 28px red; }animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }</css-doodle> <div id="lrc" data-lrc="歌词">歌词</div> <video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4cd3d86de5a.mp4" autoplay="" loop="" muted=""></video><audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/01/11/e28cde5d9ea4cdf27b4a17dc55d6d9f9.mp3" autoplay="" loop=""></audio></div><script>(function() {
let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
    let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    aud.addEventListener('play', mState, false);
    aud.addEventListener('pause', mState, false);
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    aud.addEventListener('seeked', () => calcKey());
    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');mydiv.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 (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
        document.head.appendChild(script);

})();</script>

雨中悄然 发表于 2023-8-8 19:24

很喜欢的一首歌，发来听听。。

巫荣云师 发表于 2023-8-8 20:02

欣赏收藏老师的佳作《孤勇者》，唯美的制作！我醉了！问好点赞!

久久. 发表于 2023-8-8 21:29

雨中悄然晚上好！{:1_292:}

久久. 发表于 2023-8-8 21:30

帖子制作的漂亮 音乐好听

久久. 发表于 2023-8-8 21:30

谢谢分享 支持点赞{:1_293:}

蓝魔 发表于 2023-8-8 21:37

欣赏一下，谢谢。

容轩听雨 发表于 2023-8-8 21:59

嵌入的火焰视频，让画面炽热灵动，LRC编辑合拍，歌曲寄怀，赞，问好！立秋日快乐！

雨中悄然 发表于 2023-8-9 10:49

容轩听雨 发表于 2023-8-8 21:59
嵌入的火焰视频，让画面炽热灵动，LRC编辑合拍，歌曲寄怀，赞，问好！立秋日快乐！

感谢支持鼓励！

雨中悄然 发表于 2023-8-9 10:50

蓝魔 发表于 2023-8-8 21:37
欣赏一下，谢谢。

谢谢蓝魔临贴支持{:1_292:}
页: [1] 2
查看完整版本: 孤勇者