自定义css属性实现渐变边框动画

原创

已于 2024-09-22 19:36:36 修改 · 1.8k 阅读

标签

#前端 #css #动画

收录于

于 2024-09-17 19:10:32 首次发布

在这里插入图片描述

一、效果分析

它有一个颜色渐变的边框，并且可以360度旋转。
有两个思路：

用border-image设置渐变色边框，再使用@keyframes动画让这个边框动起来；
用两个盒子叠加，底下的盒子设置渐变背景色，并让这个渐变背景动起来，上面的盒子盖在这个盒子上，四周留个间隙，这个间隙就相当于边框了。

这样想来，两个方案都可以实现，第一个方案简单点。我们先用第一个方案实现一下。

二、初步实现

有了上面的分析，我们可以写下以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
   
   
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
   
   
      text-align: center;
      background-color: rgba(10, 12, 18, 1);
      color: white;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    } 

    @keyframes borderRotate {
   
   
      100% {
   
   
        --angle: 420deg;
      }
    }

    :root {
   
   
      --d: 2500ms;
      --angle: 90deg;
      --c1: rgba(168, 239, 255, 1);
      --c2: rgba(168, 239, 255, 0.1);
    }

    .box