EnlightenCode

CSS Houdini API 实现炫酷渐变背景动画卡片 🎨 ​

什么是 CSS Houdini? 🤔 ​

CSS Houdini 是一组低层级 API，它让开发者能够直接访问 CSS 引擎，提供了更强大的 CSS 编程能力。通过 Houdini，我们可以自定义 CSS 的工作方式，创建更丰富的视觉效果。

@property - Houdini 的核心特性 ⚡ ​

基本语法 ​

css
@property --property-name {
  syntax: '<type>';
  inherits: true | false;
  initial-value: <value>;
}

属性说明 📝 ​

  • --property-name: 自定义属性名（必须以--开头）
  • syntax: 属性值类型定义
  • inherits: 是否继承父元素值
  • initial-value: 初始值

支持的 syntax 类型 📊 ​

类型说明示例
<length>长度值10px, 2em
<number>数字1, 2.5
<percentage>百分比50%
<color>颜色#fff, rgb(0,0,0)
<angle>角度45deg, 1turn
<time>时间1s, 300ms
<image>图片url(), linear-gradient()
<transform-function>变换函数rotate(), scale()

高级用法 🚀 ​

  • 可以使用 | 组合多个类型：<length> | <percentage>
  • 支持自定义关键字：jump | skip | leap
  • 可以设置值是否可动画化

实战案例：炫酷渐变背景动画卡片 ✨ ​

效果预览 ​

渐变背景动画卡片

核心代码实现 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变背景动画卡片</title>
    <style>
        /* 设置基础样式 */
        body {
            background-color: black;
            display: flex;
            min-height: 100vh; /* 确保body占满整个视窗高度 */
            margin: 0;
        }

        /* 定义自定义CSS属性 --direc */
        @property --direc {
            syntax: '<angle>'; /* 定义属性类型为角度 */
            initial-value: 0deg; /* 初始值为0度 */
            inherits: false; /* 不继承父元素的值 */
        }

        /* 卡片主体样式 */
        .card {
            --direc: 0deg; /* 初始化自定义属性 */
            position: relative;
            width: 200px;
            height: 300px;
            margin: auto;
            /* 使用自定义属性创建渐变背景 */
            background: linear-gradient(
                var(--direc),
                #5ddcff,
                #3c67e3 43%,
                #4e00c2
            );
            border-radius: 15px; /* 添加圆角 */
            /* 应用动画 */
            animation: spin 3s linear infinite;
        }

        /* 发光效果层 */
        .card::before {
            content: '';
            position: absolute;
            inset: 0; /* 等同于 top:0; right:0; bottom:0; left:0 */
            background: inherit; /* 继承父元素的背景 */
            border-radius: inherit;
            z-index: -1;
            filter: blur(20px); /* 创建发光效果 */
        }

        /* 内部暗色层 */
        .card::after {
            content: '';
            position: absolute;
            inset: 8px; /* 缩小内边距创建边框效果 */
            background-color: #191c29;
            border-radius: inherit;
        }

        /* 定义动画关键帧 */
        @keyframes spin {
            to {
                --direc: 360deg; /* 旋转完整一圈 */
            }
        }
    </style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

常用demo代码(实现渐变色的过渡效果)

css
@property --btnColor1 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(97, 98, 255, 1);
}

@property --btnColor2 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(97, 98, 255, 1);
}

.sendButton {
  --btnColor1: rgba(97, 98, 255, 1);
  --btnColor2: rgba(97, 98, 255, 1);
  background: linear-gradient(135deg, var(--btnColor1) 0%, var(--btnColor2) 100%);
  transition: --btnColor1 0.3s ease, --btnColor2 0.3s ease;
}

.sendButton:hover {
  --btnColor1: #6162FF;
  --btnColor2: #A76CFA;
}

浏览器兼容性 🌐 ​

  • Chrome 85+
  • Edge 85+
  • Opera 71+
  • Safari 15+

注意事项 ⚠️ ​

  1. 确保检查目标浏览器是否支持 @property
  2. 可以使用 @supports 进行优雅降级
  3. 动画性能优化：建议使用 transform 代替直接改变尺寸或位置
  4. 避免过度使用复杂的渐变动画，可能影响性能

扩展应用场景 💡 ​

  • 自定义过渡动画
  • 渐变文本效果
  • 动态边框动画
  • 高级加载动画

参考资料 📚 ​