共计 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 的成果:
这个成果原作者的技巧是:
- 将每个单词作为一个对象,包裹一个非凡的 class
- 利用
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;
}
}
}
其实动画自身不太简单,次要讲两点:
- hover 状态下和非 hover 状态下的
transition-duration
是不一样的,是因为勾销 hover 过程中,动画隐没过程的工夫通常是要求更短的; - 借助了 SASS 的循环
@for $i from 1 to 21 {}
递增给每个span
和它的伪元素增加了递增的transition-delay
;
最终,咱们能够失去如下的后果:
残缺的代码,你能够猛戳 — CSS 灵感 – 利用 animation-delay 实现文字渐现成果
最初
好了,本文到此结束,心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 成果能够关注我的 CSS 灵感
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。