醉美水芙蓉 发表于 2023-5-10 21:57

跟学一个《月光酿做酒》

本帖最后由 醉美水芙蓉 于 2023-5-10 21:57 编辑 <br /><br /><style>
#papa {
        margin: 80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/56f840d76121df0c5c9665215f39f55f_preview.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle { position: absolute; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); bottom: 6px; font: bold 2.4em sans-serif; color: hsl(188, 100%, 50%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); z-index: 99; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(5, 100%, 14%, .45), hsla(15, 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%; } }
.mypic { position: absolute;left: 0px;bottom: 0px;}
</style>

<div id="papa">
       <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
        <css-doodle grid="6" id="mplayer">
                :doodle {
                        @size: 100px;
                        @shape: circle;
                        right: 60px;
                        top: 60px;
                        cursor: pointer;
                        z-index: 2;
                        background: snow url('https://pic2.imgdb.cn/item/63e25cd14757feff33b945d9.gif') no-repeat center/cover;
                        animation: rot 6s infinite linear forwards var(--state);
                }
                @keyframes rot { to { transform: rotate(360deg); } }
        </css-doodle>
        <css-doodle grid="20">
                :doodle {
                        @size: 1024px 640px;
                }
                position: absolute;
                left: @r(100)%;
                top: -20%;
                :after {
                        position: absolute;
                        content: '@p(✿,❁,❀,&#128174;,&#127802;)';
                        color: snow;
                        font-size: @r(3, 30)px;
                }
                animation: fall @r(25,50)s @r(-20, 20)s infinite var(--state);
                @keyframes fall {
                        0% { top: -20%; transform: rotate(0deg); }
                        100% {top: 120%; transform: rotate(@p(360, 720)deg); }
                }
        </css-doodle>
        <audio id="aud" src="https://www.qqmc.com/mp3/music238772342.mp3" autoplay loop></audio>
<img class="mypic" src="https://pic2.imgdb.cn/item/645b550c0d2dde57776b9c6b.png" alt="" />
</div>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
        document.head.appendChild(script);
let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), papa.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), papa.style.setProperty('--state', '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');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('play', mState, false);
        aud.addEventListener('pause', mState, false);
       aud.addEventListener('seeked', () => calcKey());
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

起个网名好难 发表于 2023-5-10 21:59

欣赏佳作， 晚上好！

亦是金 发表于 2023-5-10 22:08

欣赏美帖！问好醉美水芙蓉{:4_187:}！

红影 发表于 2023-5-10 22:12

房间里有落花缤纷也很漂亮呢，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-10 22:57

起个网名好难 发表于 2023-5-10 21:59
欣赏佳作， 晚上好！

老师晚上好！

醉美水芙蓉 发表于 2023-5-10 22:57

亦是金 发表于 2023-5-10 22:08
欣赏美帖！问好醉美水芙蓉！

谢谢老师支持！

醉美水芙蓉 发表于 2023-5-10 22:58

红影 发表于 2023-5-10 22:12
房间里有落花缤纷也很漂亮呢，欣赏水芙蓉好帖

借用你的美女学习一下！

焱鑫磊 发表于 2023-5-10 23:54

欣赏！{:4_204:}{:4_204:}{:4_204:}

醉美水芙蓉 发表于 2023-5-11 05:52

焱鑫磊 发表于 2023-5-10 23:54
欣赏！

谢谢朋友支持！

亚伦影音工作室 发表于 2023-5-11 12:08

花落遇落花
人美赛美人

论坛朋友接龙。。。

红影 发表于 2023-5-11 14:15

醉美水芙蓉 发表于 2023-5-10 22:58
借用你的美女学习一下！

嗯嗯，看到了。放在这里还挺好看的呢{:4_187:}

醉美水芙蓉 发表于 2023-5-11 17:04

亚伦影音工作室 发表于 2023-5-11 12:08
花落遇落花
人美赛美人



谢谢老师点评支持！

梦缘 发表于 2023-5-11 21:25

真漂亮，欣赏点赞！{:4_204:}

醉美水芙蓉 发表于 2023-5-11 21:54

梦缘 发表于 2023-5-11 21:25
真漂亮，欣赏点赞！

谢谢朋友支持！
页: [1]
查看完整版本: 跟学一个《月光酿做酒》