皇冠体育寻求亚洲战略合作伙伴,皇冠代理招募中,皇冠平台开放会员注册、充值、提现、电脑版下载、APP下载。

首页科技正文

妙用 background 实现花式文字效果

admin2021-11-1142

ug环球注册登录www.ugbet.us)开放环球UG代理登录网址、会员登录网址、环球UG会员注册、环球UG代理开户申请、环球UG电脑客户端、环球UG手机版下载等业务。

本文将解说若何行使 background 系列属性,巧妙的实现「xian」一些花式的文字效果。通过本文,你将可以学到:

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

原由

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

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

这个文字的 hover 泛起效果,看似简朴,实〖shi〗在想要完全实现它,仅仅依赖 CSS 是异常庞大的,其中一个对照难的地方 fang[在于 -- 若何让一个效果,逐渐作用给整段文字中的部门,而不是一〖yi〗次『ci』将整个效果赋予整段『duan』文本。

行使 background 实现文字的下划线效果

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

看个简朴的 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 模拟文字的下划线效果,效果图如(ru)下:

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

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 模拟下划线与虚线下划线

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

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

这里,通过{guo}巧妙改变 background-sizebackground-position 属性,我们可以实现一些异常有意思「si」的文字 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,这个时刻,就“jiu”会有一个 0 3px100% 3px 的变换,也就是一个从无到有的舒展效果。

看「kan」看最后的效果:

由于设定的 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 值,我们就可〖ke〗以获得一个更有意思的下划线 hover 效果。

CSS 代码示意,注重看两条使用 background 模拟 ni[的下划线的 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 实现文字的渐现

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

回归到本文一最先提【ti】到的 Gif 效果,我们能【neng】否实现在一段文字中,实现文字的渐现效果呢?

上述技巧行使的是 background,那么 background 靠山致能否改变文字的颜色的?谜底是可以的,只需要借助 background-clip

我们稍微刷新下代码,实现行使 background-clip 实现 hover 的时刻“ke”部门文字逐渐改变颜色:

<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) 靠山致作用给了〖liao〗文字,同时行使 color: transparent 让文字展示出靠山{shan}致的色值:

足球免费贴士

免费足球贴士网(www.zq68.vip)是国内最权威的足球赛事报道、预测平台。免费提供赛事直播,免费足球贴士,免费足球“qiu”推介,免费专家贴士,免费足球推荐,最专业的足球心水网。

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%;
}

效果如下:

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

还可以实现文字从一种颜色到另外一种颜色的逐个转变,只需要添加多一层 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,然则文字默认照样有颜色的,默认的文字颜色,是由第一层渐变赋予的“de” 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. 将每个单词作{zuo}为一个工具,包裹一个特殊“shu”的 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;
}

效果如下:

可以看到,由于是整体控制整《zheng》段文本,效果上没有逐个单词控制的好,然则优点是代码量异常少‘shao’。对于一些简朴卡片类的 hover 场景,足以。

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

完善还原题图效果

固然,题图效果使用纯 CSS 也是不在话下的。只不外就不是简朴能够统一处置的了。

这里,我《wo》们需要对每一个单词举行细腻化的处置,而且使用每个单词的伪元素举行分外的动画。

简朴的结构如下:

<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>

可以看到,每「mei」个单词都被 <span> 包裹,而且添加了 data-text,利便伪元「yuan」素拿到当前单词。

接下来,就是设定动画,而且通过(guo)顺序给每个 <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 和它‘ta’的伪元素添加了递增的 transition-delay

最终,我们可以获得如下的效果:

完整的代码,你可以猛戳 -- CSS 灵感 - 行‘xing’使 animation-delay 实现文字渐现效果

最后

好了,本文「wen」到此竣事,希望 wang[对你有辅助

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

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

更多精彩 CSS 手艺文章汇总在我的 Github -- iCSS ,连续更新,迎接 jie[点个 star 订阅珍藏“cang”。

是另有什么疑问或者建议,可以『yi』多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望见告。

皇〖huang〗冠体育APP

www.huangguan.us)是一个开放皇冠代理APP下载、皇冠会员APP下载、皇冠线路APP下载、皇冠登录APP下载的体育平台。皇冠体育APP上最新登录线路、新2皇冠网址更新最快。皇冠体育APP开放皇冠会员注册、皇冠代理开户等业务。

网友评论

2条评论