<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完全随机网页生成器 - 超级混沌版</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
transition: all 0.1s linear;
}
#chaos-container {
position: relative;
min-height: 100vh;
padding: 20px;
}
.chaos-element {
position: absolute;
transition: all 0.1s linear;
}
.glitch-text {
position: relative;
display: inline-block;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes chaos-move {
0% { transform: translate(0, 0) rotate(0deg); }
10% { transform: translate(20px, -10px) rotate(5deg); }
20% { transform: translate(-15px, 25px) rotate(-10deg); }
30% { transform: translate(30px, 15px) rotate(15deg); }
40% { transform: translate(-25px, -20px) rotate(-20deg); }
50% { transform: translate(10px, 30px) rotate(25deg); }
60% { transform: translate(-5px, -15px) rotate(-30deg); }
70% { transform: translate(20px, 10px) rotate(35deg); }
80% { transform: translate(-30px, 25px) rotate(-40deg); }
90% { transform: translate(15px, -20px) rotate(45deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes color-shift {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
@keyframes scale-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
@keyframes rotate-chaos {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="chaos-container"></div>
<script>
// 超级随机颜色生成器
function getSuperRandomColor() {
const type = Math.random();
if (type < 0.3) {
// 完全随机颜色
return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
} else if (type < 0.6) {
// HSL颜色
return `hsl(${Math.floor(Math.random() * 360)}, ${Math.floor(Math.random() * 100)}%, ${Math.floor(Math.random() * 100)}%)`;
} else {
// 半透明颜色
return `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.random().toFixed(2)})`;
}
}
// 超级随机字体
const superFonts = [
'Arial, sans-serif',
'Georgia, serif',
'Courier New, monospace',
'Verdana, sans-serif',
'Impact, Charcoal, sans-serif',
'Comic Sans MS, cursive',
'Times New Roman, serif',
'Lucida Console, Monaco, monospace',
'Brush Script MT, cursive',
'Garamond, serif',
'Trebuchet MS, sans-serif',
'Palatino, serif',
'Helvetica, sans-serif',
'Futura, sans-serif',
'Didot, serif'
];
function getSuperRandomFont() {
return superFonts[Math.floor(Math.random() * superFonts.length)];
}
// 超级随机文本内容
const superTexts = [
"混沌是宇宙的本质",
"随机性创造无限可能",
"完全不可预测的体验",
"每一次刷新都是一次冒险",
"数字世界的混沌艺术",
"算法生成的奇迹",
"随机 = 惊喜",
"无序中的有序",
"数字混沌理论",
"完全随机网页生成器",
"不可预测的美",
"混沌中的和谐",
"随机生成的艺术品",
"数字抽象表现主义",
"算法美学",
"随机性与创造性",
"混沌系统的可视化",
"完全不可预测的设计",
"数字艺术的边界",
"随机生成的无限可能",
"混沌与秩序的平衡",
"算法创造的视觉体验",
"随机性驱动的设计",
"数字混沌的美学",
"不可预测的视觉语言"
];
function getSuperRandomText() {
return superTexts[Math.floor(Math.random() * superTexts.length)];
}
// 超级随机动画
const superAnimations = [
'chaos-move 0.5s infinite',
'color-shift 2s infinite',
'scale-pulse 1s infinite',
'rotate-chaos 3s linear infinite',
'blink 0.5s infinite',
'shake 0.3s infinite',
'float 2s ease-in-out infinite',
'spin 1s linear infinite',
'none'
];
function getSuperRandomAnimation() {
return superAnimations[Math.floor(Math.random() * superAnimations.length)];
}
// 超级随机边框样式
const superBorderStyles = [
'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset',
'hidden', 'none'
];
function getSuperRandomBorderStyle() {
return superBorderStyles[Math.floor(Math.random() * superBorderStyles.length)];
}
// 超级随机元素类型
const superElementTypes = [
'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
'span', 'blockquote', 'pre', 'code', 'label',
'strong', 'em', 'small', 'mark', 'del', 'ins'
];
function getSuperRandomElementType() {
return superElementTypes[Math.floor(Math.random() * superElementTypes.length)];
}
// 创建超级随机元素
function createSuperRandomElement() {
const elementType = getSuperRandomElementType();
const element = document.createElement(elementType);
// 超级随机样式
element.style.position = 'absolute';
element.style.left = `${Math.random() * 100}%`;
element.style.top = `${Math.random() * 100}%`;
element.style.backgroundColor = getSuperRandomColor();
element.style.color = getSuperRandomColor();
element.style.fontFamily = getSuperRandomFont();
element.style.fontSize = `${Math.floor(Math.random() * 50 + 10)}px`;
element.style.padding = `${Math.floor(Math.random() * 30)}px`;
element.style.margin = `${Math.floor(Math.random() * 20)}px`;
element.style.border = `${Math.floor(Math.random() * 10)}px ${getSuperRandomBorderStyle()} ${getSuperRandomColor()}`;
element.style.borderRadius = `${Math.floor(Math.random() * 50)}px`;
element.style.opacity = Math.random().toFixed(2);
element.style.transform = `rotate(${Math.floor(Math.random() * 360)}deg) scale(${Math.random() * 2 + 0.5})`;
element.style.animation = getSuperRandomAnimation();
element.style.zIndex = Math.floor(Math.random() * 1000);
element.style.width = `${Math.floor(Math.random() * 300 + 50)}px`;
element.style.height = `${Math.floor(Math.random() * 200 + 30)}px`;
element.style.textAlign = Math.random() > 0.5 ? 'center' : 'left';
element.style.overflow = 'hidden';
// 超级随机内容
if (elementType === 'img') {
element.src = `https://picsum.photos/seed/${Math.random()}/200/150`;
element.alt = "随机图片";
} else if (elementType === 'pre') {
element.textContent = `随机代码:\nfunction chaos() {\n return Math.random();\n}\n\n// ${getSuperRandomText()}`;
} else if (elementType === 'blockquote') {
element.textContent = `"${getSuperRandomText()}"`;
} else if (elementType === 'code') {
element.textContent = `Math.random() = ${Math.random().toFixed(6)}`;
} else {
element.textContent = getSuperRandomText();
}
// 添加随机类名
element.className = 'chaos-element';
return element;
}
// 创建超级随机按钮
function createSuperRandomButton() {
const button = document.createElement('button');
// 超级随机样式
button.style.position = 'absolute';
button.style.left = `${Math.random() * 100}%`;
button.style.top = `${Math.random() * 100}%`;
button.style.backgroundColor = getSuperRandomColor();
button.style.color = getSuperRandomColor();
button.style.fontFamily = getSuperRandomFont();
button.style.fontSize = `${Math.floor(Math.random() * 30 + 12)}px`;
button.style.border = `${Math.floor(Math.random() * 5)}px ${getSuperRandomBorderStyle()} ${getSuperRandomColor()}`;
button.style.borderRadius = `${Math.floor(Math.random() * 30)}px`;
button.style.padding = `${Math.floor(Math.random() * 20 + 5)}px ${Math.floor(Math.random() * 30 + 10)}px`;
button.style.cursor = 'pointer';
button.style.transform = `rotate(${Math.floor(Math.random() * 360)}deg)`;
button.style.animation = getSuperRandomAnimation();
button.style.zIndex = Math.floor(Math.random() * 1000);
button.style.boxShadow = `0 0 ${Math.floor(Math.random() * 20)}px ${getSuperRandomColor()}`;
// 超级随机文本
button.textContent = getSuperRandomText().substring(0, Math.floor(Math.random() * 15 + 5));
// 添加点击事件
button.addEventListener('click', function() {
alert(`混沌按钮被点击了！\n按钮文本: ${button.textContent}\n随机数: ${Math.random().toFixed(6)}`);
// 点击后重新生成页面
generateSuperRandomPage();
});
button.className = 'chaos-element';
return button;
}
// 创建超级随机图片
function createSuperRandomImage() {
const img = document.createElement('img');
// 超级随机样式
img.style.position = 'absolute';
img.style.left = `${Math.random() * 100}%`;
img.style.top = `${Math.random() * 100}%`;
img.style.width = `${Math.floor(Math.random() * 300 + 50)}px`;
img.style.height = `${Math.floor(Math.random() * 300 + 50)}px`;
img.style.border = `${Math.floor(Math.random() * 10)}px ${getSuperRandomBorderStyle()} ${getSuperRandomColor()}`;
img.style.borderRadius = `${Math.floor(Math.random() * 50)}px`;
img.style.transform = `rotate(${Math.floor(Math.random() * 360)}deg) scale(${Math.random() * 2 + 0.5})`;
img.style.animation = getSuperRandomAnimation();
img.style.zIndex = Math.floor(Math.random() * 1000);
img.style.opacity = Math.random().toFixed(2);
img.style.boxShadow = `0 0 ${Math.floor(Math.random() * 30)}px ${getSuperRandomColor()}`;
// 随机图片源
img.src = `https://picsum.photos/seed/${Math.random()}/300/300?random=${Math.random()}`;
img.alt = "超级随机图片";
img.className = 'chaos-element';
return img;
}
// 创建超级随机形状
function createSuperRandomShape() {
const shape = document.createElement('div');
// 超级随机样式
shape.style.position = 'absolute';
shape.style.left = `${Math.random() * 100}%`;
shape.style.top = `${Math.random() * 100}%`;
shape.style.backgroundColor = getSuperRandomColor();
shape.style.border = `${Math.floor(Math.random() * 10)}px ${getSuperRandomBorderStyle()} ${getSuperRandomColor()}`;
shape.style.opacity = Math.random().toFixed(2);
shape.style.animation = getSuperRandomAnimation();
shape.style.zIndex = Math.floor(Math.random() * 1000);
shape.style.boxShadow = `0 0 ${Math.floor(Math.random() * 30)}px ${getSuperRandomColor()}`;
// 随机形状
const shapeType = Math.random();
if (shapeType < 0.25) {
// 圆形
shape.style.width = `${Math.floor(Math.random() * 200 + 50)}px`;
shape.style.height = shape.style.width;
shape.style.borderRadius = '50%';
} else if (shapeType < 0.5) {
// 正方形
shape.style.width = `${Math.floor(Math.random() * 200 + 50)}px`;
shape.style.height = shape.style.width;
} else if (shapeType < 0.75) {
// 矩形
shape.style.width = `${Math.floor(Math.random() * 200 + 50)}px`;
shape.style.height = `${Math.floor(Math.random() * 200 + 50)}px`;
} else {
// 三角形
shape.style.width = '0';
shape.style.height = '0';
shape.style.borderLeft = `${Math.floor(Math.random() * 100 + 50)}px solid transparent`;
shape.style.borderRight = `${Math.floor(Math.random() * 100 + 50)}px solid transparent`;
shape.style.borderBottom = `${Math.floor(Math.random() * 200 + 100)}px solid ${getSuperRandomColor()}`;
shape.style.backgroundColor = 'transparent';
}
shape.style.transform = `rotate(${Math.floor(Math.random() * 360)}deg) scale(${Math.random() * 2 + 0.5})`;
shape.className = 'chaos-element';
return shape;
}
// 生成超级随机页面
function generateSuperRandomPage() {
const container = document.getElementById('chaos-container');
container.innerHTML = '';
// 超级随机背景
const bgType = Math.random();
if (bgType < 0.3) {
// 渐变背景
container.style.background = `linear-gradient(${Math.floor(Math.random() * 360)}deg, ${getSuperRandomColor()}, ${getSuperRandomColor()}, ${getSuperRandomColor()})`;
} else if (bgType < 0.6) {
// 径向渐变
container.style.background = `radial-gradient(circle at ${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%, ${getSuperRandomColor()}, ${getSuperRandomColor()}, ${getSuperRandomColor()})`;
} else {
// 纯色背景
container.style.background = getSuperRandomColor();
}
// 超级随机字体
container.style.fontFamily = getSuperRandomFont();
// 创建超级随机元素
const elementCount = Math.floor(Math.random() * 100) + 50; // 50-150个元素
for (let i = 0; i < elementCount; i++) {
const elementType = Math.random();
if (elementType < 0.4) {
container.appendChild(createSuperRandomElement());
} else if (elementType < 0.6) {
container.appendChild(createSuperRandomButton());
} else if (elementType < 0.8) {
container.appendChild(createSuperRandomImage());
} else {
container.appendChild(createSuperRandomShape());
}
}
// 添加超级随机标题
const title = document.createElement('h1');
title.textContent = getSuperRandomText();
title.style.position = 'absolute';
title.style.left = '50%';
title.style.top = '20px';
title.style.transform = 'translateX(-50%)';
title.style.color = getSuperRandomColor();
title.style.fontFamily = getSuperRandomFont();
title.style.fontSize = `${Math.floor(Math.random() * 50 + 30)}px`;
title.style.textAlign = 'center';
title.style.zIndex = '1000';
title.style.textShadow = `0 0 ${Math.floor(Math.random() * 20)}px ${getSuperRandomColor()}`;
title.className = 'chaos-element';
container.appendChild(title);
// 添加超级随机副标题
const subtitle = document.createElement('h2');
subtitle.textContent = getSuperRandomText();
subtitle.style.position = 'absolute';
subtitle.style.left = '50%';
subtitle.style.top = '80px';
subtitle.style.transform = 'translateX(-50%)';
subtitle.style.color = getSuperRandomColor();
subtitle.style.fontFamily = getSuperRandomFont();
subtitle.style.fontSize = `${Math.floor(Math.random() * 30 + 20)}px`;
subtitle.style.textAlign = 'center';
subtitle.style.zIndex = '1000';
subtitle.style.textShadow = `0 0 ${Math.floor(Math.random() * 15)}px ${getSuperRandomColor()}`;
subtitle.className = 'chaos-element';
container.appendChild(subtitle);
// 添加超级随机说明文字
const description = document.createElement('p');
description.textContent = "这是一个完全随机生成的网页！每次刷新都会产生完全不同的效果。点击任何按钮可以重新生成页面。";
description.style.position = 'absolute';
description.style.left = '50%';
description.style.bottom = '20px';
description.style.transform = 'translateX(-50%)';
description.style.color = getSuperRandomColor();
description.style.fontFamily = getSuperRandomFont();
description.style.fontSize = `${Math.floor(Math.random() * 20 + 14)}px`;
description.style.textAlign = 'center';
description.style.zIndex = '1000';
description.style.backgroundColor = getSuperRandomColor();
description.style.padding = '10px';
description.style.borderRadius = '10px';
description.className = 'chaos-element';
container.appendChild(description);
}
// 页面加载时生成超级随机内容
window.addEventListener('load', generateSuperRandomPage);
// 添加自动刷新功能
setInterval(() => {
if (Math.random() > 0.7) { // 30%概率自动刷新
generateSuperRandomPage();
}
}, Math.floor(Math.random() * 5000) + 2000); // 2-7秒随机间隔
// 添加键盘事件 - 按任意键重新生成
document.addEventListener('keydown', function() {
if (Math.random() > 0.5) { // 50%概率响应
generateSuperRandomPage();
}
});
// 添加鼠标移动事件 - 随机响应
document.addEventListener('mousemove', function() {
if (Math.random() > 0.95) { // 5%概率响应
generateSuperRandomPage();
}
});
</script>
</body>
</html>
index.html
index.html