醉美水芙蓉 发表于 2023-6-23 20:42

不想再见面 - 吴婉芳

本帖最后由 醉美水芙蓉 于 2023-6-23 20:41 编辑 <br /><br /><style>
#mydiv {
        margin: -40px 0 0 calc(50% - 651px);
        width: 1140px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/64958dad1ddac507cc005f0d.jpg');
        box-shadow: 0 0 8px 0 #000;
        display: grid;
        place-items: center;
        position: relative;
        z-index: 1;
}
#lrc {
        position: absolute;
        width: fit-content;
        height: fit-content;
        top: 5%;
        font: bold 2.4em Sans-serif;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
        white-space: pre;
        display: inherit;
        place-items: inherit;
        user-select: none;
        --state: paused; --motion: cover2; --tt: 2s;
}
#lrc::before, #lrc::after { position: absolute; content: ''; cursor: pointer; }
#lrc::before {
        content: attr(data-lrc);
        width: 100%;
        height: 100%;
        white-space: pre;
        width: 0;
        left: 0;
        color: orange;
        overflow: hidden;
        animation: var(--motion) var(--tt) linear forwards var(--state);
}
#lrc::after {
        width: 50px;
        height: 50px;
        bottom: -60px;
        background: green;
        border-radius: 0%;
        opacity: .7;
        clip-path: polygon(200px 0px, 0px 0px, 0px 50px, 50px 50px, 50px 25px, 35px 25px, 34.9414px 26.0812px, 34.7662px 27.1497px, 34.4765px 28.193px, 34.0758px 29.1989px, 33.5686px 30.1555px, 32.9609px 31.0517px, 32.26px 31.877px, 31.4739px 32.6216px, 30.6119px 33.2769px, 29.6841px 33.8351px, 28.7014px 34.2898px, 27.6753px 34.6355px, 26.6178px 34.8683px, 25.5414px 34.9853px, 24.4586px 34.9853px, 23.3822px 34.8683px, 22.3247px 34.6355px, 21.2986px 34.2898px, 20.3159px 33.8351px, 19.3881px 33.2769px, 18.5261px 32.6216px, 17.74px 31.877px, 17.0391px 31.0517px, 16.4314px 30.1555px, 15.9242px 29.1989px, 15.5235px 28.193px, 15.2338px 27.1497px, 15.0586px 26.0812px, 15px 25px, 15.0586px 23.9188px, 15.2338px 22.8503px, 15.5235px 21.807px, 15.9242px 20.8011px, 16.4314px 19.8445px, 17.0391px 18.9483px, 17.74px 18.123px, 18.5261px 17.3784px, 19.3881px 16.7231px, 20.3159px 16.1649px, 21.2986px 15.7102px, 22.3247px 15.3645px, 23.3822px 15.1317px, 24.4586px 15.0147px, 25.5414px 15.0147px, 26.6178px 15.1317px, 27.6753px 15.3645px, 28.7014px 15.7102px, 29.6841px 16.1649px, 30.6119px 16.7231px, 31.4739px 17.3784px, 32.26px 18.123px, 32.9609px 18.9483px, 33.5686px 19.8445px, 34.0758px 20.8011px, 34.4765px 21.807px, 34.7662px 22.8503px, 34.9414px 23.9188px, 35px 25px, 50px 25px, 50px 0px);

        animation: rot 6s infinite linear var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <div id="lrc" data-lrc="HUACHAO">HUACHAO</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music208567985.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let mKey = 0, mFlag = true, slip = 0;
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;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 (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('seeked', () => calcKey());
        lrc.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-6-23 20:49

漂酿

岩新新 发表于 2023-6-23 21:00

欣赏精彩制作！

醉美水芙蓉 发表于 2023-6-23 21:16

岩新新 发表于 2023-6-23 21:00
欣赏精彩制作！

谢谢老师支持！

醉美水芙蓉 发表于 2023-6-23 21:17

马黑黑 发表于 2023-6-23 20:49
漂酿

黑黑老师晚上好！

红影 发表于 2023-6-23 21:34

水芙蓉美女学得真快，这制作好美啊{:4_199:}

醉美水芙蓉 发表于 2023-6-23 21:45

红影 发表于 2023-6-23 21:34
水芙蓉美女学得真快，这制作好美啊

谢谢红影支持！

马黑黑 发表于 2023-6-23 22:27

醉美水芙蓉 发表于 2023-6-23 21:17
黑黑老师晚上好！

晚上好

梦缘 发表于 2023-6-24 10:31

欣赏精彩佳作，谢谢分享，点赞！{:4_171:}

红影 发表于 2023-6-24 18:30

醉美水芙蓉 发表于 2023-6-23 21:45
谢谢红影支持！

问好水芙蓉，晚上好{:4_187:}
页: [1]
查看完整版本: 不想再见面 - 吴婉芳