HTML&CSS：惊艳！这么漂亮的渐变文字！

这段代码创建了一个具有动态光效的标题，通过 CSS 变量和关键帧动画，实现了一个视觉上吸引人的效果。光效元素在标题周围移动，并且它们的边框半径会不断变化，模拟出光线闪烁的效果。这种效果通常用于吸引用户的注意力，或者为页面添加一些视觉特效。点击获取更多源

演示效果

HTML&CSS

html 复制代码

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

<head>
  <style>
    :root {
      --bgd: #000000;
      --clr-1: #1eb7e6;
      --clr-2: #0ee36a;
      --clr-3: #1039dd;
      --clr-4: #cf0bf2;
    }

    body {
      min-height: 90vh;
      display: grid;
      place-items: center;
      background-color: var(--bgd);
      color: #fff;
      font-family: "Inter", "DM Sans", Arial, sans-serif;
    }

    *,
    *::before,
    *::after {
      font-family: inherit;
      box-sizing: border-box;
    }

    .content {
      text-align: center;
    }

    .title {
      font-size: clamp(3rem, 8vw, 7rem);
      font-weight: 800;
      letter-spacing: clamp(-1.75px, -0.25vw, -3.5px);
      position: relative;
      overflow: hidden;
      background: var(--bgd);
      margin: 0;
      color: #fff;
    }

    .lighting {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      mix-blend-mode: darken;
      pointer-events: none;
    }

    .item_ele {
      overflow: hidden;
      position: absolute;
      width: 60vw;
      height: 60vw;
      background-color: var(--clr-1);
      border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
      filter: blur(1rem);
      mix-blend-mode: overlay;
    }

    .item_ele:nth-of-type(1) {
      top: -50%;
      animation: lighting-border 6s ease-in-out infinite,
        lighting-1 12s ease-in-out infinite alternate;
    }

    .item_ele:nth-of-type(2) {
      right: 0;
      top: 0;
      background-color: var(--clr-3);
      animation: lighting-border 6s ease-in-out infinite,
        lighting-2 12s ease-in-out infinite alternate;
    }

    .item_ele:nth-of-type(3) {
      left: 0;
      bottom: 0;
      background-color: var(--clr-2);
      animation: lighting-border 6s ease-in-out infinite,
        lighting-3 8s ease-in-out infinite alternate;
    }

    .item_ele:nth-of-type(4) {
      right: 0;
      bottom: -50%;
      background-color: var(--clr-4);
      animation: lighting-border 6s ease-in-out infinite,
        lighting-4 24s ease-in-out infinite alternate;
    }

    @keyframes lighting-1 {
      0% {
        top: 0;
        right: 0;
      }

      50% {
        top: 100%;
        right: 75%;
      }

      75% {
        top: 100%;
        right: 25%;
      }

      100% {
        top: 0;
        right: 0;
      }
    }

    @keyframes lighting-2 {
      0% {
        top: -50%;
        left: 0;
      }

      60% {
        top: 100%;
        left: 75%;
      }

      85% {
        top: 100%;
        left: 25%;
      }

      100% {
        top: -50%;
        left: 0;
      }
    }

    @keyframes lighting-3 {
      0% {
        bottom: 0%;
        left: 0;
      }

      40% {
        bottom: 100%;
        left: 75%;
      }

      70% {
        bottom: 40%;
        left: 50%;
      }

      100% {
        bottom: 0%;
        left: 0;
      }
    }

    @keyframes lighting-4 {
      0% {
        bottom: -50%;
        right: 0;
      }

      50% {
        bottom: 0%;
        right: 40%;
      }

      90% {
        bottom: 50%;
        right: 25%;
      }

      100% {
        bottom: -50%;
        right: 0;
      }
    }

    @keyframes lighting-border {
      0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
      }

      25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
      }

      50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
      }

      75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
      }

      100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
      }
    }
  </style>
</head>

<body>
  <div class="content">
    <h1 class="title">
      前端Hardy
      <div class="lighting">
        <div class="item_ele"></div>
        <div class="item_ele"></div>
        <div class="item_ele"></div>
        <div class="item_ele"></div>
      </div>
    </h1>
  </div>
</body>

</html>

HTML 结构

content：定义了一个包含标题的容器，它有一个类名content。
title：定义了一个一级标题元素，用于显示文本"前端Hardy"。它有一个类名title。
lighting：定义了一个包含动态光效的容器，它有一个类名lighting。
item_ele：四个类名为item_ele的div元素，用于创建动态光效。

CSS 样式

:root：定义了一些CSS自定义属性（变量），包括背景色和四种颜色。
body：设置了页面的最小高度、显示方式、背景颜色、文字颜色和字体。
*, *::before, *::after：设置了全局的字体和盒模型。
.content：设置了文本居中。
.title：设置了标题的字体大小、粗细、字间距、位置、背景、外边距和颜色。
.lighting：设置了光效容器的位置、尺寸、混合模式和指针事件。
.item_ele：设置了光效元素的溢出、位置、尺寸、背景颜色、边框半径、模糊效果和混合模式。
.item_ele:nth-of-type(n)：为每个光效元素定义了不同的起始位置、背景颜色和动画。
@keyframes lighting-1、lighting-2、lighting-3、lighting-4：定义了四个关键帧动画，用于控制每个光效元素的移动路径。
@keyframes lighting-border：定义了一个关键帧动画，用于控制光效元素的边框半径变化，从而产生动态的光效。