纯CSS实现一个动态渐变边框

技术小不点

已于 2024-04-16 14:23:20 修改

阅读量1.1k

点赞数 19

分类专栏： css学习文章标签： css3 前端前端框架 html css html5 scss

于 2024-04-16 14:16:52 首次发布

本文链接：https://blog.csdn.net/qq_43237460/article/details/137822487

版权

css学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、原理介绍
- 1.动画部分
- 2.边框部分
二、实现过程
三、完整代码

前言

在现代网页设计中，CSS的丰富功能为我们提供了无限的创作空间。本文将通过一段代码实例详细解析如何使用CSS创建出具有动态渐变边框效果的元素，让网页设计更具视觉冲击力与动感。具体效果如下
在这里插入图片描述

一、原理介绍

1.动画部分

在CSS中，动态效果通常通过动画 @keyframes 规则实现。在这个案例中，我们通过定义一个动画--rotating，它改变的是自定义CSS变量--range的值，这个变量用于控制背景渐变的角度。以下是动画部分的核心代码：

@property --range {
  initial-value: 0deg;
  syntax: '<angle>';
  inherits: false;
}

@keyframes rotating {
  0% {
    --range: 0deg;
  }
  100% {
    --range: 360deg;
  }
}

2.边框部分

为了实现动态渐变边框，我们不是直接给元素添加边框样式，而是巧妙地利用了伪元素::before来模拟边框。此边框采用的是锥形渐变背景，并通过动画改变渐变的角度，这样就形成了动态效果。边框部分的关键代码如下：

.container::before {
  content: '';
  position: absolute;
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 10px;
  z-index: -1;
  background: repeating-conic-gradient(from var(--range), #0ff, #f0f, #0ff, #ff0, #0f0);
  animation: rotating 4s linear infinite;
}

二、实现过程

1.基本结构

HTML结构相对简单，主要包含一个类名为.container的<div>元素：

<div class="container"></div>

2.基本css

除了上述关于动态边框的特定样式外，还需要为.container及其所在环境设置一些基础样式：

body {
  background-color: black;
}

.container {
  background-color: black;
  border-radius: 8px;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 25%;
}

3.核心步骤

动画核心：定义一个CSS动画，比如命名为rotating，让自定义CSS变量（如–range）从一个初始值（如0deg）逐渐过渡到另一个值（如360deg），这代表了渐变色环一圈完整的旋转。
边框模拟：在目标元素（例如.container）的伪元素上应用上述动画，并设置一个锥形或线性渐变作为背景，该渐变的颜色变化依赖于动画中变量–range的值。当动画执行时，由于–range角度的变化，背景渐变也随之旋转，从而形成边框色彩动态变幻的效果。

@property --range {
  initial-value: 0deg;
  syntax: '<angle>';
  inherits: false;
}

@keyframes rotating {
  0% {
    --range: 0deg;
  }
  100% {
    --range: 360deg;
  }
}

.container::before {
	 content: '';
	 position: absolute;
	 left: -10px;
	 top: -10px;
	 width: calc(100% + 20px); /* calc方法可以用来动态计算长度 */
	 height: calc(100% + 20px);
	 border-radius: 10px;
	 z-index: -1;
	 background: repeating-conic-gradient(from var(--range), #0ff, #f0f, #0ff, #ff0, #0f0);
	 animation: rotating 4s linear infinite;
}

三、完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>css动态渐变</title>
    <style>
      body {
        background-color: black;
      }
      .container {
        background-color: black;
        border-radius: 8px;
        width: 200px;
        height: 200px;
      }

      .container::before {
        content: '';
        position: absolute;
        left: -10px;
        top: -10px;
        width: calc(100% + 20px); /* calc方法可以用来动态计算长度 */
        height: calc(100% + 20px);
        border-radius: 10px;
        z-index: -1;
        background: repeating-conic-gradient(from var(--range), #0ff, #f0f, #0ff, #ff0, #0f0);
        animation: rotating 4s linear infinite;
      }
      @property --range {
        initial-value: 0deg;
        syntax: '<angle>';
        inherits: false;
      }
      @keyframes rotating {
        0% {
          --range: 0deg;
        }
        100% {
          --range: 360deg;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <div class="container">
        <span></span>
      </div>
    </div>
  </body>
</html>