醉美水芙蓉 发表于 2023-5-14 21:04

妈妈说

本帖最后由 醉美水芙蓉 于 2023-5-14 21:04 编辑 <br /><br /><style>
    #papa {margin: -50px 0 0 calc(50% -593px);width: 1120px;height: 746px;background: tan url('https://pic2.imgdb.cn/item/6460d8b90d2dde577738ef45.jpg');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 id="mplayer">
        :doodle {
                @grid: 4 / 1120px 746px;
                z-index: 1;
        }
        @size: @r(40,100)px;
      @place: @r(5,90)% @r(5,20)%;
      background: rgba(@m3(@r(255)), @r(.6,.9));
      clip-path: @shape(
                points: 360;
                r: abs.sin.tan(sin(1.5t)*1.14);
      );
      @nth(@size) {
                @size: 160px;
                @place: center;
                cursor: pointer;
      }
      animation: rot @r(3,6)s infinite linear var(--state);
      @keyframes rot {to {transform: rotate(@p(-360,360)deg); } }
</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/up/kwlink.php?id=275823319&.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-14 21:10

欣赏佳作，晚上好！

醉美水芙蓉 发表于 2023-5-14 21:19

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

老师晚上好！谢谢支持！

红影 发表于 2023-5-14 21:39

这个做得漂亮。欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-14 21:43

红影 发表于 2023-5-14 21:39
这个做得漂亮。欣赏水芙蓉美女好帖

红影美女晚上好！

马黑黑 发表于 2023-5-14 22:04

妈妈说没分了{:4_170:}

红影 发表于 2023-5-14 22:30

醉美水芙蓉 发表于 2023-5-14 21:43
红影美女晚上好！

问好水芙蓉美女，晚上好{:4_187:}

醉美水芙蓉 发表于 2023-5-14 22:48

马黑黑 发表于 2023-5-14 22:04
妈妈说没分了

谢谢黑黑老师光临！

马黑黑 发表于 2023-5-14 23:11

醉美水芙蓉 发表于 2023-5-14 22:48
谢谢黑黑老师光临！

{:4_190:}

樵歌 发表于 2023-5-15 08:51

做得真是应景儿。听口音是南方银{:4_189:}

亦是金 发表于 2023-5-15 09:31

问好！欣赏佳作！{:4_187:}

醉美水芙蓉 发表于 2023-5-15 11:42

樵歌 发表于 2023-5-15 08:51
做得真是应景儿。听口音是南方银

谢谢樵歌点评！

醉美水芙蓉 发表于 2023-5-15 11:43

亦是金 发表于 2023-5-15 09:31
问好！欣赏佳作！

问候老师中午好！

梦缘 发表于 2023-5-16 10:20

美帖，好看好听，欣赏问好！{:4_176:}

醉美水芙蓉 发表于 2023-5-16 11:43

梦缘 发表于 2023-5-16 10:20
美帖，好看好听，欣赏问好！

谢谢老师支持！
页: [1]
查看完整版本: 妈妈说