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

前言：首先我们要知道 css 动画只对数值类的 CSS 属性起作用。要实现边框转圈动画效果，实际就是渐变背景的旋转。但是在以前，渐变背景是不支持动画的。现在我们可以利用浏览器新出的 Houdini API 来实现这个动画效果。Houdini API 特别强大，允许开发者干扰浏览器渲染过程。其中有一个属性@property 允许开发者在样式代码里面，自己定义样式属性。

效果图：

代码实现：


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>documenttitle>
    <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: "";
        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>

相关阅读:
【板栗糖GIS】arcmap—如何在表格空值处进行批量求和
C++多态详细解析+代码演示
python读取CSV格式文件，遇到的问题20231007
java实现wav的重采样
【Python开发】FastAPI 07：Depends 依赖注入
Java方法重载与方法重写的区分
.NET 零开销抽象指南
grpc 编译
地平线GitLab使用指导
那些年那些神码

原文地址：https://blog.csdn.net/weixin_64684095/article/details/139815901