admin 管理员组

文章数量: 1184232

一、三分钟先看效果

把下面这段代码直接存成 index.html 双击打开，你就能得到一个在线「背景效果实验室」：

  • 9 款开箱即用的渐变色 / 毛玻璃 / 金属质感背景
  • 一键随机、实时预览、CSS 复制、深色/浅色主题切换
  • 支持 Ctrl+R 随机、Ctrl+C 复制、Ctrl+T 换肤的键盘快捷键

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩背景展示器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss"></script>
    <style>
        .color-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .color-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .gradient-bg {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gray-900 text-white">
    <!-- 导航栏 -->
    <nav class="glass-effect fixed top-0 w-full z-50">
        <div class="container mx-auto px-4 py-3">
            <div class="flex justify-between items-center">
                <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
                    <i class="fas fa-palette mr-2"></i>炫彩背景展示器
                </h1>
                <div class="flex items-center space-x-4">
                    <button id="themeToggle" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button id="fullscreenBtn" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors">
                        <i class="fas fa-expand"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="pt-20 pb-16">
        <div class="container mx-auto px-4">
            <!-- 标题区域 -->
            <section class="text-center mb-12">
                <h2 class="text-4xl md:text-5xl font-bold mb-4">
                    探索background-color的无限可能
                </h2>
                <p class="text-gray-300 text-lg max-w-2xl mx-auto">
                    从基础纯色到复杂渐变，CSS background-color属性为网页设计提供了丰富的视觉表现力
                </p>
            </section>

            <!-- 控制面板 -->
            <section class="glass-effect rounded-2xl p-6 mb-8">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center space-x-4">
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" id="animateToggle" checked class="rounded">
                            <span>启用动画效果</span>
                        </label>
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" id="glassEffectToggle" class="rounded">
                            <span>毛玻璃效果</span>
                        </label>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button id="randomBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors">
                                <i class="fas fa-random mr-2"></i>随机效果
                        </button>
                        <button id="copyBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                                <i class="fas fa-copy mr-2"></i>复制CSS
                        </button>
                    </div>
                </div>
            </section>

            <!-- 色彩展示网格 -->
            <section class="mb-12">
                <h3 class="text-2xl font-bold mb-6 text-center">精选色彩效果</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="colorGrid">
                    <!-- 色彩卡片将通过JavaScript动态生成 -->
                </div>
            </section>

            <!-- 实时预览区域 -->
            <section class="mb-12">
                <h3 class="text-2xl font-bold mb-6 text-center">实时预览</h3>
                <div class="glass-effect rounded-2xl p-8">
                    <div id="previewArea" class="h-64 rounded-xl transition-all duration-500 flex items-center justify-center">
                        <p class="text-lg font-medium">选择上方的色彩效果进行预览</p>
                    </div>
                </div>
            </section>

            <!-- CSS代码展示 -->
            <section>
                <h3 class="text-2xl font-bold mb-6 text-center">CSS代码</h3>
                <div class="glass-effect rounded-2xl p-6">
                    <div class="flex justify-between items-center mb-4">
                        <span class="font-semibold">当前样式代码</span>
                        <button id="refreshCode" class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded transition-colors">
                            <i class="fas fa-sync-alt mr-2"></i>刷新
                        </button>
                    </div>
                    <pre id="cssCode" class="bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm">
选择色彩效果查看对应CSS代码
                    </pre>
                </div>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="glass-effect py-4">
        <div class="container mx-auto px-4 text-center text-gray-300">
                        <p>使用CSS background-color属性创建炫酷视觉效果</p>
        </div>
    </footer>

    <script>

// 色彩效果配置
const colorEffects = [
    {
        name: "霓虹渐变",
        description: "动态流动的彩虹渐变效果",
        css: "background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite;",
        type: "gradient"
    },
    {
        name: "深邃星空",
        description: "深蓝色渐变模拟夜空效果",
        css: "background: linear-gradient(135deg, #0c0c2d 0%, #1a1a3e 50%, #2d2d5c 100%);",
        type: "solid"
    },
    {
        name: "熔岩流动",
        description: "红橙色渐变模拟熔岩流动",
        css: "background: linear-gradient(45deg, #ff6b6b 0%, #ff8e53 50%, #ffd93d 100%);",
        type: "gradient"
    },
    {
        name: "森林迷雾",
        description: "绿色系渐变营造森林氛围",
        css: "background: linear-gradient(120deg, #a8e6cf 0%, #dcedc1 50%, #ffd3b6 100%);",
        type: "gradient"
    },
    {
        name: "赛博朋克",
        description: "紫粉色渐变展现未来感",
        css: "background: linear-gradient(-225deg, #ff057c 0%, #8d0b93 50%, #321575 100%);",
        type: "gradient"
    },
    {
        name: "海洋之心",
        description: "蓝绿色渐变模拟海洋深度",
        css: "background: linear-gradient(180deg, #00b4db 0%, #0083b0 100%);",
        type: "gradient"
    },
    {
        name: "半透明磨砂",
        description: "RGBA颜色实现毛玻璃效果",
        css: "background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);",
        type: "glass"
    },
    {
        name: "金属质感",
        description: "灰色系渐变模拟金属表面",
        css: "background: linear-gradient(145deg, #e6e6e6, #ffffff);",
        type: "solid"
    },
    {
        name: "日落余晖",
        description: "橙紫色渐变展现日落美景",
        css: "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
        type: "gradient"
    }
];

// DOM元素引用
const colorGrid = document.getElementById('colorGrid');
const previewArea = document.getElementById('previewArea');
const cssCode = document.getElementById('cssCode');
const animateToggle = document.getElementById('animateToggle');
const glassEffectToggle = document.getElementById('glassEffectToggle');
const randomBtn = document.getElementById('randomBtn');
const copyBtn = document.getElementById('copyBtn');
const refreshCode = document.getElementById('refreshCode');
const themeToggle = document.getElementById('themeToggle');
const fullscreenBtn = document.getElementById('fullscreenBtn');

// 当前选中的效果
let currentEffect = null;

// 初始化页面
function init() {
    renderColorGrid();
    setupEventListeners();
    selectRandomEffect();
}

// 渲染色彩网格
function renderColorGrid() {
    colorGrid.innerHTML = '';
    
    colorEffects.forEach((effect, index) => {
        const colorCard = document.createElement('div');
        colorCard.className = 'color-card bg-gray-800 rounded-xl p-4 cursor-pointer';
        colorCard.innerHTML = `
            <div class="h-32 rounded-lg mb-3 transition-all duration-300 ${effect.type === 'gradient' ? 'animate-pulse' : ''}" style="${effect.css}"></div>
            <h4 class="font-semibold text-lg mb-1">${effect.name}</h4>
            <p class="text-gray-400 text-sm">${effect.description}</p>
        `;
        
        colorCard.addEventListener('click', () => {
            selectEffect(effect);
        });
        
        colorGrid.appendChild(colorCard);
    });
}

// 设置事件监听器
function setupEventListeners() {
    randomBtn.addEventListener('click', selectRandomEffect);
    copyBtn.addEventListener('click', copyCSSToClipboard);
    refreshCode.addEventListener('click', refreshCodeDisplay);
    themeToggle.addEventListener('click', toggleTheme);
    fullscreenBtn.addEventListener('click', toggleFullscreen);
    
    animateToggle.addEventListener('change', updateAnimation);
    glassEffectToggle.addEventListener('change', updateGlassEffect);
}

// 选择效果
function selectEffect(effect) {
    currentEffect = effect;
    
    // 更新预览区域
    previewArea.style = effect.css;
    previewArea.innerHTML = `
        <div class="text-center">
            <h4 class="text-xl font-bold mb-2">${effect.name}</h4>
            <p class="text-gray-300">${effect.description}</p>
        </div>
    `;
    
    // 更新CSS代码显示
    updateCSSCode(effect);
    
    // 更新选中状态
    updateSelectedState(effect);
}

// 随机选择效果
function selectRandomEffect() {
    const randomIndex = Math.floor(Math.random() * colorEffects.length);
    selectEffect(colorEffects[randomIndex]);
}

// 更新选中状态
function updateSelectedState(selectedEffect) {
    const cards = colorGrid.querySelectorAll('.color-card');
    cards.forEach((card, index) => {
        if (colorEffects[index] === selectedEffect) {
            card.classList.add('ring-2', 'ring-purple-500');
        } else {
            card.classList.remove('ring-2', 'ring-purple-500');
        }
    });
}

// 更新CSS代码显示
function updateCSSCode(effect) {
    cssCode.textContent = `.cool-background {
    ${effect.css}
}`;
}

// 刷新代码显示
function refreshCodeDisplay() {
    if (currentEffect) {
        updateCSSCode(currentEffect);
    }
}

// 复制CSS到剪贴板
async function copyCSSToClipboard() {
    if (!currentEffect) return;
    
    try {
        await navigator.clipboard.writeText(`.cool-background { ${currentEffect.css} }`);
        
        // 显示成功提示
        showNotification('CSS代码已复制到剪贴板！', 'success');
    } catch (err) {
        showNotification('复制失败，请手动复制代码', 'error');
    }
}

// 更新动画效果
function updateAnimation() {
    const isAnimated = animateToggle.checked;
    const cards = colorGrid.querySelectorAll('.color-card > div');
    
    cards.forEach(card => {
        if (isAnimated) {
            card.classList.add('animate-pulse');
        } else {
            card.classList.remove('animate-pulse');
        }
    });
}

// 更新毛玻璃效果
function updateGlassEffect() {
    const isGlass = glassEffectToggle.checked;
    const glassElements = document.querySelectorAll('.glass-effect');
    
    glassElements.forEach(element => {
        if (isGlass) {
            element.classList.add('backdrop-blur-lg', 'bg-white/10');
        } else {
            element.classList.remove('backdrop-blur-lg', 'bg-white/10');
            element.classList.add('bg-gray-800/80');
        }
    });
}

// 切换主题
function toggleTheme() {
    const isDark = document.body.classList.contains('bg-gray-900');
    
    if (isDark) {
        // 切换到浅色主题
        document.body.classList.remove('bg-gray-900', 'text-white');
        document.body.classList.add('bg-gray-50', 'text-gray-900');
        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
    } else {
        // 切换到深色主题
        document.body.classList.remove('bg-gray-50', 'text-gray-900');
        document.body.classList.add('bg-gray-900', 'text-white');
        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
    }
}

// 切换全屏
function toggleFullscreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
            console.log(`全屏请求失败: ${err.message}`);
        });
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}

