谁说CSS只能布局？看我实现超酷主题切换效果

大家好👋，我是康小汪！今天要带大家探索一个超酷的CSS技巧——主题切换效果！✨

---

整体效果

 

思路：页面包含一个div元素和一个button按钮。div用于展示文本内容，而按钮则用于触发主题切换的功能。

变量定义：通过:root定义了几个CSS变量（如--primary-color, --secondary-color等），用于控制页面的颜色、过渡时间等属性。
基本布局与样式：使用Flexbox布局将页面内容居中显示，并为整个页面设定了背景颜色、字体颜色等基础样式。.card类用于设置卡片的样式，包括内边距、圆角、阴影效果等；button标签定义了按钮的基本样式以及悬停时的缩放效果。
主题切换动画：通过.theme-transition类和@keyframes themeTransition定义了一个从中心点向外扩展的圆形渐变动画，模拟主题切换时的视觉效果。

核心代码 

---

html代码

<div class="card">一键切换主题演示</div>
<button onclick="toggleTheme()">切换主题</button>

 CSS代码

 

:root {
            --primary-color: #ffffff;
            --secondary-color: #f0f0f0;
            --text-color: #333333;
            --transition-duration: 0.5s;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: var(--primary-color);
            color: var(--text-color);
            transition: background-color var(--transition-duration) ease-in-out;
            position: relative;
            overflow: hidden;
        }

        .card {
            padding: 2rem;
            background: var(--secondary-color);
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: 
                background-color var(--transition-duration) ease-in-out,
                color var(--transition-duration) ease-in-out;
            margin-bottom: 1rem;
        }

        button {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            background: #007bff;
            color: white;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        button:hover {
            transform: scale(1.05);
        }

        .theme-transition {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: var(--target-theme);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            animation: themeTransition var(--transition-duration) ease-in-out;
        }

        @keyframes themeTransition {
            0% {
                width: 0;
                height: 0;
                opacity: 1;
            }
            100% {
                width: 200vmax;
                height: 200vmax;
                opacity: 1;
            }
        }

        /* 预定义主题 */
        .theme-dark {
            --primary-color: #2c3e50;
            --secondary-color: #34495e;
            --text-color: #ecf0f1;
        }

        .theme-light {
            --primary-color: #ffffff;
            --secondary-color: #f0f0f0;
            --text-color: #333333;
        }

        .theme-custom {
            --primary-color: #ffe6e6;
            --secondary-color: #ffcccc;
            --text-color: #660000;
        }

---

以上是完整HTML代码和CSS代码 

 获取完整代码，请关注微信公众号：【康小汪】