前端 CSS 经典:边框转圈动画效果

前言:首先我们要知道 css 动画只对数值类的 CSS 属性起作用。要实现边框转圈动画效果,实际就是渐变背景的旋转。但是在以前,渐变背景是不支持动画的。现在我们可以利用浏览器新出的 Houdini API 来实现这个动画效果。Houdini API 特别强大,允许开发者干扰浏览器渲染过程。其中有一个属性**@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>
相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端