醉美水芙蓉 发表于 2022-12-10 21:05

学习黑黑老师响应式频谱插件《拼搏在世间 (DJ默涵版）》

<style>
#papa {
      margin: 100px 0 0 calc(50% - 681px);
      width: 1200px;
      height: 640px;
      background: #666;
      box-shadow: 3px 3px 20px #000;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
}

#pic {
      position: absolute;
      left: 300px;
      top: 40px;
      width: 800px;
      height: 443px;
      mix-blend-mode: multiply;
      -webkit-mask-image:radial-gradient(black 35%, transparent 70%);
      opacity: 0.9;
}
.vid { position: absolute; width: 1200px; height: 695px; top: -55px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ; }
</style>

<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/34566/00/13/74/5e699d51d5085.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="pic" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/dcce54af7678b927a02fcc3c5a5f835d.jpg" alt="" />
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=253823782&.mp3" loop autoplay></audio>

<script>
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],player_css: '',ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),playerCode: `<style>#mplayer {--ww: 300px;--hh: 140px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 10px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;}.mLine {position: relative;margin: 0 2px 0 0;width: 4px;height: 8px;background: var(--pinpu);transition: .35s;opacity: .95;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75));position: absolute;top: 20px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));} #lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style><div id="mplayer"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();aud.loop = false;let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state','paused') : lrc.style.setProperty('--state','running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
       
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        ypData = ;
        HCPlayer({
                lrcAr: lrcAr,
                ypData: ypData,
                player_css: '--ww: 80%; --pinpu: linear-gradient(to top,darkgreen,green,lightgreen); align-items: flex-end;',
        });
})();
</script>

风中飞尘 发表于 2022-12-10 21:44

不错 很漂亮

辫子哥哥 发表于 2022-12-10 21:47

掌声送上{:4_199:}

醉美水芙蓉 发表于 2022-12-10 22:17

风中飞尘 发表于 2022-12-10 21:44
不错 很漂亮

谢谢风中飞尘老师欣赏支持！

醉美水芙蓉 发表于 2022-12-10 22:18

辫子哥哥 发表于 2022-12-10 21:47
掌声送上

谢谢辫子老师鼓励！

红影 发表于 2022-12-10 23:49

很漂亮的制作，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2022-12-11 08:46

红影 发表于 2022-12-10 23:49
很漂亮的制作，欣赏水芙蓉好帖

谢谢红影美女鼓励！

马黑黑 发表于 2022-12-11 09:41

不错的制作。赞

醉美水芙蓉 发表于 2022-12-11 13:07

马黑黑 发表于 2022-12-11 09:41
不错的制作。赞

谢谢黑黑老师鼓励和指导！

红影 发表于 2022-12-11 15:38

醉美水芙蓉 发表于 2022-12-11 08:46
谢谢红影美女鼓励！

问好水芙蓉，周日快乐{:4_187:}

梦缘 发表于 2022-12-11 19:37

真好看，漂亮，欣赏问好！{:4_204:}

醉美水芙蓉 发表于 2022-12-11 21:28

梦缘 发表于 2022-12-11 19:37
真好看，漂亮，欣赏问好！

谢谢老师支持！
页: [1]
查看完整版本: 学习黑黑老师响应式频谱插件《拼搏在世间 (DJ默涵版）》