玉骨遥（学习黑师《无尽虚空》频谱2.0效果）
<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;
z-index: 999;
--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="花潮lrc在线">花潮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[ i ].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[ i ].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[ i ].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[ i ].move(last_target, target);
tent[ i ].show2(target);
}
for (i = 0; i < numt; i++) {
tent[ i ].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> @马黑黑 给最帅的黑老师上咖啡{:4_170:} 花飞飞 发表于 2023-7-18 17:25
@马黑黑 给最帅的黑老师上咖啡
谢谢 马黑黑 发表于 2023-7-18 17:26
谢谢
谢谢你才对，解决我的大问题。。。。。{:4_173:} 马黑黑 发表于 2023-7-18 17:26
谢谢
老师这咋整。。。。 花飞飞 发表于 2023-7-18 17:28
老师这咋整。。。。
整啥？ 花飞飞 发表于 2023-7-18 17:28
谢谢你才对，解决我的大问题。。。。。
外勤回来，本想去学下呼啦圈，找了找，只有游泳圈，就回来开机 马黑黑 发表于 2023-7-18 17:29
整啥？
贴子天天做天天坏{:4_173:} 马黑黑 发表于 2023-7-18 17:30
外勤回来，本想去学下呼啦圈，找了找，只有游泳圈，就回来开机
开机里面有呼啦圈，还有各种高难度动作。{:4_173:} 醉美水芙蓉 发表于 2023-7-18 17:47
月儿飞飞神速呀！这么快又加了特效！
我来坛子晚，这个是极早之前他们玩过的，我整来试试{:4_190:} 醉美水芙蓉 发表于 2023-7-18 17:48
好像还是变色蜘蛛！
我不知道它叫什么，一直喊它八爪鱼，你叫蜘蛛也可以。。 花飞飞 发表于 2023-7-18 18:39
我不知道它叫什么，一直喊它八爪鱼，你叫蜘蛛也可以。。
我看见它想起来的是神经元{:4_173:} 鱼儿 发表于 2023-7-18 18:47
我看见它想起来的是神经元
{:4_173:}
有自主意识能跑的神经元。。。
细想一下有点惊悚…… 鱼儿 发表于 2023-7-18 18:47
我看见它想起来的是神经元
看完没有？我还没看完。。。 花飞飞 发表于 2023-7-18 18:50
看完没有？我还没看完。。。
我也还没看完呢 这个厉害了，还加了个太空蜘蛛，让整个画面有非常奇妙的感受{:4_199:} 背景很壮阔，群山之间烟雾缭绕，人物也很柔美。频谱漂亮。欣赏飞飞好帖{:4_199:} 花飞飞 发表于 2023-7-18 18:38
开机里面有呼啦圈，还有各种高难度动作。
就是不能塑腰