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

《爱上你的美》都智文

本帖最后由 焱鑫磊 于 2023-5-23 20:51 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 1100px; background: url('https://img.fy6b.com/2023/05/23/4405e92f5c62c.jpg');
                box-shadow: 0 0 8px #000;
                display: grid;
                place-items: center;
                position: relative;
                overflow: hidden;
                --state: paused;
        }

    #vid {
        position: absolute;
        width: 1570px;
        height: 100%;
        border-radius: 2%;
        opacity: .76;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;

}       
        css-doodle { position: absolute; }       
       
</style>


<div id="papa">
        <!-- 播放器 -->
<css-doodle grid="1" id="mplayer">
      :doodle {
                @size: 1164px 1100px;
                background: url('') no-repeat center/cover;
                box-shadow: 0 0 6px #000;
                position: relative;
                z-index: 1;
      }
      @size: 100px;
      clip-path: @shape(
fill: evenodd;
points: 400;
x: cos(2t) * cos(5t) * sin(t);
y: sin(2t) * sin(4t) * cos(5t);
      );
      position: absolute;
      background: rgb(@m3(@r(255)));
      offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z');
      animation: move 40s infinite linear var(--state);
      cursor: pointer;
      @keyframes move { to { offset-distance: 100%;} }
</css-doodle>
<css-doodle id="lrc">
                  :doodle {                           
                  @size: auto 4em;                           
                  top: 10px;                           
                  --geci: &quot;css-doodle player&quot;; --motion: cover2; --tt: 1s;}/* 单元格两个伪元素显示lrc歌词 */                  
                  display: grid;                  
                  place-items: center start;                  
                  :before, :after {                           
                  content: var(--geci);                           
                  color:LightGrey; /* 歌词底色 */                           
                  font: bold 2em sans-serif;                           
                  text-shadow: 1px 1px 2px #000;                           
                  white-space: pre;                     
                  }                  
                  :after {                           
                  position: absolute;                           
                  width: 0;                           
                  color: DarkSeaGreen; /* 同步歌词颜色 */                           
                  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>

<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/00/5b4ee0fea645b.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://www.joy127.com/url/105139.mp3" autoplay="autoplay" loop="loop"></audio></div>


<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.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-23 21:21

欣赏佳作， 晚上好！

整个画面都是控制区啊。

红影 发表于 2023-5-23 22:00

真漂亮的制作，画面非常靓丽，小蝴蝶也漂亮，欣赏焱鑫磊好帖{:4_187:}

亦是金 发表于 2023-5-23 22:11

问好！欣赏美帖！{:4_187:}

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

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

整个画面都是控制区啊。

MP4没控制住。{:4_170:}

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

红影 发表于 2023-5-23 22:00
真漂亮的制作，画面非常靓丽，小蝴蝶也漂亮，欣赏焱鑫磊好帖

问好红影！{:4_187:}

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

亦是金 发表于 2023-5-23 22:11
问好！欣赏美帖！

问好亦是金{:4_204:}

红影 发表于 2023-5-24 11:03

焱鑫磊 发表于 2023-5-23 22:23
问好红影！

这个制作很浪漫，适合婚礼上用呢{:4_173:}

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

好美啊，欣赏老师的精彩！{:4_204:}
页: [1]
查看完整版本: 《爱上你的美》都智文