Magical background to achieve fancy text effect

This article will explain how to use the background series attributes to cleverly achieve some fancy text effects. Through this article, you will learn:

• Through background-size and background-position achieve cool text underline effect
• Through background-size and background-position and background-clip achieve the effect of gradually appearing text one by one
• Realize the fading effect of text through animation-delay

cause

The motivation for writing this article is that one day, I was attracted by such a title - 10 Masterfully Designed Websites , which listed 10 highly creative Web sites.

One of the Red Bull Racing website is a homepage introducing the F1 Red Bull Racing team. Among them is such a very interesting Hover animation effect:

The hover effect of this text seems to be simple, but in fact, it is very complicated to rely on CSS to fully realize it. One of the more difficult points is - gradually apply to the part of the whole text instead of assigning the entire effect to the entire text at once.

Use background to achieve the underline effect of text

At this point, I am reminded of the previous article in this article- CSS text-decoration & text-emphasis , I introduced a using the background to simulate the effect of

Look at a simple DEMO, use background simulate the underline effect of text:

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

Use background simulate the underline effect of text, and the effect diagram is as follows:

Or, use background simulate a dashed underline:

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 - Use background to simulate underline and dashed underline

Of course, this is the most basic, clever use background , we achieve various interesting effects.

Cleverly change background-size and background-position achieve text hover dynamic effect

Here, by cleverly changing the background-size and background-position , we can achieve some very interesting text hover effects.

First look at such a Demo, the core code acts on the <p> label wrapped by the <a> label:

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

Although we set background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff) , it defaults to background-size: 0 3px , which means that the underline is not visible at the beginning. When background-size: 100% 3px , change 06142b3440c133. At this time, there will be a 0 3px to 100% 3px , which is A stretching effect from scratch.

Look at the final effect:

Since the set background-position is 0 100% , if the set background-position is 100% 100% , we can get a reverse effect:

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

Looking at the effect again, you can compare the above animation to see where the specific differences are:

CodePen Demo -- background underline animation

OK, if we use background achieve two overlapping underlines, and then use the above two different background-position values, we can get a more interesting underline hover effect.

The CSS code indicates that background-position underlined by background simulation are different:

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

You can get such an effect, in fact, every time you hover, there are two underscores moving:

CodePen Demo -- background underline animation

Use background-size and background-position cooperate with background-clip realize the gradual appearance of text

A large part of the above is all around - underline .

Returning to the Gif effect mentioned at the beginning of this article, can we achieve the gradual effect of text in a paragraph of text?

The above technique uses background , so background background color of 06142b3440c399 change the color of the text? The answer is yes, just use background-clip .

Let's modify the code slightly to realize that some texts gradually change color when implementing hover background-clip

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

Look at the effect, through the mask cut of background-clip: text background: linear-gradient(90deg, #fc0, #fc0) to the text, and use color: transparent make the text show the color value of the background color:

CodePen Demo - background-size, background-position and background-clip to realize text gradually

Of course, by slightly deforming the above code, we can evolve several different effects.

Realize the gradual appearance of the entire text-from transparency to appearance

The first is to gradually show from transparent to colored. Here we only need to make color always transparent (the following effects use a button to trigger the effect):

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

The effect is as follows:

Realize the fading of the entire text-from one color to another

It is also possible to realize the one-by-one transformation of the text from one color to another, and only need to add an additional layer of background-image gradient.

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

I need to explain here. Although color: transparent is set, the text is still colored by default. The default text color is background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0) given by the first layer of gradient, which is this layer: linear-gradient(90deg, #999, #999) .

When hover is triggered, the linear-gradient(90deg, #999, #999) gradually disappears, and another layer of linear-gradient(90deg, #fc0, #fc0)` gradually appears, thereby achieving the above effect.

CodePen - background-clip text fade effect

Simple simulation question map effect

Here, we simply use this technique to simulate the effect of the Gif listed at the beginning of the article:

The technique of the original author of this effect is:

1. Treat each word as an object and wrap a special class
2. Use animation-delay to gradually assign animation to each word

Here, we will process the entire text uniformly and simply restore it:

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

The effect is as follows:

As you can see, because the entire text is controlled as a whole, the effect is not as good as word-by-word control, but the advantage is that the amount of code is very small. For some simple card-like hover scenes, enough.

background-image, background-clip to achieve text fading effect

Perfectly restore the effect of the problem map

Of course, the effect of the title map using pure CSS is not a problem. It's just that it's not easy to deal with in a unified way.

Here, we need to refine each word, and use the pseudo-elements of each word for additional animation.

The simple structure is as follows:

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

As you can see, each word is <span> data-text is added to facilitate the pseudo-element to get the current word.

The next step is to set the animation, and add correspondingly increasing animation-delay <span> in order to realize the difference of each word animation. The core pseudo code is as follows:

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

In fact, the animation itself is not too complicated, and I mainly talk about two points:

1. transition-duration in hover state and non-hover state is different, because in the process of canceling hover, the time of the animation disappearing process is usually shorter;
2. Means a cyclic SASS @for $i from 1 to 21 {} incremented to each span and increasing its pseudo-element added transition-delay ;

In the end, we can get the following results:

The complete code, you can jab - CSS Inspiration-Use animation-delay to achieve text fading effect

finally

Okay, this concludes this article, I hope it helps you :)

Want to get the most interesting CSS information, don’t miss my public - 16142b3440cc4f iCSS front-end interesting 16142b3440cc52 😄

For more exciting CSS effects, please pay attention to my CSS inspiration

More wonderful CSS technical articles are summarized in my Github - iCSS , continuous updates, welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.