HTML&CSS：惊艳！动态渐变文字特效（附源码）

七夏（UID：1） · 发表于 2024-12-31 18:44:55

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

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

演示效果

HTML&CSS

<!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-112s 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-212s 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-38s 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-424s 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：定义了一个关键帧动画，用于控制光效元素的边框半径变化，从而产生动态的光效。

HTML&CSS：惊艳！动态渐变文字特效（附源码）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

演示效果

HTML&CSS

HTML 结构

CSS 样式

相关帖子

快速回帖

分享帝

龙年限定

蛇年限定

关于楼主

商务推广