本文将讲解如何利用 background 系列属性,巧妙的实现一些花式的文字效果。通过本文,你将可以学到:

  • 通过 background-sizebackground-position 实现酷炫的文字下划线效果
  • 通过 background-sizebackground-position 以及 background-clip 实现文字逐个渐现的效果
  • 通过 animation-delay 实现文字的渐现效果

起因

写本文的动机是在于,某天,被这样一个标题所吸引 -- 10 Masterfully Designed Websites,其中列举了 10 个极具创意的 Web 网站。

其中一个 Red Bull Racing 网站,是介绍关于 F1 红牛车队的主页。其中有这样一个非常有意思的 Hover 动画效果:

这个文字的 hover 出现效果,看似简单,其实想要完全实现它,仅仅依靠 CSS 是非常复杂的,其中一个比较难的地方在于 -- 如何让一个效果,逐渐作用给整段文字中的部分,而不是一次将整个效果赋予整段文本。

利用 background 实现文字的下划线效果

到这里,我想起了之前在这篇文章中 -- CSS 文字装饰 text-decoration & text-emphasis,我介绍的一种 使用 background 模拟下划线 的效果。

看个简单的 DEMO,使用 background 模拟文字的下划线效果:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>
p {
width: 600px;
font-size: 24px;
color: #666;
}
a {
background: linear-gradient(90deg, #0cc, #0cc);
background-size: 100% 3px;
background-repeat: no-repeat;
background-position: 100% 100%;
color: #0cc;
}

使用 background 模拟文字的下划线效果,效果图如下:

又或者,使用 background 模拟虚线下划线:

a {
background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: 100% 100%;
}

CodePen Demo -- 使用 background 模拟下划线与虚线下划线

当然这个是最基础的,巧妙的运用 background 的各种属性,我们实现各种有意思的效果。

巧妙改变 background-sizebackground-position 实现文字 hover 动效

这里,通过巧妙改变 background-sizebackground-position 属性,我们可以实现一些非常有意思的文字 hover 效果。

先看这样一个 Demo,核心代码作用于被 <p> 标签包裹的 <a> 标签之上:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>
a {
background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
background-size: 0 3px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: 1s all;
color: #0cc;
} a:hover {
background-size: 100% 3px;
color: #000;
}

我们虽然,设定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff),但是一开始默认它的 background-size: 0 3px,也就是一开始是看不到下划线的,当 hover 的时候,改变 background-size: 100% 3px,这个时候,就会有一个 0 3px100% 3px 的变换,也就是一个从无到有的伸展效果。

看看最后的效果:

由于设定的 background-position0 100%,如果,设定的 background-position100% 100%,我们可以得到一个反向的效果:

// 其他都保持一致,只改变 background-position,从 0 100% 改为 100% 100%
a {
...
background-position: 100% 100%;
...
}

再看看效果,你可以对比着上面的动图看看具体的差异点在哪:

CodePen Demo -- background underline animation

OK,如果我们使用 background 实现两条重叠的下划线,再利用上述的两个不同的 background-position 值,我们就可以得到一个更有意思的下划线 hover 效果。

CSS 代码示意,注意看两条使用 background 模拟的下划线的 background-position 的值是不一样的:

