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:定义了一个关键帧动画,用于控制光效元素的边框半径变化,从而产生动态的光效。
相关推荐
Jokerator1 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
Savior`L4 小时前
CSS知识复习4
前端·css
我要让全世界知道我很低调5 小时前
记一次 Vite 下的白屏优化
前端·css
again4327 小时前
css生效规则
css
Esun_R7 小时前
使用CSS选择器选择列表中最后一个子元素的几种情况
css
iphone1088 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
海底火旺8 小时前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
Allen Bright10 小时前
【CSS-15】深入理解CSS transition-duration:掌握过渡动画的时长控制
前端·css
一天睡25小时11 小时前
一款减轻前端图片命名工作量的图片转换器
前端·javascript·html
梅纳德12 小时前
如何发现一个网站的全部页面?7种方法
html