醉美水芙蓉 发表于 2023-5-23 23:08

如果你一贫如洗

<style>
    #papa {margin: 20px 0 0 calc(50% - 593px);width: 1115px;height: 640px;background: tan url('https://pic1.imgdb.cn/item/646cd63b0d2dde57770e7e8e.png');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;--state: paused;}
    css-doodle{position: absolute;}
    </style>
<div id="papa">
</css-doodle>
<css-doodle grid="6x1" id="mplayer">
        :doodle {
               
                @grid: 4 / 1115px 640px;
                z-index: 1;
        }
                @size: @r(50,150)px;
        position: absolute;
        background: linear-gradient(@m3(rgb(@m3(@r(255)))));
        clip-path: @shape(
                points: 300;
                turn: 2;
                frame: 2;
                scale: .5;
                r: seq(.85, 10, .85);
        );
        border-radius: 50%;
        cursor: pointer;
        offset-path: path('M200 100 Q500 400 900 100');
        offset-distance: calc((@i - 1) * 20%);
        animation: rot 8s infinite linear var(--state);
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<css-doodle id="lrc">
                  :doodle {
                            @size: auto 4em;
                            bottom: 10px;
                            --geci: "css-doodle player"; --motion: cover2; --tt: 1s;
                  }
                  /* 单元格两个伪元素显示lrc歌词 */
                  display: grid;
                  place-items: center start;
                  :before, :after {
                            content: var(--geci);
                            color: gray; /* 歌词底色 */
                            font: bold 2em sans-serif;
                            text-shadow: 1px 1px 2px #000;
                            white-space: pre;
                     }
                  :after {
                            position: absolute;
                            width: 0;
                            color: darkgreen; /* 同步歌词颜色 */
                            overflow: hidden;
                            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%; } }
            </css-doodle>
<audio id="aud" src="https://www.qqmc.com/mp3/music277192354.mp3" autoplay loop></audio></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 slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
         let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

            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);};
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
            let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
            aud.addEventListener('play', mState, false);
            aud.addEventListener('pause', mState, false);

            aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    })();
    </script>

梦缘 发表于 2023-5-24 11:00

欣赏老师的精彩，好听。{:4_187:}

焱鑫磊 发表于 2023-5-23 23:52

欣赏！{:4_187:}

起个网名好难 发表于 2023-5-24 08:03

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

红影 发表于 2023-5-24 09:46

这制作真漂亮，歌词同步也做得很好。欣赏水芙蓉好帖{:4_187:}

红影 发表于 2023-5-24 09:52

怎么感觉转动有点不同，尤其最后的那个，好像色彩其他的都不同？

醉美水芙蓉 发表于 2023-5-24 11:48

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

谢谢朋友光临！

醉美水芙蓉 发表于 2023-5-24 11:49

起个网名好难 发表于 2023-5-24 08:03


谢谢老师光临！

醉美水芙蓉 发表于 2023-5-24 11:49

红影 发表于 2023-5-24 09:46
这制作真漂亮，歌词同步也做得很好。欣赏水芙蓉好帖

谢谢红影美女支持！

醉美水芙蓉 发表于 2023-5-24 11:50

梦缘 发表于 2023-5-24 11:00
欣赏老师的精彩，好听。

谢谢老师支持！

南无月 发表于 2023-5-24 18:06

背景选得漂亮，加了歌词很完美，厉害{:4_187:}

红影 发表于 2023-5-24 18:39

醉美水芙蓉 发表于 2023-5-24 11:49
谢谢红影美女支持！

问好水芙蓉美女，再赏好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-24 20:41

南无月 发表于 2023-5-24 18:06
背景选得漂亮，加了歌词很完美，厉害

我是跟你学的呢？瞎猫碰上死耗子蒙对了！做了半天呢！

南无月 发表于 2023-5-24 21:47

醉美水芙蓉 发表于 2023-5-24 20:41
我是跟你学的呢？瞎猫碰上死耗子蒙对了！做了半天呢！

我也是这么蒙出来的。握手{:5_108:}

醉美水芙蓉 发表于 2023-5-24 22:01

南无月 发表于 2023-5-24 21:47
我也是这么蒙出来的。握手

我感觉你懂得比较多，做一个是一个，得心应手！

南无月 发表于 2023-5-24 22:02

醉美水芙蓉 发表于 2023-5-24 22:01
我感觉你懂得比较多，做一个是一个，得心应手！

{:4_173:}用成贴套的。你刚发的那个贴子问关联，我也发一个给你瞧瞧。有歌词关联的，对比看看。

南无月 发表于 2023-5-24 22:47

南无月 发表于 2023-5-24 22:02
用成贴套的。你刚发的那个贴子问关联，我也发一个给你瞧瞧。有歌词关联的，对比看看。

哎呀没看清，乱回复了。这句我收回了哈，你当没看到。{:4_173:}
页: [1]
查看完整版本: 如果你一贫如洗