<style>
        #papa {
                margin:auto;
                width: 1024px;
                height: 640px;
                background: tan url('https://s1.ax1x.com/2023/06/13/pCeLGLt.jpg');
                box-shadow: 0 0 8px #000;
                display: grid;
                place-items: center;
                position: relative;
                overflow: hidden;
                --state: paused;
        }
        css-doodle { position: absolute; }
</style>
<div id="papa">
    <!-- 播放器 -->
    <css-doodle grid="1" id="mplayer">
                :doodle { @size: 400px; cursor: pointer; right: 490px; top: 110px; opacity: .96;z-index: 4; }
                clip-path: @shape(
                        frame: 4;
                        points: 40;
                        x: cos(12t)^1 * cos(15t);
                        y: cos(12t)^1 * sin(15t););
                background: linear-gradient(DeepSkyBlue,RoyalBlue,MediumPurple);
                animation: rot 6s infinite linear var(--state);
                @keyframes rot { to { transform: rotate(360deg); }}
    </css-doodle><!-- 弧 -->
    <css-doodle grid="6x1">
                :doodle {    @size: 1024px 640px;    
                background: url('https://s1.ax1x.com/2023/06/13/pCejaFK.jpg') no-repeat center / cover;                    box-shadow: 0 0 6px #000;    
                margin: 20px auto;}
                @size: 120px;
                position: absolute;
                background: linear-gradient(Snow,RoyalBlue,DeepSkyBlue);
                clip-path: @shape(
                          frame: 4;points: 40;
                          x: cos(12t)^1 * cos(15t);
                          y: cos(12t)^1 * sin(15t););
                border-radius: 50%;
                cursor: pointer;
                offset-path: path('M310 70 A120 120 0 1 0 310 560');
                offset-distance: calc((@i - 1) * 20%);
                animation: rot 6s infinite linear var(--state);
                @keyframes rot {    
                            to {        
                            transform: rotate(360deg);    
                            }}
     </css-doodle><!-- 粒子 -->
     <css-doodle grid="40x1">
                 :doodle { @size: 1024px 640px; perspective: 60px; }
                 :container { transform-style: preserve-3d;}
                 background: @m(@r(140, 100), radial-gradient(@p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 10%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);
                 @size: 10%;
                 @place-cell: center;
                 border-radius: 30%;
                 animation: scale-up 48s calc(@i * -.4s) linear infinite var(--state);
                 @keyframes scale-up {
                         0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0);    
                 }
                          10% { opacity: 0.9; }
                          95% { transform: translate3d(0, 0, @r(20vmin, 35vmin)) rotate(@r(-360deg, 360deg)); }
                          100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }
                 }
                 </css-doodle>
     <css-doodle id="lrc">                       
               :doodle {                               
               @size: auto 4em;    
               z-index:5;                              
               bottom: 10px;                              
                --geci: &quot;
                css-doodle player&quot;;
                --motion: cover2; --tt: 1s;                       
                }                      
                 /* 单元格两个伪元素显示lrc歌词 */     
                 display: grid;                       
                 place-items: center start;                       
                 :before, :after {                               
                 content: var(--geci);                               
                 color: Honeydew; /* 歌词底色 */                               
                 font: bold 2em sans-serif;                               
                 text-shadow: 1px 1px 2px #000;                               
                 white-space: pre;                        
                 }                       
                 :after {                               
                 position: absolute;                               
                 width: 0;                               
                 color:RoyalBlue; /* 同步歌词颜色 */                               
                 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://music.163.com/song/media/outer/url?id=1465313631" autoplay="autoplay" loop="loop"></audio>
</div>
    <script>let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
    let lrcAr = [
    [2.51,"单曲：化身孤岛的鲸",0.8],
    [3.33,"歌手：周深",0.7],
    [4.06,"所属专辑：化身孤岛的鲸",1.2],
    [5.3,"作曲 : 徐浩",0.9],
    [6.15,"编曲 : 唐汉霄",1.5],
    [7.67,"制作人 : 唐汉霄",0.4],
    [8.03,"学习黑师优弧劣弧路径作业之四",4.0],
    [12,"我是只化身孤岛的蓝鲸",2.3],
    [14.62,"有着最巨大的身影",2.9],
    [19.17,"鱼虾在身侧穿行",2.5],
    [23.35,"也有飞鸟在背上停",3.3],
    [28.51,"",0.0],
    [28.51,"我路过太多太美的奇景",3.0],
    [31.75,"如同伊甸般的仙境",2.9],
    [36.14,"而大海太平太静",2.6],
    [40.65,"多少故事无人倾听",2.9],
    [43.59,"",0.2],
    [44.9,"我爱地中海的天晴",3.2],
    [49.3,"爱西伯利亚的雪景",2.8],
    [52.6,"爱万丈高空的鹰",1.9],
    [54.73,"爱肚皮下的藻荇",2.0],
    [57.63,"我在尽心尽力地多情",2.7],
    [61.19,"直到那一天",1.8],
    [63.01,"",2.6],
    [65.56,"你的衣衫破旧",1.8],
    [67.75,"而歌声却温柔",1.8],
    [70.02,"陪我漫无目的地四处漂流",3.4],
    [74.03,"我的背脊如荒丘",2.0],
    [76.21,"而你却微笑摆首",2.0],
    [78.97,"把它当成整个宇宙",3.0],
    [82.66,"",0.6],
    [83.3,"你与太阳挥手",1.2],
    [84.87,"也同海鸥问候",1.8],
    [87.14,"陪我爱天爱地的四处风流",3.3],
    [91.16,"只是遗憾你终究",2.0],
    [93.3,"无法躺在我胸口",2.0],
    [96.29,"欣赏夜空最辽阔的不朽",2.9],
    [99.77,"把星子放入眸",2.0],
    [101.74,"",0.4],
    [110,"我是只化身孤岛的蓝鲸",2.8],
    [113.21,"有着最巨大的身影",3.3],
    [117.85,"鱼虾在身侧穿行",2.3],
    [121.86,"也有飞鸟在背上停",3.3],
    [125.39,"",1.7],
    [127.04,"我有着太冷太清的天性",3.1],
    [130.37,"对天上的她动过情",2.8],
    [134.92,"而云朵太远太轻",2.5],
    [139.03,"辗转之后各安天命",3.3],
    [142.28,"",0.3],
    [143.48,"我未入过繁华之境",3.2],
    [147.79,"未听过喧嚣的声音",2.9],
    [151.2,"未见过太多生灵",1.7],
    [153.37,"未有过滚烫心情",2.0],
    [156.02,"所以也未觉大洋正中",3.1],
    [159.72,"有多么安静",2.7],
    [164.03,"",0.3],
    [164.28,"你的衣衫破旧",1.7],
    [166.43,"而歌声却温柔",1.7],
    [168.45,"陪我漫无目的地四处漂流",3.5],
    [172.55,"我的背脊如荒丘",1.9],
    [174.76,"而你却微笑摆首",1.9],
    [177.63,"把它当成整个宇宙",2.9],
    [180.82,"",0.7],
    [181.49,"你与太阳挥手",1.6],
    [183.49,"也同海鸥问候",1.8],
    [185.7,"陪我爱天爱地的四处风流",3.4],
    [189.52,"只是遗憾你终究",2.2],
    [191.85,"无法躺在我胸口",2.0],
    [194.77,"欣赏夜空最辽阔的不朽",2.9],
    [198.34,"把星子放入眸",2.5],
    [200.97,"",6.1],
    [207.1,"你的指尖轻柔",1.8],
    [209.17,"抚摸过我所有",2.1],
    [211.4,"风浪冲撞出的丑陋疮口",3.4],
    [215.57,"你眼中有春与秋",1.9],
    [217.71,"胜过我见过爱过",1.7],
    [220,"的一切山川与河流",3.0],
    [222.99,"",0.5],
    [224.22,"曾以为我肩头",2.1],
    [226.36,"是那么的宽厚",2.6],
    [228.94,"足够撑起海底那座琼楼",3.7],
    [232.68,"而在你到来之后",2.0],
    [234.73,"它显得如此清瘦",2.9],
    [237.64,"我想给你能奔跑的岸头",4.0],
    [245.59,"让你如同王后",3.2]
];
    let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    document.body.appendChild(script);
    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[mKey][1] + '"');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[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);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>

前一篇: 走在阳光里（学习黑师《鹰》贴子效果）
下一篇: 工业风（学习黑师优弧劣弧路径作业之四第二版）