焱鑫磊 发表于 2023-6-5 15:50

《漩涡》范茹 《危险爱人》网络剧插曲

本帖最后由 焱鑫磊 于 2023-6-5 11:41 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 640px; background:url('https://pic.imgdb.cn/item/647d4f141ddac507cc3ae81b.jpg') no-repeat center / cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle {
      position: relative;
      left: 450px;
      top: 200px;
      animation: rot 10s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <css-doodle grid="3" id="mplayer">
                :doodle {
                        @size: 160px;
                        background: radial-gradient(darkgreen,transparent 70%,transparent 0);
                        cursor: pointer;
                }
                @shape: clover 3;
                @place: center;
                background: green;
                transform: rotate(calc(@i * 40deg)) translate(60px);
        </css-doodle>
       
          <css-doodle id="lrc">                     
:doodle {                              
@size: auto 4em;   
z-index:5;                              
bottom: 200px;                               --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:Teal; /* 同步歌词颜色 */                               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>    <div class="panda">
        <img src="" alt="" /></div>                <audio id="aud" src=" https://mp3.wf/uploap/file/20230605103102.mp3" autoplay="" loop=""></audio>    </div>    <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 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 + '"');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-6-5 15:59

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

焱鑫磊 发表于 2023-6-5 17:36

梦缘 发表于 2023-6-5 15:59
欣赏老师的精彩分享，好看好听。

梦缘下午好！{:4_187:}

红影 发表于 2023-6-5 20:53

这个歌词怎么是转的？

焱鑫磊 发表于 2023-6-5 22:13

红影 发表于 2023-6-5 20:53
这个歌词怎么是转的？

多样化，坐坐摩天轮。{:4_187:}

红影 发表于 2023-6-6 16:36

焱鑫磊 发表于 2023-6-5 22:13
多样化，坐坐摩天轮。

哈哈，还有这说法啊{:4_189:}
页: [1]
查看完整版本: 《漩涡》范茹 《危险爱人》网络剧插曲