眼里都是你
本帖最后由 杨帆 于 2025-6-27 22:04 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>《眼里都是你》 - 马健涛</title>
</head>
<body>
<style>
#papa { --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9;background: url('https://cccimg.com/view.php/294d3b371729ac9f0c6673ffe214560d.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center;user-select: none;z-index: 1; position: relative; }
#papa >canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
#tz { width: 65%; height: 65%; top: -110%; left: -35%; cursor: pointer; position: absolute; overflow: hidden; z-index: 1; }
#tz:hover { transform: scale(1.05); filter: drop-shadow(0 0 80px Gold); }
#nhzer { color: #FFD700; position: absolute; left: 10%; top: 6%; font-size: 35px; font-family: Microsoft YaHei; z-index: 5; animation: yd 20s linear infinite var(--state); filter: drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0); --state: running; pointer-events: auto;}
@keyframes yd { 0% { opacity: 0.8; left: 10%; } 50% { opacity: 1; left: 50%; } 100% { opacity: 0.8; left: 10%; } }
#nhzer span { transition: color 0.3s ease, text-shadow 0.3s ease; text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
#btnFs { position: absolute; right: 20px; top: 20px; padding: 6px; background: green; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; pointer-events: auto; z-index: 9; }
#btnFs:hover { transform: scale(1.1,1.1); filter: drop-shadow(0 0 80px Gold); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; }
#lrc { left: 1%; top: 75%; }
#lrcc { left: 90%; transform: translate(-102%); top: 85%; }
#lrc, #lrcc { --state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%); border: 0px solid black; position: absolute; z-index: 6; font: normal 3.2em 华文新魏; color: #222222; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0); z-index: 15; }
#lrcc::before, #lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { to { clip-path: inset(0 0% 0 0); } }
@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#Img { position: absolute; mix-blend-mode: darken; left: 30%; top: 1%; background: none; z-index: -1; }
</style>
<div id="papa">
<audio id="aud" src="https://file.uhsea.com/2506/2f18f0bf2b7f5bd1746f3b1166d16eccLC.mp3" autoplay loop></audio>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/65/86/V-658610-3FC7FB1B.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
<div id="tz"></div>
<div id="nhzer"></div>
<span id="btnFs"></span>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<img id="Img" src="https://pic.imgdb.cn/item/6698d990d9c307b7e98af837.gif" alt="" style="width: 605px; height: 334px;">
</div>
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
basic3(tz);
var group = new THREE.Group(), angle = 0;
var texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/star.png');
var icosahedron = new THREE.Mesh(
new THREE.IcosahedronGeometry(4.5),
new THREE.MeshNormalMaterial()
);
icosahedron.position.set(0, 0, 0);
for (var i = 0; i < 160; i++) {
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: texture, transparent: true }));
sprite.scale.set(1, 1, 0.5);
sprite.position.set(
THREE.MathUtils.randFloatSpread(20),
THREE.MathUtils.randFloatSpread(20),
THREE.MathUtils.randFloatSpread(25)
);
group.add(sprite);
}
scene.add(icosahedron, group);
var isPlaying = true;
var animate = () => {
if (isPlaying) {
requestAnimationFrame(animate);
var delta = clock.getDelta();
angle = (angle + delta / 2) % 360;
camera.position.x = 20 * Math.sin(angle);
camera.position.z = 20 * Math.cos(angle);
group.children.forEach(sprite => sprite.material.rotation -= delta * 2);
camera.lookAt(0, 0, 0);
renderer.render(scene, camera);
}
};
animate();
tz.onclick = (e) => {
if (click3(icosahedron, e)) {
if (isPlaying) {
aud.pause();
isPlaying = false;
vid.pause();
Img.style.display = 'none';
} else {
aud.play();
isPlaying = true;
animate();
vid.play();
Img.style.display = '';
}
}
};
tz.onmousemove = (e) => {
tz.title = click3(icosahedron, e) ? '播放/暂停' : '';
tz.style.cursor = click3(icosahedron, e) ? 'pointer' : 'default';
};
</script>
<span id="lrcStr" style="visibility: hidden;">
《眼里都是你》 - 马健涛
词曲：马健涛
编曲：马健涛
演唱：马健涛
......
天会荒 地会老
对你的爱到永久
就算失了忆也不把你忘记
我的眼里都是你
我的心里也是你
失去你世界变得没意义
把我的心揉碎
看看里面装着谁
是谁让我日夜想到难以入睡
你是我今生的执着
你是我余生的寄托
除了你没人走进我心窝
摘颗星 送给你
愿你永远都美丽
让月亮照亮微笑的你
用星辰来祝福
愿你余生没痛苦
让大海带走你所有无助
天会荒 地会老
对你的爱到永久
就算失了忆也不把你忘记
我的眼里都是你
我的心里也是你
失去你世界变得没意义
......
把我的心揉碎
看看里面装着谁
是谁让我日夜想到难以入睡
你是我今生的执着
你是我余生的寄托
除了你没人走进我心窝
摘颗星 送给你
愿你永远都美丽
让月亮照亮微笑的你
用星辰来祝福
愿你余生没痛苦
让大海带走你所有无助
天会荒 地会老
对你的爱到永久
就算失了忆也不把你忘记
我的眼里都是你
我的心里也是你
失去你世界变得没意义
摘颗星 送给你
愿你永远都美丽
让月亮照亮微笑的你
用星辰来祝福
愿你余生没痛苦
让大海带走你所有无助
天会荒 地会老
对你的爱到永久
就算失了忆也不把你忘记
我的眼里都是你
我的心里也是你
失去你世界变得没意义
</span><script>
(function () {
let mKey = 0, averAdd = 0.3;
let lrcTime = (ar) => {
let tmpAr = [];
for (j = 0; j < ar.length - 1; j++) {
if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item, key) => {
ar = item > aver ? aver : item;
});
return ar;
};
let getLrcAr = (text) => {
let lrcAr = [];
let arr = "";
let calcRule = ;
for (x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re, '');
if (geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');
let time = x.match(re);
if (time != null) {
for (y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for (z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a, b) => a - b);
return (lrcTime(lrcAr));
};
let showLrc = (time) => {
lrca = lrcAr;
lrcAr.length == mKey + 1 ? lrcb = "" : lrcb = lrcAr;
let Y = String(mKey / 2).indexOf(".");
if (Y == -1) {
0 == mKey && (lrc.innerHTML = lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
} else {
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
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 = () => aud.paused ? (lrc.style.setProperty("--state", "paused"), lrcc.style.setProperty("--state", "paused")) : (lrc.style.setProperty("--state", "running"), lrcc.style.setProperty("--state", "running"));
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
let lrcAr = getLrcAr(lrcStr.innerHTML);
})();
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
const nhzerElement = document.getElementById('nhzer');
nhzerElement.addEventListener('mouseover', function() {
nhzerElement.style.setProperty('--state', 'paused');
});
nhzerElement.addEventListener('mouseout', function() {
nhzerElement.style.setProperty('--state', 'running');
});
</script>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/3dev/build/three.module.min.js';
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, papa.offsetWidth/papa.offsetHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearAlpha(0.0);
renderer.setSize(papa.offsetWidth, papa.offsetHeight);
const clock = new THREE.Clock();
papa.appendChild(renderer.domElement);
const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/texture/green.png');
const mesh = new THREE.Mesh(
new THREE.SphereGeometry(1, 128, 128),
new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.5, color: 0xFFD700 })
);
mesh.position.set(-1000, -2, 0);
scene.add(mesh);
const particleContainer = new THREE.Object3D(); // 粒子容器
const total = 1000;
for (let i = 0; i < total; i++) {
const faces = Math.floor(Math.random() * 3 + 1);
const geometry = new THREE.SphereGeometry(0.4);
const material = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5,
color: new THREE.Color(Math.random(), Math.random(), Math.random()),
map: texture
});
const particle = new THREE.Mesh(geometry, material);
particle.position.set(
Math.random() * 100 - 50,
Math.random() * 100 - 50,
Math.random() * 300 - 150
);
particleContainer.add(particle);
}
scene.add(particleContainer);
const isMess = (event) => {
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
let intersects = [];
pointer.x = (event.offsetX / papa.offsetWidth) * 2 - 1;
pointer.y = -(event.offsetY / papa.offsetHeight) * 2 + 1;
raycaster.setFromCamera(pointer, camera);
intersects = raycaster.intersectObjects(, true);
return intersects.length > 0;
}
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.x += delta;
mesh.rotation.y -= delta;
particleContainer.rotation.x += delta / 5;
particleContainer.rotation.y -= delta / 5;
renderer.render(scene, camera);
};
window.onresize = () => {
camera.aspect = papa.offsetWidth / papa.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(papa.offsetWidth, papa.offsetHeight);
};
aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();
animate();
qp.fs('papa','btnFs');
</script><script>
const audio = document.getElementById('aud');
const nhzer = document.getElementById('nhzer');
const message = "《眼里都是你》 - 马健涛";
const flashSpeed = 150;
const baseColor = "#00ffff";
const highlightColor = "#00ff00";
let currentIndex = 0;
let flashingTimer = null;
const textSpans = [];
function initNeonText() {
nhzer.innerHTML = '';
textSpans.length = 0;
message.split('').forEach((char) => {
const span = document.createElement('span');
span.textContent = char;
span.style.color = baseColor;
textSpans.push(span);
nhzer.appendChild(span);
});
}
function animateNeon() {
textSpans.forEach(span => {
span.style.color = baseColor;
span.style.textShadow = `0 0 5px rgba(0, 255, 255, 0.5)`;
});
if (textSpans) {
textSpans.style.color = highlightColor;
textSpans.style.textShadow = `
0 0 10px ${highlightColor},
0 0 20px ${highlightColor},
0 0 30px ${highlightColor}
`;
}
currentIndex = (currentIndex + 1) % textSpans.length;
}
audio.addEventListener('play', () => {
if (!flashingTimer) {
currentIndex = 0;
animateNeon();
flashingTimer = setInterval(animateNeon, flashSpeed);
nhzer.style.setProperty('--state', 'running');
}
});
audio.addEventListener('pause', () => {
if (flashingTimer) {
clearInterval(flashingTimer);
flashingTimer = null;
}
textSpans.forEach(span => {
span.style.color = baseColor;
span.style.textShadow = `0 0 5px rgba(0, 255, 255, 0.5)`;
});
nhzer.style.setProperty('--state', 'paused');
});
audio.addEventListener('ended', () => {
if (flashingTimer) {
clearInterval(flashingTimer);
flashingTimer = null;
}
currentIndex = 0;
textSpans.forEach(span => {
span.style.color = baseColor;
span.style.textShadow = `0 0 5px rgba(0, 255, 255, 0.5)`;
});
nhzer.style.setProperty('--state', 'paused');
});
initNeonText();
</script>
</body>
</html>
真漂亮的制作，背景视频和精灵都很好看。
欣赏杨帆好帖{:4_199:} 红影 发表于 2025-6-26 21:07
真漂亮的制作，背景视频和精灵都很好看。
欣赏杨帆好帖
鼓捣着玩呢，谢谢影子鼓励{:4_204:}
不知为何刚刚我发在水区时，显示还是代码，而不呈现效果呢？ 杨帆 发表于 2025-6-26 21:28
鼓捣着玩呢，谢谢影子鼓励
不知为何刚刚我发在水区时，显示还是代码，而不呈现效果呢？
能看到效果啊，你说的显示代码我没看到。 红影 发表于 2025-6-26 21:40
能看到效果啊，你说的显示代码我没看到。
此贴先发在那里显示还是代码，操作无误，原因不详{:4_173:} 杨帆 发表于 2025-6-26 21:45
此贴先发在那里显示还是代码，操作无误，原因不详
那我就更不知道了{:4_173:} 红影 发表于 2025-6-26 21:54
那我就更不知道了
不知道无妨，现在正常就好{:4_173:} 杨帆 发表于 2025-6-26 22:05
不知道无妨，现在正常就好
嗯嗯，至少这个帖子很正常的{:4_187:}
页:
[1]