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

CSS 变量进阶：动态主题与复杂动画

news 2026/6/24 13:48:22

CSS 变量进阶：动态主题与复杂动画

从基础到高级，掌握 CSS 变量的全部潜能。

一、CSS 变量的强大之处

作为一名把 CSS 视为流动韵律的 UI 匠人，我深知 CSS 变量的革命性意义。它们不仅让样式代码更易维护，还开启了动态主题、复杂动画和响应式设计的新可能性。就像音乐中的音符，CSS 变量让样式代码有了更多的表现力和灵活性。

二、基础回顾

:root { --primary-color: #667eea; --secondary-color: #764ba2; --font-size-base: 1rem; --spacing-unit: 0.25rem; } .button { background: var(--primary-color); padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6); font-size: var(--font-size-base); }

三、高级应用

1. 动态主题切换

:root { /* 浅色主题 */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --text-primary: #333333; --text-secondary: #666666; --accent-color: #667eea; } [data-theme="dark"] { /* 深色主题 */ --bg-primary: #1a1a1a; --bg-secondary: #2d2d2d; --text-primary: #ffffff; --text-secondary: #cccccc; --accent-color: #8a70e6; } [data-theme="purple"] { /* 紫色主题 */ --bg-primary: #f5f3ff; --bg-secondary: #ede9fe; --text-primary: #4c1d95; --text-secondary: #6d28d9; --accent-color: #7e22ce; } /* 应用主题 */ body { background: var(--bg-primary); color: var(--text-primary); transition: all 0.3s ease; } .card { background: var(--bg-secondary); border: 1px solid var(--accent-color); border-radius: 8px; padding: 1rem; } .button { background: var(--accent-color); color: var(--bg-primary); padding: 0.75rem 1.5rem; border: none; border-radius: 6px; cursor: pointer; }

2. 复杂动画

:root { --animation-duration: 2s; --animation-easing: cubic-bezier(0.4, 0, 0.2, 1); --rotation-angle: 0deg; --scale-factor: 1; --opacity-value: 1; } .animated-box { width: 200px; height: 200px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 8px; animation: complexAnimation var(--animation-duration) var(--animation-easing) infinite; transform: rotate(var(--rotation-angle)) scale(var(--scale-factor)); opacity: var(--opacity-value); } @keyframes complexAnimation { 0%, 100% { --rotation-angle: 0deg; --scale-factor: 1; --opacity-value: 1; } 25% { --rotation-angle: 15deg; --scale-factor: 1.1; --opacity-value: 0.8; } 50% { --rotation-angle: 0deg; --scale-factor: 1.2; --opacity-value: 1; } 75% { --rotation-angle: -15deg; --scale-factor: 1.1; --opacity-value: 0.8; } }

3. 响应式设计

:root { --container-width: 100%; --font-size: 16px; --spacing: 1rem; --columns: 1; } @media (min-width: 640px) { :root { --container-width: 90%; --font-size: 18px; --spacing: 1.5rem; --columns: 2; } } @media (min-width: 1024px) { :root { --container-width: 80%; --font-size: 20px; --spacing: 2rem; --columns: 3; } } .container { width: var(--container-width); margin: 0 auto; padding: var(--spacing); font-size: var(--font-size); } .grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); gap: var(--spacing); }

四、JavaScript 交互

// 主题切换 function setTheme(theme) { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('theme', theme); } // 从本地存储加载主题 const savedTheme = localStorage.getItem('theme') || 'light'; setTheme(savedTheme); // 动态修改变量 function updateAnimation() { const duration = document.getElementById('duration').value; document.documentElement.style.setProperty('--animation-duration', `${duration}s`); } // 颜色拾取器 function updateAccentColor(color) { document.documentElement.style.setProperty('--accent-color', color); }