雨中悄然 发表于 2023-8-1 10:22

玉骨遥（感谢诺北送的头签）

<style>#papa {
margin: 0 0 0 calc(50% - 720px);
width: 1300px;
background: #000 url('https://s1.ax1x.com/2023/07/18/pCTkMkR.jpg') no-repeatcenter/cover;
height: 700px;
position: relative;
overflow: hidden;
box-shadow: 0 0 8px 0 #000;
z-index: 1;
--state: paused; }

#canvas { background: transparent; opacity: .95; }
#lrc { position: absolute; bottom: 20px; left: 30%; transform: translate(-50%); font: bold 2.4em sans-serif; color: rgb(240,240,240); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.95)); --motion: cover2; --tt: 5s; }
    #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,rgba(112,145,180,.45),rgba(86,145,250,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
    pinpu-wrapper { position: absolute; top: 50px; right: 50px; cursor: pointer; }
    pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state); --psw: 6px; }
    pin-pu::before { content: ''; position: absolute; left: calc(50% - var(--psw) / 2); width: var(--psw); height: var(--psw); border-radius: 50%; background: snow; }
    @keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
    @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    #vid {
        position: absolute;
        width: 120%;
        height: 110%;
        top:-10px;
        left:-50px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
        opacity: .65;
}</style><div id="papa">   <canvas id="canvas"></canvas>         <pinpu-wrapper></pinpu-wrapper>      <div id="lrc" data-lrc="单曲：玉骨遥">单曲：玉骨遥</div>      <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/52/5b44f4d7298d6.mp4" autoplay="" loop="" muted=""></video> </div> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2062400925" autoplay="" loop=""></audio> <script>+function() {
      let pinpuNum = 80, pinpuWidth = 4, pinpuHeight = 200, mKey = 0, mFlag = true, slip = 0.2; let ppwrap = document.querySelector('pinpu-wrapper');
       let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'), vid.play());
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      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 msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
      +function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;right: ${(pinpuWidth + 1) * key}px;background: FireBrick;};--height: ${1 + (pinpuHeight - 1) / pinpuNum * msort(ar)}px;--du: ${Math.random() * .3 + .3}s;--delay: -${Math.random()}s;--psw: ${pinpuWidth + 2}px`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('seeked', calcKey, false);
      aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr + slip) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
      ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    }();

window.requestAnimFrame = (function() {
      return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                        window.setTimeout(callback);
                }
      );
});

function init(elemid) {
      let canvas = document.getElementById(elemid),
                c = canvas.getContext("2d"),
                w = canvas.width = papa.offsetWidth,
                h = canvas.height = papa.offsetHeight;
      c.fillStyle = "rgba(255,255,255,255)";
      c.fillRect(0, 0, w, h);
      return {c:c,canvas:canvas};
}

window.onload = function() {
      let c = init("canvas").c,
                canvas = init("canvas").canvas,
                w = canvas.width = papa.offsetWidth,
                h = canvas.height = papa.offsetHeight;
                mouse = { x: false, y: false },
                last_mouse = {};

      function dist(p1x, p1y, p2x, p2y) {
                return Math.sqrt(Math.pow(p2x - p1x, 2) + Math.pow(p2y - p1y, 2));
      }

      class segment {
                constructor(parent, l, a, first) {
                        this.first = first;
                        if (first) {
                              this.pos = {
                                        x: parent.x,
                                        y: parent.y
                              };
                        } else {
                              this.pos = {
                                        x: parent.nextPos.x,
                                        y: parent.nextPos.y
                              };
                        }
                        this.l = l;
                        this.ang = a;
                        this.nextPos = {
                              x: this.pos.x + this.l * Math.cos(this.ang),
                              y: this.pos.y + this.l * Math.sin(this.ang)
                        };
                }
                update(t) {
                        this.ang = Math.atan2(t.y - this.pos.y, t.x - this.pos.x);
                        this.pos.x = t.x + this.l * Math.cos(this.ang - Math.PI);
                        this.pos.y = t.y + this.l * Math.sin(this.ang - Math.PI);
                        this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
                        this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
                }
                fallback(t) {
                        this.pos.x = t.x;
                        this.pos.y = t.y;
                        this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
                        this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
                }
                show() {
                        c.lineTo(this.nextPos.x, this.nextPos.y);
                }
      }

      class tentacle {
                constructor(x, y, l, n, a) {
                        this.x = x;
                        this.y = y;
                        this.l = l;
                        this.n = n;
                        this.t = {};
                        this.rand = Math.random();
                        this.segments = ;
                        for (let i = 1; i < this.n; i++) {
                              this.segments.push(
                                        new segment(this.segments, this.l / this.n, 0, false)
                              );
                        }
                }
                move(last_target, target) {
                        this.angle = Math.atan2(target.y-this.y,target.x-this.x);
                        this.dt = dist(last_target.x, last_target.y, target.x, target.y)+5;
                        this.t = {
                              x: target.x - 0.8*this.dt*Math.cos(this.angle),
                              y: target.y - 0.8*this.dt*Math.sin(this.angle)
                        };
                        if(this.t.x){
                              this.segments.update(this.t);
                        }else{
                              this.segments.update(target);
                        }
                        for (let i = this.n - 2; i >= 0; i--) {
                              this.segments.update(this.segments.pos);
                        }
                        if (
                              dist(this.x, this.y, target.x, target.y) <=
                              this.l + dist(last_target.x, last_target.y, target.x, target.y)
                        ) {
                              this.segments.fallback({ x: this.x, y: this.y });
                              for (let i = 1; i < this.n; i++) {
                                        this.segments.fallback(this.segments.nextPos);
                              }
                        }
                }
                show(target) {
                        if (dist(this.x, this.y, target.x, target.y) <= this.l) {
                              c.globalCompositeOperation = "color-Burn";
                              c.beginPath();
                              c.lineTo(this.x, this.y);
                              for (let i = 0; i < this.n; i++) {
                                        this.segments.show();
                              }
                              c.strokeStyle = "hsl("+(this.rand*250+80)+",100%," + (this.rand * 150 + 25) + "%)";
                              c.lineWidth = this.rand * 2;
                              c.lineCap="round";
                              c.lineJoin="round";
                              c.stroke();
                              c.globalCompositeOperation = "source-over";
                        }
                }
                show2(target) {
                        c.beginPath();
                        if (dist(this.x, this.y, target.x, target.y) <= this.l) {
                              c.arc(this.x, this.y, 2*this.rand+1, 0, 2 * Math.PI);
                              c.fillStyle = "red";
                        } else {
                              c.arc(this.x, this.y, this.rand*2, 0, 2 * Math.PI);
                              c.fillStyle = "SeaShell";
                        }
                        c.fill();
                }
      }

      let maxl = 300,
                minl = 50,
                n = 30,
                numt = 500,
                tent = [],
                clicked = false,
                target = { x: 0, y: 0 },
                last_target = {},
                t = 0,
                q = 10;

      for (let i = 0; i < numt; i++) {
                tent.push(
                        new tentacle(
                              Math.random() * w,
                              Math.random() * h,
                              Math.random() * (maxl - minl) + minl,
                              n,
                              Math.random() * 2 * Math.PI
                        )
                );
      }
      function draw() {

                if (mouse.x) {
                        target.errx = mouse.x - target.x;
                        target.erry = mouse.y - target.y;
                } else {
                        target.errx =
                              w / 2 +
                              (h / 2 - q) *
                                        Math.sqrt(2) *
                                        Math.cos(t) /
                                        (Math.pow(Math.sin(t), 2) + 1) -
                              target.x;
                        target.erry =
                              h / 2 +
                              (h / 2 - q) *
                                        Math.sqrt(2) *
                                        Math.cos(t) *
                                        Math.sin(t) /
                                        (Math.pow(Math.sin(t), 2) + 1) -
                              target.y;
                }

                target.x += target.errx / 10;
                target.y += target.erry / 10;

                t += 0.01;
               
                c.beginPath();
                c.arc(target.x, target.y, dist(last_target.x, last_target.y, target.x, target.y)+5, 0, 2 * Math.PI);
                c.fillStyle = "hsl(190,80%,40%)";
                c.fill();

                for (i = 0; i < numt; i++) {
                        tent.move(last_target, target);
                        tent.show2(target);
                }
                for (i = 0; i < numt; i++) {
                        tent.show(target);
                }
                last_target.x = target.x;
                last_target.y = target.y;
      }

      canvas.addEventListener(
                "mousemove",
                function(e) {
                        last_mouse.x = mouse.x;
                        last_mouse.y = mouse.y;
                        mouse.x = e.offsetX;
                        mouse.y = e.offsetY;
                },
                false
      );

      canvas.addEventListener("mouseleave", function(e) {
                mouse.x = false;
                mouse.y = false;
      });

      canvas.addEventListener(
                "mousedown",
                function(e) {
                        clicked = true;
                },
                false
      );

      canvas.addEventListener(
                "mouseup",
                function(e) {
                        clicked = false;
                },
                false
      );

      function loop() {
                window.requestAnimFrame(loop);
                c.clearRect(0, 0, w, h);
                draw();
      }

      loop();
      setInterval(loop, 1000 / 60);
}</script>

雨中悄然 发表于 2023-8-1 10:26

@诺北 今天上线就看到你给的头签，实在开心。。。之前做的一个小贴子送你，

容轩听雨 发表于 2023-8-1 11:45

图的意境很美，嵌入的视频，云气飘渺，似梦若纱，愰若仙境，LRC编辑合拍，歌曲轻缓缠绵，令人陶醉，赞，问好，夏祺！

巫荣云师 发表于 2023-8-1 20:10

欣赏收藏老师的佳作《玉骨遥》，唯美的制作！我醉了！问好点赞!

久久. 发表于 2023-8-1 22:02

雨中悄然晚上好！{:1_292:}帖子制作的漂亮    

久久. 发表于 2023-8-1 22:03

谢谢分享 支持点赞{:1_293:}

雨中悄然 发表于 2023-8-1 22:37

容轩听雨 发表于 2023-8-1 11:45
图的意境很美，嵌入的视频，云气飘渺，似梦若纱，愰若仙境，LRC编辑合拍，歌曲轻缓缠绵，令人陶醉，赞，问 ...

感谢您的支持鼓励哦！

雨中悄然 发表于 2023-8-1 22:38

巫荣云师 发表于 2023-8-1 20:10
欣赏收藏老师的佳作《玉骨遥》，唯美的制作！我醉了！问好点赞!

感谢支持回复！~~问好。。

雨中悄然 发表于 2023-8-1 22:38

久久. 发表于 2023-8-1 22:02
雨中悄然晚上好！帖子制作的漂亮

久久晚上好！~~

雨中悄然 发表于 2023-8-1 22:39

久久. 发表于 2023-8-1 22:03
谢谢分享 支持点赞

{:1_293:}谢谢久久支持
页: [1] 2 3 4
查看完整版本: 玉骨遥（感谢诺北送的头签）