使用纯CSS实现动态渐变文本特效
如图所示,这是一个炫酷的文本渐变效果,如同冰岛的极光一般。本次的文章让我们逐步分解代码,了解其实现原理。
基于以上动图效果可以分析以下是本次动效实现的主要几点:
• 文本中有多个颜色的动画
• 每个颜色显示的半径不同,有大有小
• 整体动画是有规律的重复进行着
实现过程
接下来开始正式的代码实现过程,通过以上可以分析出会有多个元素来实现颜色的动画,每个元素的动画轨迹和运行速度不一致,但当多个不同颜色的元素和文本结合起来就会产生一种很美丽的效果,这里的动画元素和文本结合是用了一个很重要的属性,混合模式 mix-blend-mode,对于混合模式文本不做详细介绍,这是一个很强大的属性,有兴趣的可以了解看看。
CSS中的mix-blend-mode属性用于控制元素在叠加到其他元素时的混合模式。它可以应用于具有背景色或背景图片的元素,以改变其与父元素或其他元素的混合方式。它可以创建各种视觉效果和创意设计。
布局&样式
html部分比较简单,只需要一个标题和多个动画承载.aurora__item的元素,代码如下。
<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部分的内容首先是变量部分,为了后期更好的调整相关参数和值的复用我们定义一部分变量可供后续轻松自定义特效:
: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设置了标题的字体大小、字体粗细和字间距。它还设置了背景颜色,并创建了一个相对定位的上下文,用于后续的极光特效。
.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(选择两个颜色中较暗的部分作为混合结果)属性用于将极光特效的颜色与背景混合。
.aurora { position: absolute; z-index: 2; mix-blend-mode: darken; }
aurora__item表示极光特效的每个单独形状。它在aurora元素内部绝对定位,并具有60vw(视口宽度的60%)的宽度和高度。每个形状具有不同的背景颜色和边框半径,创建了独特的形状。filter: blur()属性为每个形状添加了模糊效果:
.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。
.aurora__item:nth-of-type(1) { top: -50%; animation: aurora-1 12s ease-in-out infinite alternate; }
每个关键帧动画使用百分比值指定形状的初始和最终位置。例如aurora-1将形状从右上角移动到左上角,然后返回。其他关键帧动画为其他形状定义了类似的移动效果。
@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关键帧动画随时间改变了每个形状的边框半径,创建了动态效果。边框半径值在不同的百分比上定义,使不同的元素之间的动画平滑过渡。
@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
网站开发
小程序开发
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)
查看详情 -
3. 微信支付商户申请接入流程
微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情