前端 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>
相关推荐
excel8 分钟前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip35 分钟前
JavaScript事件流
前端·javascript
赵得C1 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904271 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路1 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa1 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事1 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss1 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
striver_#1 小时前
百度前端社招面经二
前端