前端 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>

相关阅读:
计算机前沿（从三次数学危机到量子计算）
解决新版 Kali Linux 在 VMware 虚拟机中设置共享文件夹后依旧寻找不到的问题
长文多图一步步讲清楚：DDD理论、建模与代码实现全流程
快手发布Q2及半年度财报，哪些内容值得关注
RNN简介（深入浅出）
java计算机毕业设计学生生活管理源码+系统+数据库+lw文档
使用FFmpeg转封装为hls(m3u8)流
mybatis之动态SQL语句&分页查询
C# 连接 MySQL 数据库
Makefile(二）

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