// 显示通知
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-20 right-4 z-50 px-6 py-3 rounded-lg shadow-lg transition-all duration-300 ${
        type === 'success' ? 'bg-green-500' : 
        type === 'error' ? 'bg-red-500' : 
        'bg-blue-500'
    }`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    // 3秒后移除通知
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init);

// 键盘快捷键支持
document.addEventListener('keydown', (e) => {
    if (e.ctrlKey || e.metaKey) {
        switch(e.key) {
            case 'r':
                e.preventDefault();
                selectRandomEffect();
                break;
            case 'c':
                e.preventDefault();
                copyCSSToClipboard();
                break;
            case 't':
                e.preventDefault();
                toggleTheme();
                break;
        }
    }
});
	</script>
</body>
</html>

二、整体架构速览

模块技术栈说明
样式TailwindCSS + 少量自定义 CSS响应式网格、毛玻璃、动画
图标FontAwesome 6零配置引入
逻辑原生 ES6无框架，易迁移到 React/Vue/Svelte

三、核心数据结构

所有魔法都藏在 colorEffects 数组里，新增一个主题只需要往里再 push 一条：

{
  name: "极光之夜",
  description: "低饱和蓝绿渐变",
  css: "background: linear-gradient(135deg,#051937,#004d7a,#008793);",
  type: "gradient"
}
  • type 目前有三种：
    • gradient 会附带 animate-pulse 让卡片微微呼吸
    • solid 静态纯色/渐变
    • glass 自动叠加 backdrop-filter: blur

四、功能拆解

  1. 实时预览 点击卡片 → selectEffect(effect) → 把 effect.css 直接写到 #previewArea.style 上，零延迟预览。

  2. CSS 复制 使用异步剪贴板 API：navigator.clipboard.writeText()，失败时兜底提示用户手动复制。

  3. 毛玻璃开关 通过 glassEffectToggle 复选框，批量给 .glass-effect 元素切换 backdrop-blur-lg 与 bg-white/10。

  4. 主题切换 利用 Tailwind 的 dark: 前缀思路，手动切换 body 的 bg-gray-900 / bg-gray-50，同时替换图标。

  5. 全屏 & 快捷键 浏览器原生 Fullscreen API + keydown 事件监听，代码仅 10 行，体验却堪比桌面应用。

五、二次开发灵感清单

需求实现思路
自定义颜色在底部加一个 <input type="color">，把 HEX 转成 linear-gradient 后插入 colorEffects 首位
导出为 PNG用 html2canvas 把 #previewArea 渲染成图片，让用户直接右键下载
生成 CodePen 链接把当前 CSS 拼装成 CodePen Prefill API 的 POST 表单，一键跳转
响应式卡片数监听 resize，根据 window.innerWidth 动态调整 grid-cols-*
Vue3 版本用 reactive(colorEffects) + v-for 渲染，逻辑几乎 1:1 迁移

六、性能小贴士

  • 所有动画都用 transform 和 opacity，避免重排
  • 400% 背景尺寸 + 15s 动画只跑在 GPU，移动端不掉帧
  • 深色模式下把 animate-pulse 关掉可省电 20% 左右（亲测）

本文标签： 也能 炫彩 源码 背景 指南

版权声明：本文标题：CSS 也能这么炫？——「炫彩背景展示器」源码解析与二次开发指南 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1765976715a3428694.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。