本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

使用纯CSS实现动态渐变文本特效

css 来源：互联网 作者：佚名 发布时间：2023-11-28 22:19:49 人浏览
摘要

如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。 基于以上动图效果可以分析以下是本次动效实现的主要几点： 文

如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。

基于以上动图效果可以分析以下是本次动效实现的主要几点：

  • 文本中有多个颜色的动画
  • 每个颜色显示的半径不同，有大有小
  • 整体动画是有规律的重复进行着

实现过程

接下来开始正式的代码实现过程，通过以上可以分析出会有多个元素来实现颜色的动画，每个元素的动画轨迹和运行速度不一致，但当多个不同颜色的元素和文本结合起来就会产生一种很美丽的效果，这里的动画元素和文本结合是用了一个很重要的属性，混合模式 mix-blend-mode，对于混合模式文本不做详细介绍，这是一个很强大的属性，有兴趣的可以了解看看。

CSS中的mix-blend-mode属性用于控制元素在叠加到其他元素时的混合模式。它可以应用于具有背景色或背景图片的元素，以改变其与父元素或其他元素的混合方式。它可以创建各种视觉效果和创意设计。

布局&样式

html部分比较简单，只需要一个标题和多个动画承载.aurora__item的元素，代码如下。

1

2

3

4

5

6

7

8

<h1 class="title">CSS文本渐变特效

  <div class="aurora">

    <div class="aurora__item"></div>

    <div class="aurora__item"></div>

    <div class="aurora__item"></div>

    <div class="aurora__item"></div>

  </div>

</h1>

CSS部分的内容首先是变量部分，为了后期更好的调整相关参数和值的复用我们定义一部分变量可供后续轻松自定义特效：

1

2

3

4

5

6

7

8

9

10

:root {

    --bg: #000000;

    --clr-1: #00c2ff;

    --clr-2: #33ff8c;

    --clr-3: #ffc640;

    --clr-4: #e54cff;

    --blur: 1rem;

    --fs: clamp(3rem, 8vw, 7rem);

    --ls: clamp(-1.75px, -0.25vw, -3.5px);

}

这些变量定义了背景颜色--bg和四种不同的颜色--clr-1、--clr-2、--clr-3、--clr-4用于极光特效。其他变量控制模糊程度--blur、字体大小--fs和字间距--ls。

.title设置了标题的字体大小、字体粗细和字间距。它还设置了背景颜色，并创建了一个相对定位的上下文，用于后续的极光特效。

1

2

3

4

5

6

7

8

9

10

.title {

    font-size: var(--fs);

    font-weight: 800;

    letter-spacing: var(--ls);

    position: relative;

    overflow: hidden;

    background: var(--bg);

    margin: 0;

    color: #fff;

}

.aurora元素在.title元素内部绝对定位，并覆盖了整个区域。它设置了较高的z-index，以确保它显示在文本上方。mix-blend-mode: darken（选择两个颜色中较暗的部分作为混合结果）属性用于将极光特效的颜色与背景混合。

1

2

3

4

5

.aurora {

    position: absolute;

    z-index: 2;

    mix-blend-mode: darken;

}

aurora__item表示极光特效的每个单独形状。它在aurora元素内部绝对定位，并具有60vw（视口宽度的60%）的宽度和高度。每个形状具有不同的背景颜色和边框半径，创建了独特的形状。filter: blur()属性为每个形状添加了模糊效果：

1

2

3

4

5

6

7

8

9

.aurora__item {

    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(var(--blur));

}

此时的效果如下，因为.aurora设置了较高的z-index，所以文本被遮挡下颜色块的下方。

此时再增加混合模式mix-blend-mode: overlay（通过叠加元素和其父元素或其他元素的颜色，产生一种混合效果）将形状与背景混合。因为父级设置mix-blend-mode: darken（选择两个颜色中较暗的部分作为混合结果），且.title的字体颜色设置#fff白色，所以较暗的部分就是我们的aurora__item元素，此时的效果如下：

动画实现

