<!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 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Arial', sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
.header {
text-align: center;
padding: 2rem;
color: white;
position: relative;
z-index: 10;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.art-piece {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
cursor: pointer;
}
.art-piece:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.canvas-container {
width: 100%;
height: 200px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 1rem;
}
canvas {
width: 100%;
height: 100%;
}
.art-info {
color: white;
text-align: center;
}
.art-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
font-weight: bold;
}
.art-description {
font-size: 0.9rem;
opacity: 0.8;
}
.controls {
text-align: center;
padding: 2rem;
}
button {
background: rgba(255,255,255,0.2);
border: 2px solid white;
color: white;
padding: 1rem 2rem;
font-size: 1.1rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
button:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.05);
}
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255,255,255,0.6);
border-radius: 50%;
animation: float 6s infinite linear;
}
@keyframes float {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(100px);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="header">
<h1>🌀 随机数字艺术画廊</h1>
<p class="subtitle">每次刷新都会生成全新的艺术作品</p>
</div>
<div class="gallery" id="gallery"></div>
<div class="controls">
<button onclick="generateNewArt()">🎨 生成新作品</button>
</div>
<script>
// 创建背景粒子效果
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 6 + 's';
particle.style.width = (Math.random() * 6 + 2) + 'px';
particle.style.height = particle.style.width;
particlesContainer.appendChild(particle);
}
}
// 随机艺术生成器
function generateArt(canvas) {
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
// 清空画布
ctx.clearRect(0, 0, width, height);
// 随机背景色
const bgHue = Math.random() * 360;
ctx.fillStyle = `hsl(${bgHue}, 70%, 20%)`;
ctx.fillRect(0, 0, width, height);
// 随机几何图形
const shapeCount = Math.floor(Math.random() * 20) + 10;
for (let i = 0; i < shapeCount; i++) {
const shapeType = Math.floor(Math.random() * 4);
const x = Math.random() * width;
const y = Math.random() * height;
const size = Math.random() * 50 + 10;
const hue = (bgHue + Math.random() * 120) % 360;
const opacity = Math.random() * 0.8 + 0.2;
ctx.fillStyle = `hsla(${hue}, 80%, 60%, ${opacity})`;
ctx.strokeStyle = `hsla(${(hue + 180) % 360}, 80%, 70%, ${opacity})`;
ctx.lineWidth = 2;
switch (shapeType) {
case 0: // 圆形
ctx.beginPath();
ctx.arc(x, y, size/2, 0, Math.PI * 2);
if (Math.random() > 0.5) {
ctx.fill();
} else {
ctx.stroke();
}
break;
case 1: // 矩形
if (Math.random() > 0.5) {
ctx.fillRect(x, y, size, size);
} else {
ctx.strokeRect(x, y, size, size);
}
break;
case 2: // 三角形
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + size, y + size/2);
ctx.lineTo(x, y + size);
ctx.closePath();
if (Math.random() > 0.5) {
ctx.fill();
} else {
ctx.stroke();
}
break;
case 3: // 线条
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + Math.random() * 100 - 50, y + Math.random() * 100 - 50);
ctx.stroke();
break;
}
}
// 添加噪点效果
for (let i = 0; i < 100; i++) {
const x = Math.random() * width;
const y = Math.random() * height;
const opacity = Math.random() * 0.5;
ctx.fillStyle = `rgba(255,255,255,${opacity})`;
ctx.fillRect(x, y, 1, 1);
}
}
// 艺术品标题生成器
function generateArtTitle() {
const adjectives = ['抽象', '梦幻', '未来', '神秘', '流动', '几何', '数字', '虚拟', '量子', '无限'];
const nouns = ['宇宙', '梦境', '网络', '数据流', '代码', '算法', '像素', '光线', '维度', '时空'];
const verbs = ['融合', '交织', '绽放', '演化', '共振', '穿越', '映射', '转换', '生成', '涌现'];
const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
const noun = nouns[Math.floor(Math.random() * nouns.length)];
const verb = verbs[Math.floor(Math.random() * verbs.length)];
return `${adj}${noun}${verb}`;
}
// 艺术品描述生成器
function generateArtDescription() {
const descriptions = [
'由算法随机生成的数字艺术作品',
'探索虚拟与现实边界的视觉体验',
'色彩与几何的诗意对话',
'数字化时代的抽象表达',
'代码与创意的完美融合',
'随机性中的美学秩序',
'科技与艺术的跨界合作',
'像素级别的精致构造'
];
return descriptions[Math.floor(Math.random() * descriptions.length)];
}
// 创建艺术画廊
function createGallery() {
const gallery = document.getElementById('gallery');
gallery.innerHTML = '';
const artCount = 12;
for (let i = 0; i < artCount; i++) {
const artPiece = document.createElement('div');
artPiece.className = 'art-piece';
const canvasContainer = document.createElement('div');
canvasContainer.className = 'canvas-container';
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const artInfo = document.createElement('div');
artInfo.className = 'art-info';
const title = document.createElement('div');
title.className = 'art-title';
title.textContent = generateArtTitle();
const description = document.createElement('div');
description.className = 'art-description';
description.textContent = generateArtDescription();
canvasContainer.appendChild(canvas);
artInfo.appendChild(title);
artInfo.appendChild(description);
artPiece.appendChild(canvasContainer);
artPiece.appendChild(artInfo);
gallery.appendChild(artPiece);
// 生成艺术作品
generateArt(canvas);
}
}
// 生成新艺术作品
function generateNewArt() {
createGallery();
}
// 初始化
window.onload = function() {
createParticles();
createGallery();
};
</script>
</body>
</html>
index.html
index.html