关于前端:妙用-background-实现花式文字效果

8次阅读

共计 7900 个字符，预计需要花费 20 分钟才能阅读完成。

本文将解说如何利用 background 系列属性，奇妙的实现一些花式的文字效果。通过本文，你将能够学到：

  • 通过 background-size 与 background-position 实现酷炫的文字下划线成果
  • 通过 background-size 与 background-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-size 与 background-position 实现文字 hover 动效

这里，通过奇妙扭转 background-size 与 background-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 3px 到 100% 3px 的变换，也就是一个从无到有的舒展成果。

看看最初的成果：

因为设定的 background-position 是 0 100%，如果，设定的 background-position 是 100% 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-size 与 background-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 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完
前端
发表至： 前端
2021-09-16
 0
关于前端:Vue3-如何实现一个带遮罩的-dialog-对话框
关于前端:React的事件绑定为什么要bind-this
关于前端:HTML小游戏4-简易版英雄联盟附完整源码
关于前端:ESLint-介绍

站内搜索

-「」