前端 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>
相关推荐
不如摸鱼去6 分钟前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
IT_陈寒1 小时前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端1 小时前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家1 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞1 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手1 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞1 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor2 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i2 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor2 小时前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