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

Lemon Flower

已于 2024-09-22 19:36:36 修改

阅读量670

点赞数 8

文章标签：前端 css 动画

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

本文链接：https://blog.csdn.net/weixin_44350560/article/details/142316408

版权

在这里插入图片描述

一、效果分析

它有一个颜色渐变的边框，并且可以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 {
      font-size: 3vw;
      margin: 1rem;
      border: 0.35rem solid;
      padding: 3vw;
      border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
      animation: borderRotate var(--d) linear infinite forwards;
    }
  </style>
</head>

<body>
  <div class="box">
      <p>winter is coming</p>
    </div>
</body>

</html>

如上，这里使用conic-gradient渐变，用**–angle**自定义变量定义了一个起始角度，定义了一个@keyframes动画，动态改变这个变量。
但是把代码运行后，发现并没有实现预期的效果，动画没有动起来。

三、分析原因

上面的代码理论上是没有问题的。
动画的本质就是在一定的时间内，把一个数值变成另一个数值。比如高度从1px到100px，旋转角度从90deg到180deg。
这么看来，我们这里把自定义变量从90deg变到420deg也是没有问题的。
问题就出在这是个自定义变量身上。
在css中让动画生效要满足两个条件：

改动的是属性；
改动的属性是数值。

我们这里虽然是一个数值，但是它是我们自定义的一个变量，不是一个属性。
那么我们有办法让它变成一个属性吗？
在以前是没有办法的，但是现在我们有了Houdini API，它让我们的想法得以实现。
CSS Houdini API 的初步规范和概念最早在 2016 年左右提出，在2017 年至 2018 年间逐渐成熟并开始实验性支持。
它让我们可以通过css或者javascript去参与浏览器渲染过程中的布局、绘制和合成过程。
虽然这套api已经提出很多年了，但是他的很多方法仍然在实验阶段。当然，也有一些css方法是可以用了，就比如下面要分享的——自定义css属性。

四、自定义css属性

 @property --angle {
      syntax: '<angle>';
      initial-value: 90deg;
      inherits: true;
    }

syntax：表示这是一个什么类型的属性 angle代表角度，这里也可以写入color、time之类的值；CSS 基本数据类型
initial-value：初始值；
inherits：此属性是否可继承。

有了以上知识，我们就可以把之前的自定义变量改写成自定义属性了。

<!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>
    @import url("https://fonts.googleapis.com/css?family=Raleway:400");

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

    @property --angle {
      syntax: '<angle>';
      initial-value: 90deg;
      inherits: true;
    }

    @property --gradX {
      syntax: '<percentage>';
      initial-value: 50%;
      inherits: true;
    }

    @property --gradY {
      syntax: '<percentage>';
      initial-value: 0%;
      inherits: true;
    }

    body {
      font-family: Raleway, sans-serif;
      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;
    }

    p {
      margin: 0;
    }

    

    .wrapper {
      min-width: min(40rem, 100%);
    }

    .box {
      font-size: 3vw;
      margin: max(1rem, 3vw);
      border: 0.35rem solid;
      padding: 3vw;
      border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
      animation: borderRotate var(--d) linear infinite forwards;
    }

    .box:nth-child(2) {
      border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
      animation: borderRadial var(--d) linear infinite forwards;
    }

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

    @keyframes borderRadial {
      20% {
        --gradX: 100%;
        --gradY: 50%;
      }

      40% {
        --gradX: 100%;
        --gradY: 100%;
      }

      60% {
        --gradX: 50%;
        --gradY: 100%;
      }

      80% {
        --gradX: 0%;
        --gradY: 50%;
      }

      100% {
        --gradX: 50%;
        --gradY: 0%;
      }
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="box">
      <p>hello css</p>
    </div>

    <div class="box">
      <p>winter is coming</p>
    </div>
  </div>

</body>

</html>