a {
background:
linear-gradient(90deg, #0cc, #0cc),
linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
background-size: 100% 3px, 0 3px;
background-repeat: no-repeat;
background-position: 100% 100%, 0 100%;
transition: 0.5s all;
color: #0cc;
}
a:hover {
background-size: 0 3px, 100% 3px;
color: #000;
}

可以得到这样一种效果,其实每次 hover, 都有两条下划线在移动:

CodePen Demo -- background underline animation

通过 background-sizebackground-position 配合 background-clip 实现文字的渐现

上述一大段都在围绕 -- 下划线

回归到本文一开始提到的 Gif 效果,我们能否实现在一段文字中,实现文字的渐现效果呢?

上述技巧利用的是 background,那么 background 背景色能否改变文字的颜色的?答案是可以的,只需要借助 background-clip

我们稍微改造下代码,实现利用 background-clip 实现 hover 的时候部分文字逐渐改变颜色:

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, </a>
molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
</p>
p {
color: #666;
cursor: pointer;
} a {
background: linear-gradient(90deg, #fc0, #fc0);
background-size: 0 100px;
background-repeat: no-repeat;
background-position: 0 100%;
background-clip: text;
transition: .6s all linear;
} p:hover a {
background-size: 100% 100%;
color: transparent;
}

看看效果,通过 background-clip: text 的遮罩裁剪,我们将 background: linear-gradient(90deg, #fc0, #fc0) 背景色作用给了文字,同时利用 color: transparent 让文字展示出背景色的色值:

CodePen Demo -- background-size 与 background-position 以及 background-clip 实现文字逐个渐现

当然,稍微对上述代码变形,我们就可以演化出几种不同的效果。

实现整段文字的渐现 - 从透明到出现

第一种就是从透明到有颜色,逐渐展现,这里我们只需要让 color 一直是 transparent 即可(下述效果借助了一个按钮去触发效果):

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>
a {
background: linear-gradient(90deg, #fc0, #fc0);
background-size: 0 100px;
background-repeat: no-repeat;
background-position: 0 100%;
color: transparent;
background-clip: text;
}
.button:hover ~ p a {
transition: .8s all linear;
background-size: 0 100px, 100% 100%;
}

效果如下:

实现整段文字的渐现 - 从一种颜色到另外一种颜色

还可以实现文字从一种颜色到另外一种颜色的逐个转变,只需要添加多一层 background-image 渐变。

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>
a {
background:
linear-gradient(90deg, #999, #999),
linear-gradient(90deg, #fc0, #fc0);
background-size: 100% 100%, 0 100px;
background-repeat: no-repeat;
background-position: 100% 100%, 0 100%;
color: transparent;
background-clip: text;
}
.button:hover ~ p a {
transition: .8s all linear;
background-size: 0 100px, 100% 100%;
}

这里需要解释一下,虽然设置了 color: transparent,但是文字默认还是有颜色的,默认的文字颜色,是由第一层渐变赋予的 background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0),也就是这一层:linear-gradient(90deg, #999, #999)

当 hover 触发时,linear-gradient(90deg, #999, #999) 这一层渐变逐渐消失,而另外一层 linear-gradient(90deg, #fc0, #fc0)` 逐渐出现,借此实现上述效果。

CodePen -- background-clip 文字渐现效果

简单模拟题图效果

这里,我们简单利用这个技巧模拟一下文章一开始列出的 Gif 的效果:

这个效果原作者的技巧是:

  1. 将每个单词作为一个对象,包裹一个特殊的 class
  2. 利用 animation-delay 将动画逐渐赋予每个单词

这里,我们将整段文本统一处理,简单还原:

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>
/** 动画核心 background、line-height、opacity **/
a {
background:
linear-gradient(90deg, #ff5722, #ff5722),
linear-gradient(90deg, #aaa, #aaa);
background-size: 100% 100%, 0 100px;
background-repeat: no-repeat;
background-position: 100% 100%, 0 100%;
cursor: pointer;
color: transparent;
background-clip: text;
line-height: 3;
opacity: 0;
}
.button:hover ~ p a {
transition: 1.2s background .3s ease-out, .8s line-height ease-out, .6s opacity ease-in;
background-size: 0 100px, 100% 100%;
color: transparent;
line-height: 1;
opacity: 1;
}
/ ** 简单控制半透明黑色遮罩出现 **/
a::before {
content: "";
position: fixed;
background: rgba(0, 0, 0, .8);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
transition: .3s all linear;
opacity: 0;
}
.button:hover ~ p a::before {
opacity: 1;
}

效果如下:

可以看到,由于是整体控制整段文本,效果上没有逐个单词控制的好,但是优点是代码量非常少。对于一些简单卡片类的 hover 场景,足以。

background-image、background-clip 实现文字渐现效果

完美还原题图效果

当然,题图效果使用纯 CSS 也是不在话下的。只不过就不是简单能够统一处理的了。

这里,我们需要对每一个单词进行精细化的处理,并且使用每个单词的伪元素进行额外的动画。

简单的结构如下:

<div class="button">Button</div>
<div class="g-wrap"></div>
<p>
<span data-text="Lorem">Lorem</span>
<span data-text="ipsum">ipsum</span>
<span data-text="dolor">dolor</span>
<span data-text="sit">sit</span>
<span data-text="amet">amet</span>
// ... 类似结构
</p>

可以看到,每个单词都被 <span> 包裹,并且添加了 data-text,方便伪元素拿到当前单词。

接下来,就是设定动画,并且通过顺序给每个 <span> 添加相应递增的 animation-delay 以实现没个单词动画的差异性。核心的伪代码如下:

p {
position: relative;
width: 500px;
overflow: hidden;
} p span {
position: relative;
display: inline-block;
opacity: 0;
transform: translateY(15px) translateZ(0);
transition-property: transform, opacity;
transition-duration: .3s, .2s;
} .button:hover ~ p span {
opacity: 1;
color: #ddd;
transform: translateY(0) translateZ(0);
transition-duration: 1s, .2s;
} p span:after,
p span:before {
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
z-index: 1;
transform: translateZ(0);
} p span:after {
color: #e62541;
transition-property: opacity;
transition-duration: .1s;
} .button:hover ~ p span:after {
opacity: 0;
transition-property: opacity;
transition-duration: .4s;
} @for $i from 1 to 21 {
p span:nth-child(#{$i}) {
transition-delay: #{$i * 0.04}s; &::after {
transition-delay: #{$i * 0.04 + 0.2}s;
}
}
}

其实动画本身不太复杂,主要讲两点:

  1. hover 状态下和非 hover 状态下的 transition-duration 是不一样的,是因为取消 hover 过程中,动画消失过程的时间通常是要求更短的;
  2. 借助了 SASS 的循环 @for $i from 1 to 21 {} 递增给每个 span 和它的伪元素添加了递增的 transition-delay

最终,我们可以得到如下的结果:

完整的代码,你可以猛戳 -- CSS 灵感 - 利用 animation-delay 实现文字渐现效果

最后

好了,本文到此结束,希望对你有帮助

想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻

更多精彩 CSS 效果可以关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

妙用 background 实现花式文字效果的更多相关文章

  1. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  2. 移动端 iphone锁屏文字效果

    简易的仿照iphone 效果 笔记备份 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten ...

  3. CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  4. css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  5. 实现textview竖排文字效果

    文字效果

  6. 纯CSS3文字效果推荐

    之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的 ...

  7. css鼠标滑过出现文字效果

    模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE ...

  8. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  9. css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

    这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...

随机推荐

  1. Top10 应用都在用的Android最新知识

    相信各位对Jetpack并不陌生,自从 Google 在 2018 年推出 Jetpack 之后,它就成为了 Android 未来发展的指向标. 作为一名安卓工程师,我们以前会经常吐槽Android碎 ...

  2. Java8 新特性 Stream Api 之集合遍历

    前言 随着java版本的不断更新迭代,java开发也可以变得甜甜的,最新版本都到java11了,但是后面版本也是不在提供商用支持,需要收费,但是java8 依然是持续免费更新使用的,后面版本也更新很快 ...

  3. Longhorn 企业级云原生容器存储解决方案-部署篇

    内容来源于官方 Longhorn 1.1.2 英文技术手册. 系列 Longhorn 是什么? Longhorn 云原生分布式块存储解决方案设计架构和概念 安装 Longhorn 可以通过多种方式安装 ...

  4. 【笔记】简谈L1正则项L2正则和弹性网络

    L1,L2,以及弹性网络 前情提要: 模型泛化与岭回归与LASSO 正则 ridge和lasso的后面添加的式子的格式上其实和MSE,MAE,以及欧拉距离和曼哈顿距离是非常像的 虽然应用场景不同,但是 ...

  5. Mysql报错注入之floor报错详解

    一.简述 利用 select count(*),(floor(rand(0)*2))x from table group by x,导致数据库报错,通过 concat 函数,连接注入语句与 floor ...

  6. windows中抓取hash小结(上)

    我上篇随笔说到了内网中横向移动的几种姿势,横向移动的前提是获取了具有某些权限的用户的明文密码或hash,正愁不知道写点啥,那就来整理一下这个"前提"-----如何在windows系 ...

  7. STP工作流程

    第一步:选择一个根网桥: 第二步:在每个非根网乔上选举一个根端口: 第三步:在每个网段上选举一个指定端口: 第四步:阻塞非根,非指定端口:

  8. Mysql生成UUID的SQL语句

    大写的UUID: SELECT UPPER(UUID()); 小写的UUID: SELECT LOWER(UUID()); SELECT UUID(); 去掉横杠的UUID: SELECT REPLA ...

  9. WPF---数据绑定(二)

    一.绑定到非UI元素 上篇中,我们绑定的数据源均是派生自UIElement的WPF元素.本篇描述的绑定数据源是一个我们自定义的普通的类型. 注:尽管绑定的数据源可以是任意类型的对象,但Path必须总是 ...

  10. C#多线程---Semaphore实现线程同步

    一.简介 Semaphore类限制可同时访问某一资源或资源池的线程数.线程通过调用 WaitOne方法将信号量减1,并通过调用 Release方法把信号量加1. 构造函数:public Semapho ...