基于以上的效果进一步增加动画的效果，让这个字体的渐变效果更加有冲击感，使用CSS关键帧创建了极光特效。创建了四个关键帧动画（aurora-1、aurora-2、aurora-3、aurora-4）定义了每个形状的移动分别对应每个aurora__item。

1

2

3

4

.aurora__item:nth-of-type(1) {

    top: -50%;

    animation: aurora-1 12s ease-in-out infinite alternate;

}

每个关键帧动画使用百分比值指定形状的初始和最终位置。例如aurora-1将形状从右上角移动到左上角，然后返回。其他关键帧动画为其他形状定义了类似的移动效果。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

@keyframes aurora-1 {

    0% {

        top: 0;

        right: 0;

    }

    50% {

        top: 100%;

        right: 75%;

    }

    75% {

        top: 100%;

        right: 25%;

    }

    100% {

        top: 0;

        right: 0;

    }

}

基于移动的动画再增加一个元素边框半径变化的动画，创建aurora-border关键帧动画随时间改变了每个形状的边框半径，创建了动态效果。边框半径值在不同的百分比上定义，使不同的元素之间的动画平滑过渡。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

@keyframes aurora-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%;

    }

}

此时就完成了整个文本渐变的动画效果，最后的效果图如下所示：

在线预览

最后

本文解析了通过纯 CSS 实现了一个如同冰岛的极光一般炫酷的文本渐变效果。通过定位和多个具有不同颜色和边框半径值形状的动画，结合mix-blend-mode混合模式实现了这个特效，并定义了CSS变量可以轻松自定义特效。

只需要修改CSS变量部分就可以自定义不同的文本渐变效果，有兴趣的朋友可以尝试看看~
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • CSS利用浮动实现多个盒子并排的方法

    CSS利用浮动实现多个盒子并排的方法
    浮动： 浮动(float)是css样式的一个定位属性，可以使元素脱离正常文档流并浮动在它父容器的左侧或者右侧。 float设置元素在水平浮动，意味

  • 使用纯CSS实现动态渐变文本特效

    使用纯CSS实现动态渐变文本特效
    如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。 基于以上动图效果可

  • 使用CSS实现Logo阴影特效的代码

    使用CSS实现Logo阴影特效的代码
    在线演示 实现 HTML 元素： 1 2 3 4 figure section class=img-bg/section img height=320 width=320 src=https://vitejs.dev/logo-with-shadow.png alt=Vite Logo / /figure CSS样式代

  • CSS3几种实现子容器水平垂直居中的方法介绍

    CSS3几种实现子容器水平垂直居中的方法介绍
    子容器 Flexbox 布局 1 2 3 div style=display: flex;justify-content: center;align-items: center;border:1px solid gray;height:100px;width:100px; div1/div /div 在上述代码中我们

  • css中flexbox和grid的区别小结

    css中flexbox和grid的区别小结
    我们是不是被那些不会按预期排列的元素所影响？这篇文章我们将深入探讨css中flexbox和grid的布局。通过了解他们的主要差异，我们会发现这
  • 使用CSS实现多行文本展开收起效果
    在文章阅读、持续段落、多行文本等场景中经常会遇到有展开收起的需求操作，今天使用CSS实现一下具体的实现流程。 二、实现思路 实现多

  • 纯CSS实现炫酷文本时钟特效的代码

    纯CSS实现炫酷文本时钟特效的代码
    如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。 在这个时钟中，当前时
  • 新CSS Math方法中rem()和mod()的使用
    rem() 函数的基础知识 余数的数学概念来自除法，表示一个数不能平均除以另一个数时的余数。例如，在9 4中，9不是4的倍数，因此4不能平均

  • CSS实现空心尖角的代码介绍

    CSS实现空心尖角的代码介绍
    我记得之前刷面试题的时候，CSS面试题里面赫然有一题是如何用CSS实现三角形，我觉得这个问题确实很经典，我上的前端培训班当初就讲过

  • CSS取消移动端长按元素背景色的方法介绍

    CSS取消移动端长按元素背景色的方法介绍
    在开发微信小程序的时候，发现有的元素长按之后，出现了讨厌人的背景色，这就很奇怪，就想把它去掉，所以这里教一下方法： 在所在元
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计