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

七夏发表于 2024-12-31 18:44:55

<p>这段代码创建了一个具有动态光效的标题，通过 CSS 变量和关键帧动画，实现了一个视觉上吸引人的效果。光效元素在标题周围移动，并且它们的边框半径会不断变化，模拟出光线闪烁的效果。这种效果通常用于吸引用户的注意力，或者为页面添加一些视觉特效。</p>
<h2>演示效果</h2>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/vAEun6t7Od8rxic658GeAFf55eJMLgJ9c9icUSyqrMaabnLRxXYDrbwZuR1FUTVIHamb65grsu0B79CFmBuofJ8A/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>HTML&CSS</h2>
<pre><code><!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>
</code></pre>
<h2>HTML 结构</h2>
<ul>
<li>content：定义了一个包含标题的容器，它有一个类名content。</li>
<li>title：定义了一个一级标题元素，用于显示文本“前端Hardy”。它有一个类名title。</li>
<li>lighting：定义了一个包含动态光效的容器，它有一个类名lighting。</li>
<li>item_ele：四个类名为item_ele的div元素，用于创建动态光效。</li>
</ul>
<h2>CSS 样式</h2>
<ul>
<li>:root：定义了一些CSS自定义属性（变量），包括背景色和四种颜色。</li>
<li>body：设置了页面的最小高度、显示方式、背景颜色、文字颜色和字体。</li>
<li>*, *::before, *::after：设置了全局的字体和盒模型。</li>
<li>.content：设置了文本居中。</li>
<li>.title：设置了标题的字体大小、粗细、字间距、位置、背景、外边距和颜色。</li>
<li>.lighting：设置了光效容器的位置、尺寸、混合模式和指针事件。</li>
<li>.item_ele：设置了光效元素的溢出、位置、尺寸、背景颜色、边框半径、模糊效果和混合模式。</li>
<li>.item_ele:nth-of-type(n)：为每个光效元素定义了不同的起始位置、背景颜色和动画。</li>
<li>@keyframes lighting-1、lighting-2、lighting-3、lighting-4：定义了四个关键帧动画，用于控制每个光效元素的移动路径。</li>
<li>@keyframes lighting-border：定义了一个关键帧动画，用于控制光效元素的边框半径变化，从而产生动态的光效。</li>
</ul>

页: [1]

3BBS's Archiver

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