前端高级技巧，如何让渐变边框动起来

欢迎来到前端的日常，前端宝典持续更新，目前已经有200+道面试题，更多面试题可以到前端宝典进行查看，快来刷题吧~

前言

在前端开发中，动态效果不仅可以提升用户体验，还能为页面增添视觉吸引力。CSS Houdini 是一项强大的技术，它允许开发者直接操作 CSS 的底层渲染机制，实现一些传统 CSS 无法完成的效果。今天，我们将探讨如何使用 CSS Houdini 实现一个动态旋转的边框效果。

什么是 CSS Houdini？

CSS Houdini 是一组新的 CSS API，允许开发者直接操作 CSS 的渲染过程。它包括 @property、Paint Worklet 和 Animation Worklet 等功能。通过这些 API，开发者可以创建自定义的 CSS 属性和动画，实现复杂的视觉效果。

实现动态旋转边框

我们将使用 CSS Houdini 的 @property 来实现一个动态旋转的边框效果。以下是完整的代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>document</title>
    <style>
      body {
        background: #000;
      }
      .card::before {
        z-index: -1;
        filter: blur(20px);
      }
      .card::after {
        content: "";
        position: absolute;
        inset: 8px;
        background: #191c29;
        border-radius: inherit;
      }
      @property --direc {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      .card {
        position: relative;
        width: 200px;
        height: 400px;
        margin: 100px auto;
        --direc: 0deg;
        color: red;
        background-image: linear-gradient(
          var(--direc),
          #5ddcff,
          #3c67e3,
          43%,
          #4e00c2
        );
        animation: rotate 3s linear infinite;
      }
      @keyframes rotate {
        to {
          --direc: 360deg;
        }
      }
    </style>
  </head>
  <body>
    <div class="card"></div>
    <script></script>
  </body>
</html>

代码解析

HTML 结构
- 一个简单的 div 元素，类名为 box，用于展示动态旋转的边框。
CSS 样式
- body ：设置背景颜色，居中显示 box。
- .box ：设置宽度、高度和背景颜色，使用 position: relative 和 overflow: hidden 确保边框不会超出盒子。
- .box::before ：使用伪元素创建边框，设置 border 为透明，背景使用 linear-gradient 渐变效果。
- @keyframes rotate ：定义一个旋转动画，从 0deg 到 360deg，持续时间为 5s，线性变化，无限循环。

实际应用场景

这种动态旋转边框效果可以应用于多种场景，例如登录页面、首页背景、卡片效果等。它可以为页面增添视觉吸引力，提升用户体验。