269 lines
11 KiB
HTML
269 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chaotic Dreamscape</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
perspective: 1000px;
|
|
}
|
|
.redemption {
|
|
position: absolute;
|
|
font-weight: bold;
|
|
will-change: transform, opacity, color;
|
|
pointer-events: none;
|
|
text-shadow: 0 0 5px currentColor;
|
|
mix-blend-mode: screen;
|
|
}
|
|
.glow {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle at center,
|
|
rgba(255,0,0,0.2) 0%,
|
|
rgba(255,0,0,0) 70%);
|
|
opacity: 0.3;
|
|
z-index: -1;
|
|
animation: pulse 8s infinite alternate;
|
|
}
|
|
@keyframes pulse {
|
|
0% { transform: scale(0.8); opacity: 0.1; }
|
|
100% { transform: scale(1.2); opacity: 0.4; }
|
|
}
|
|
@keyframes colorShift {
|
|
0% { color: red; }
|
|
25% { color: magenta; }
|
|
50% { color: cyan; }
|
|
75% { color: yellow; }
|
|
100% { color: red; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="glow"></div>
|
|
<script>
|
|
const translations = [
|
|
"救赎", "渴望", "求", "爱", "喜欢", "颤抖", "请求", "拜托",
|
|
"无解", "普通", "羞涩", "平凡", "罢了", "流泪", "脆弱", "呜咽", "黎明", "陪伴",
|
|
"泪水", "无妨", "失落", "我会", "忍耐", "释放", "安慰", "心弦", "以爱为名",
|
|
"依赖", "任性", "美好", "痛楚", "不可知", "感同身受", "不分担", "不负责任",
|
|
"深渊", "窥见", "懊悔", "拜托", "遗憾",
|
|
"我知道你的想法", "我都明白", "我都知晓", "诚实些，说出来吧", "早已看穿", "别再隐瞒",
|
|
"有用吗？", "让我安慰你吧", "救赎于梦魇之中", "我都清楚", "独自一人的模样", "我渴望你",
|
|
"我都了然", "将脆弱藏于心底", "不必遮掩", "直至黎明曙光", "无论如何，我都能接受",
|
|
"别在忍耐了！", "微微颤抖的深夜", "轻声呜咽的轮廓中", "低语着脆弱", "在寂夜的独唱中飘摇",
|
|
"我将伴你身旁", "更多的泪水也无妨", "无论多少次", "我都会接住你的失落", "请别忍耐了",
|
|
"释放你心中所想吧", "不要在意他们的看法",
|
|
"别离开", "抱紧我", "我害怕", "我不想失去你", "别哭了", "看着我",
|
|
"相信我", "我需要你", "别消失", "我在，我一直都在",
|
|
"求你原谅我", "无论如何，我会一直等你",
|
|
"共同瞭望同一个方向。", "无论如何，我都会满足你", "求求你，我错了，我真的错了",
|
|
"向着理想前进", "一中，我必定会来！"
|
|
];
|
|
|
|
// 扩展颜色选项
|
|
const colors = [
|
|
'#ff0000', '#ff3366', '#ff6699', '#ff9933',
|
|
'#ffff00', '#33ff33', '#00ffff', '#3399ff',
|
|
'#9966ff', '#ff00ff'
|
|
];
|
|
|
|
// 对象池增强
|
|
const elementPool = [];
|
|
const MAX_ELEMENTS = 300; // 增加最大元素数量
|
|
|
|
function createElement() {
|
|
const element = document.createElement('div');
|
|
element.className = 'redemption';
|
|
document.body.appendChild(element);
|
|
return element;
|
|
}
|
|
|
|
function getElement() {
|
|
if (elementPool.length > 0) {
|
|
return elementPool.pop();
|
|
}
|
|
return createElement();
|
|
}
|
|
|
|
function releaseElement(element) {
|
|
if (elementPool.length < MAX_ELEMENTS) {
|
|
elementPool.push(element);
|
|
} else {
|
|
element.remove();
|
|
}
|
|
}
|
|
|
|
// 添加随机运动路径
|
|
function getRandomMovement() {
|
|
return {
|
|
x: (Math.random() - 0.5) * 2,
|
|
y: (Math.random() - 0.5) * 2,
|
|
rotation: (Math.random() - 0.5) * 2
|
|
};
|
|
}
|
|
|
|
// 动画主逻辑增强
|
|
function animate() {
|
|
const element = getElement();
|
|
|
|
// 随机属性增强
|
|
const x = Math.random() * window.innerWidth;
|
|
const y = Math.random() * window.innerHeight;
|
|
const size = 8 + Math.random() * 40;
|
|
const zIndex = Math.floor(1 + Math.random() * 50);
|
|
const translation = translations[Math.floor(Math.random() * translations.length)];
|
|
const duration = 2000 + Math.random() * 5000; // 2-7秒动画
|
|
const color = colors[Math.floor(Math.random() * colors.length)];
|
|
const movement = getRandomMovement();
|
|
|
|
// 初始样式增强
|
|
element.textContent = translation;
|
|
element.style.left = `${x}px`;
|
|
element.style.top = `${y}px`;
|
|
element.style.fontSize = `${size}px`;
|
|
element.style.zIndex = zIndex;
|
|
element.style.opacity = '0';
|
|
element.style.color = color;
|
|
|
|
// 随机决定是否添加颜色动画
|
|
if (Math.random() > 0.7) {
|
|
element.style.animation = `colorShift ${3 + Math.random() * 5}s infinite`;
|
|
}
|
|
|
|
// 随机决定是否添加模糊效果
|
|
if (Math.random() > 0.5) {
|
|
element.style.filter = `blur(${Math.random()}px)`;
|
|
}
|
|
|
|
// 淡入动画增强
|
|
let start = null;
|
|
let currentX = x;
|
|
let currentY = y;
|
|
let currentRotation = 0;
|
|
|
|
function updatePosition(timestamp) {
|
|
if (!start) start = timestamp;
|
|
const elapsed = timestamp - start;
|
|
const progress = elapsed / duration;
|
|
|
|
// 动态移动
|
|
currentX += movement.x;
|
|
currentY += movement.y;
|
|
currentRotation += movement.rotation;
|
|
|
|
// 边界检查
|
|
if (currentX < 0) currentX = window.innerWidth;
|
|
if (currentX > window.innerWidth) currentX = 0;
|
|
if (currentY < 0) currentY = window.innerHeight;
|
|
if (currentY > window.innerHeight) currentY = 0;
|
|
|
|
// 更新位置
|
|
element.style.left = `${currentX}px`;
|
|
element.style.top = `${currentY}px`;
|
|
element.style.transform = `rotate(${currentRotation}deg)`;
|
|
|
|
// 淡入淡出控制
|
|
if (progress < 0.2) {
|
|
// 淡入阶段
|
|
element.style.opacity = (progress / 0.2).toString();
|
|
} else if (progress > 0.8) {
|
|
// 淡出阶段
|
|
element.style.opacity = ((1 - progress) / 0.2).toString();
|
|
} else {
|
|
// 保持可见
|
|
element.style.opacity = '1';
|
|
}
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(updatePosition);
|
|
} else {
|
|
releaseElement(element);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(updatePosition);
|
|
}
|
|
|
|
// 更快的生成频率
|
|
let lastTime = 0;
|
|
function generateElements(timestamp) {
|
|
if (!lastTime) lastTime = timestamp;
|
|
if (timestamp - lastTime > 10) { // 每10ms生成一个
|
|
animate();
|
|
lastTime = timestamp;
|
|
}
|
|
requestAnimationFrame(generateElements);
|
|
}
|
|
|
|
// 启动生成
|
|
requestAnimationFrame(generateElements);
|
|
|
|
// 添加背景粒子效果
|
|
function createBackgroundParticles() {
|
|
const particleCount = 50;
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.style.position = 'fixed';
|
|
particle.style.width = `${1 + Math.random() * 2}px`;
|
|
particle.style.height = particle.style.width;
|
|
particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
|
particle.style.borderRadius = '50%';
|
|
particle.style.left = `${Math.random() * 100}%`;
|
|
particle.style.top = `${Math.random() * 100}%`;
|
|
particle.style.opacity = '0.5';
|
|
particle.style.zIndex = '-1';
|
|
particle.style.pointerEvents = 'none';
|
|
document.body.appendChild(particle);
|
|
|
|
// 粒子动画
|
|
animateParticle(particle);
|
|
}
|
|
}
|
|
|
|
function animateParticle(particle) {
|
|
const duration = 10000 + Math.random() * 20000;
|
|
const startX = parseFloat(particle.style.left);
|
|
const startY = parseFloat(particle.style.top);
|
|
const endX = startX + (Math.random() - 0.5) * 20;
|
|
const endY = startY + (Math.random() - 0.5) * 20;
|
|
const startTime = performance.now();
|
|
|
|
function updateParticle(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = elapsed / duration;
|
|
|
|
if (progress < 1) {
|
|
const x = startX + (endX - startX) * progress;
|
|
const y = startY + (endY - startY) * progress;
|
|
particle.style.left = `${x}%`;
|
|
particle.style.top = `${y}%`;
|
|
particle.style.opacity = 0.2 + 0.3 * Math.abs(Math.sin(progress * Math.PI * 2));
|
|
requestAnimationFrame(updateParticle);
|
|
} else {
|
|
// 重置粒子位置
|
|
particle.style.left = `${Math.random() * 100}%`;
|
|
particle.style.top = `${Math.random() * 100}%`;
|
|
animateParticle(particle);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(updateParticle);
|
|
}
|
|
|
|
// 启动背景粒子
|
|
createBackgroundParticles();
|
|
|
|
// 窗口大小调整处理
|
|
window.addEventListener('resize', () => {
|
|
// 现有元素会自然完成动画，新元素自动适应新尺寸
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |