红影 发表于 2024-1-26 23:04

《极光》TO姚云裳（学习黑黑家家-尘埃效果）

<style>
    #papa { margin: 70px 0 0 calc(50% - 681px); width: 1200px; height: 674px; position: relative; background: lightblue url('https://pic.imgdb.cn/item/65b3b853871b83018a482a0c.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px rgba(0,0,0,.6); overflow: hidden; display: grid; place-items: center; --state: paused; }
    #mplayer { position: absolute; bottom: 10px; text-align: center; color: plum; }
    #mplayer p { margin: 0; padding: 0; cursor: pointer; }
    #mprog { width: 240px; accent-color:         Purple; outline: none; cursor: pointer; }
    #btnplay { width: 126px; opacity: 0.8; animation: rotating 6s infinite linear var(--state); }
    #lrc { --motion: cover2; --tt: 1s; --bg: linear-gradient(180deg,hsla(300,10%,50%,.75),hsla(300,100%,20%,.65)); position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(300, 100%, 98%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
    #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
    #vid { position: absolute; top: -70px; width: 100%; height: calc(100% - 100px); object-fit: cover; pointer-events: none; opacity: 0.75; clip-path: circle(66% at top);mix-blend-mode: screen;}
    @keyframes cover1 { from { width: 0%; }to { width: 100%; } }
    @keyframes cover2 { from { width: 0%; }to { width: 100%; } }
    @keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1401064029" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b500093bcb81_10s_big.mp4" loop muted></video>
    <div id="mplayer">
      <p><img id="btnplay" src="https://pic.imgdb.cn/item/65b3bd1a871b83018a604aa0.png" title="播放/暂停" alt="" /></p>
      <output id="mcur">0:00</output>
      <input id="mprog" type="range" min="0" step="1" max="100" value="0" title="调节进度" />
      <output id="mdu">0:00</output>
    </div>
    <div id="lrc" data-lrc="HuaChao LRC Player">HuaChao LRC Player</div>
</div>

<script>
    var geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
    var sf = document.createElement('script');
    sf.src = 'https://638183.freep.cn/638183/web/js/lrcku.js';
    sf.charset = 'utf-8';
    document.querySelector('body').appendChild(sf);
    sf.onload = () => {
      var mseek = false;
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('playing', () => mState());
        aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {
            if(!mseek) mprog.value = aud.currentTime / aud.duration * 100;
            mcur.value = toMin(aud.currentTime);
            mdu.value = toMin(aud.duration);
            for (let j = 0; j < geci.length; j++) {
                if (aud.currentTime >= geci) {
                  if (mKey === j) showLrc(geci);
                  else continue;
                }
            }
      });
      mprog.onchange = () => aud.currentTime = mprog.value * aud.duration / 100;
      mprog.onmousedown = () => mseek = true;
      mprog.onmouseup = () => mseek = false;
      mprog.onmousemove = () => {
            if(mseek) mcur.value = toMin(mprog.value * aud.duration / 100);
      };
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause()
      var mState = () => aud.paused ? (stateSetting(,'--state','paused'), vid.pause()) : (stateSetting(,'--state','running'), vid.play());
    };
</script>

红影 发表于 2024-1-26 23:05

感谢云裳好礼，影子跟着黑黑学做个帖子回赠@姚云裳 {:4_187:}

红影 发表于 2024-1-26 23:06

感谢黑黑代码，套用学习了一个@马黑黑 {:4_173:}

姚云裳 发表于 2024-1-26 23:48

红影 发表于 2024-1-26 23:05
感谢云裳好礼，影子跟着黑黑学做个帖子回赠@姚云裳

这特效我还不会玩呢

姚云裳 发表于 2024-1-26 23:49

红影 发表于 2024-1-26 23:05
感谢云裳好礼，影子跟着黑黑学做个帖子回赠@姚云裳

谢谢贈贴，问好

樵歌 发表于 2024-1-27 08:26

漂亮，好极了{:4_187:}

樵歌 发表于 2024-1-27 08:26

也算师兄一份好么{:4_173:}

红影 发表于 2024-1-27 11:02

姚云裳 发表于 2024-1-26 23:48
这特效我还不会玩呢

可以套用啊，替换代码里的图片和音乐等，然后慢慢学习，很多人都这样开始的{:4_173:}

红影 发表于 2024-1-27 11:02

姚云裳 发表于 2024-1-26 23:49
谢谢贈贴，问好

不客气啊，应该感谢云裳的好礼才是呢{:4_187:}

红影 发表于 2024-1-27 11:03

樵歌 发表于 2024-1-27 08:26
漂亮，好极了

谢谢师兄，我也是跟在后面玩呢{:4_173:}

红影 发表于 2024-1-27 11:03

樵歌 发表于 2024-1-27 08:26
也算师兄一份好么

那是当然，算我们一起送她的{:4_187:}

梦油 发表于 2024-1-27 11:28

若隐若现的激光很美。

红影 发表于 2024-1-27 11:33

梦油 发表于 2024-1-27 11:28
若隐若现的激光很美。

那个视频效果{:4_173:}

马黑黑 发表于 2024-1-27 12:13

红影 发表于 2024-1-26 23:06
感谢黑黑代码，套用学习了一个@马黑黑

瞧瞧

马黑黑 发表于 2024-1-27 12:14

美

梦油 发表于 2024-1-27 15:13

红影 发表于 2024-1-27 11:33
那个视频效果

放在这里更增添了这件作品的美感。

红影 发表于 2024-1-27 15:21

马黑黑 发表于 2024-1-27 12:13
瞧瞧

谢谢黑黑的代码{:4_187:}

红影 发表于 2024-1-27 15:22

马黑黑 发表于 2024-1-27 12:14
美

这个没使用嘿嘿整改简化后代码，用了原来的那个{:4_173:}

红影 发表于 2024-1-27 15:22

梦油 发表于 2024-1-27 15:13
放在这里更增添了这件作品的美感。

是啊，很多视频特别漂亮，放在帖子也好看呢{:4_204:}

马黑黑 发表于 2024-1-27 17:47

红影 发表于 2024-1-27 15:22
这个没使用嘿嘿整改简化后代码，用了原来的那个

也可以的
页: [1] 2
查看完整版本: 《极光》TO姚云裳（学习黑黑家家-尘埃效果）