当前位置：首页 > news >正文

CSS 生成艺术：用代码创造视觉奇迹

news 2026/5/28 8:21:10

CSS 生成艺术：用代码创造视觉奇迹

代码如诗，艺术如画。让我们用 CSS 的魔法，创造出令人惊叹的生成艺术作品。

什么是 CSS 生成艺术？

CSS 生成艺术是指使用 CSS 技术创建的艺术作品，这些作品通常是通过算法、随机性或数学公式生成的。CSS 生成艺术展示了 CSS 的强大能力，它不仅可以用于布局和样式，还可以用于创造复杂的视觉效果。

基础技术

1. CSS 渐变

渐变是 CSS 生成艺术的基础，可以创建丰富的色彩和纹理效果。

/* 线性渐变 */ .linear-gradient { background: linear-gradient(45deg, #667eea, #764ba2); } /* 径向渐变 */ .radial-gradient { background: radial-gradient(circle, #667eea, #764ba2); } /* 锥形渐变 */ .conic-gradient { background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea); } /* 重复渐变 */ .repeating-gradient { background: repeating-linear-gradient( 45deg, #667eea 0px, #667eea 10px, #764ba2 10px, #764ba2 20px ); }

2. CSS 变换

变换可以改变元素的形状、位置和大小，是创建动态效果的关键。

/* 旋转 */ .rotate { transform: rotate(45deg); } /* 缩放 */ .scale { transform: scale(1.5); } /* 倾斜 */ .skew { transform: skew(10deg, 5deg); } /* 组合变换 */ .combined { transform: rotate(45deg) scale(1.5) translate(10px, 20px); }

3. CSS 动画

动画可以让静态的艺术作品动起来，增加视觉冲击力。

@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .animated { animation: pulse 2s ease-in-out infinite; }

生成艺术示例

1. 几何图案

.geometric-pattern { width: 100%; height: 100vh; background: linear-gradient(30deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(150deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(30deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(150deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(60deg, #764ba2 25%, transparent 25.5%, transparent 75%, #764ba2 75%, #764ba2), linear-gradient(60deg, #764ba2 25%, transparent 25.5%, transparent 75%, #764ba2 75%, #764ba2); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; }

2. 波浪效果

.wave-pattern { width: 100%; height: 100vh; background: radial-gradient(circle at 50% 50%, #667eea 0%, transparent 50%), radial-gradient(circle at 50% 50%, #764ba2 0%, transparent 50%); background-size: 100px 100px; animation: wave 3s ease-in-out infinite; } @keyframes wave { 0%, 100% { background-position: 0 0, 50px 50px; } 50% { background-position: 25px 25px, 75px 75px; } }

3. 分形效果

.fractal-pattern { width: 100%; height: 100vh; background: conic-gradient(from 0deg at 50% 50%, #667eea 0deg, transparent 60deg), conic-gradient(from 120deg at 50% 50%, #764ba2 0deg, transparent 60deg), conic-gradient(from 240deg at 50% 50%, #f093fb 0deg, transparent 60deg); background-size: 200px 200px; animation: rotate 10s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

4. 粒子效果

.particle-container { width: 100%; height: 100vh; position: relative; overflow: hidden; background: #1a1a1a; } .particle { position: absolute; width: 4px; height: 4px; background: #667eea; border-radius: 50%; animation: float 5s ease-in-out infinite; } .particle:nth-child(1) { left: 10%; animation-delay: 0s; } .particle:nth-child(2) { left: 20%; animation-delay: 0.5s; } .particle:nth-child(3) { left: 30%; animation-delay: 1s; } .particle:nth-child(4) { left: 40%; animation-delay: 1.5s; } .particle:nth-child(5) { left: 50%; animation-delay: 2s; } .particle:nth-child(6) { left: 60%; animation-delay: 2.5s; } .particle:nth-child(7) { left: 70%; animation-delay: 3s; } .particle:nth-child(8) { left: 80%; animation-delay: 3.5s; } .particle:nth-child(9) { left: 90%; animation-delay: 4s; } @keyframes float { 0%, 100% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) scale(1); opacity: 0; } }

5. 霓虹效果

.neon-effect { width: 100%; height: 100vh; background: #0a0a0a; position: relative; overflow: hidden; } .neon-effect::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background: radial-gradient(circle, #667eea 0%, transparent 70%); transform: translate(-50%, -50%); animation: glow 3s ease-in-out infinite; filter: blur(20px); } .neon-effect::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: radial-gradient(circle, #764ba2 0%, transparent 70%); transform: translate(-50%, -50%); animation: glow 3s ease-in-out infinite reverse; filter: blur(10px); } @keyframes glow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } }

高级技术

1. CSS Houdini

CSS Houdini 是一组 API，允许开发者扩展 CSS 的功能。

/* 使用 Paint API */ .paint-worklet { background-image: paint(circlePattern); --circle-color: #667eea; --circle-size: 20; }

2. CSS 滤镜

滤镜可以创建各种视觉效果，如模糊、亮度、对比度等。

.filter-effect { filter: blur(5px) brightness(1.2) contrast(1.1); } /* 组合滤镜 */ .combined-filter { filter: hue-rotate(90deg) saturate(200%) brightness(1.1); }

3. CSS 混合模式

混合模式可以创建图层之间的混合效果。

.blend-mode { background: linear-gradient(45deg, #667eea, #764ba2); mix-blend-mode: multiply; }

实践案例：创建一个生成艺术画廊

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 生成艺术画廊</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, sans-serif; background: #1a1a1a; color: white; min-height: 100vh; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 20px; } .art-piece { aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; } /* 几何图案 */ .geometric { background: linear-gradient(30deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(150deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(30deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(150deg, #667eea 12%, transparent 12.5%, transparent 87%, #667eea 87.5%, #667eea), linear-gradient(60deg, #764ba2 25%, transparent 25.5%, transparent 75%, #764ba2 75%, #764ba2), linear-gradient(60deg, #764ba2 25%, transparent 25.5%, transparent 75%, #764ba2 75%, #764ba2); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; } /* 波浪效果 */ .wave { background: radial-gradient(circle at 50% 50%, #667eea 0%, transparent 50%), radial-gradient(circle at 50% 50%, #764ba2 0%, transparent 50%); background-size: 100px 100px; animation: wave 3s ease-in-out infinite; } @keyframes wave { 0%, 100% { background-position: 0 0, 50px 50px; } 50% { background-position: 25px 25px, 75px 75px; } } /* 分形效果 */ .fractal { background: conic-gradient(from 0deg at 50% 50%, #667eea 0deg, transparent 60deg), conic-gradient(from 120deg at 50% 50%, #764ba2 0deg, transparent 60deg), conic-gradient(from 240deg at 50% 50%, #f093fb 0deg, transparent 60deg); background-size: 200px 200px; animation: rotate 10s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 霓虹效果 */ .neon { background: #0a0a0a; position: relative; } .neon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background: radial-gradient(circle, #667eea 0%, transparent 70%); transform: translate(-50%, -50%); animation: glow 3s ease-in-out infinite; filter: blur(20px); } .neon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: radial-gradient(circle, #764ba2 0%, transparent 70%); transform: translate(-50%, -50%); animation: glow 3s ease-in-out infinite reverse; filter: blur(10px); } @keyframes glow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } } /* 标签 */ .art-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); font-weight: 500; } </style> </head> <body> <div class="gallery"> <div class="art-piece geometric"> <div class="art-label">几何图案</div> </div> <div class="art-piece wave"> <div class="art-label">波浪效果</div> </div> <div class="art-piece fractal"> <div class="art-label">分形效果</div> </div> <div class="art-piece neon"> <div class="art-label">霓虹效果</div> </div> </div> </body> </html>