Shulou(Shulou.com)06/03 Report--

How to use CSS background series attributes to achieve some fancy text effects, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

How to use CSS to achieve fancy text effect?

cause

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

One of the Red Bull Racing websites is the home page about the F1 Red Bull team. There is a very interesting Hover animation effect:

The hover effect of this text seems simple, but in fact, if you want to achieve it completely, it is very complicated to rely on CSS alone. One of the more difficult parts is how to make an effect work on the whole part of the text gradually, rather than giving the whole effect to the whole text at once.

Using background to realize the effect of text underlining

At this point, I am reminded of the effect I introduced in this article, CSS text Decoration text-decoration & text-emphasis, which uses background to simulate underlining.

Look at a simple DEMO and use background to simulate the underlining effect of text:

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.

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 to simulate the underlining effect of text, and the effect is as follows:

Alternatively, use background to simulate dashed underlines:

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 underscores and dotted lines

Https://codepen.io/Chokcoco/pen/YzNQKwm

Of course, this is the most basic, ingenious use of various properties of background, we achieve a variety of interesting effects.

Skillfully change background-size and background-position to realize the dynamic effect of text hover

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

Let's take a look at such a Demo, where the core code acts on the

Label above the label of the package:

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 {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), we default to its background-size: 0 3px at the beginning, that is, we can't see the underscore at the beginning. When we change background-size: 100% 3px when hover, there will be a transformation from 0 3px to 100% 3px, that is, a stretching effect from scratch.

Take a 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:

/ / everything else remains the same, only change background-position from 0% to 100% a {. Background-position: 100% 100%;.}

If you look at the effect, you can compare the above motion picture to see where the specific differences are:

CodePen Demo-background underline animation

Https://codepen.io/Chokcoco/pen/QWdgLwp

OK, if we use background to implement two overlapping underscores, and then take advantage of the above two different background-position values, we can get a more interesting underlining hover effect.

The CSS code indicates that the values of the two underlined background-position simulated with background 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 the effect that every time you hover, there are two underscores moving:

CodePen Demo-background underline animation

Https://codepen.io/Chokcoco/pen/MWJogjQ

Realizing the gradual appearance of characters through background-size and background-position combined with background-clip

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

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 techniques use background, so can the background color of background change the color of the text? The answer is yes, with the help of background-clip.

Let's modify the code a little bit to realize that some of the text changes color gradually when using background-clip to implement hover:

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.

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%; color: transparent;}

Look at the effect. Through the mask clipping of background-clip: text, we apply the background color of background: linear-gradient (90deg, # fc0, # fc0) to the text, and use color: transparent to show the color value of the background color:

CodePen Demo-background-size, background-position and background-clip to realize the gradual appearance of text one by one

Https://codepen.io/Chokcoco/pen/qBjmvdq?editors=1100

Of course, with a little distortion of the above code, we can evolve several different effects.

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

The first is to show gradually from transparent to colored, here we just need to keep color as transparent (the following effect is triggered by a button):

Button

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 {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 ~ pa {transition: .8s all linear; background-size: 0 100px, 100% 100%;}

The effect is as follows:

Realize the gradual appearance of the whole text-from one color to another

You can also transform text from one color to another one by adding an extra layer of background-image gradient.

Button

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 {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 ~ pa {transition: .8s all linear; background-size: 0 100px, 100% }

We need to explain here that although color: transparent is set, the text still has color by default. The default text color is the background given by the first layer gradient: linear-gradient (90deg, # 999,# 999), linear-gradient (90deg, # fc0, # fc0), that is, linear-gradient (90deg, # 999,# 999).

When hover is triggered, the gradual change of linear-gradient (90deg, # 999, # 999) gradually disappears, while another layer of linear-gradient (90deg, # fc0, # fc0) `gradually appears to achieve the above effect.

CodePen-background-clip text gradual effect

Https://codepen.io/Chokcoco/pen/XWgpyqz

Simply simulate the effect of the problem map

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

The skill of the original author of this effect is:

Take each word as an object and wrap a special class

Use animation-delay to gradually assign animation to each word.

Here, we will unify the whole text and simply restore it:

Button

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.

/ * * Animation core 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 ~ pa {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;} / * simple control translucent black mask appears * * / 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 ~ pa:: before {opacity: 1;}

The effect is as follows:

As you can see, because the whole 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 hover scenarios of simple card classes, it is sufficient.

Background-image and background-clip to realize the gradual appearance of characters

Https://codepen.io/Chokcoco/pen/abwWMJm

Perfectly restore the effect of the problem map

Of course, it is easy to use pure CSS for the effect of inscription. It's just that it can't be handled 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:

Button

Lorem ipsum dolor sit amet / /... Similar structure

As you can see, each word is wrapped and data-text is added to make it easy for pseudo-elements to get the current word.

The next step is to set up the animation and add the corresponding incremental animation-delay to each in order to achieve the difference of the animation without a word. 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, mainly talking about two points:

The transition-duration in the hover state is different from that in the non-hover state, because in the process of canceling hover, the time for the animation to disappear is usually shorter.

With the help of the SASS loop @ for $I from 1 to 21 {} incrementally adds an incremental transition-delay to each span and its pseudo elements

Finally, we can get the following results:

After reading the above, have you mastered how to use CSS background properties to achieve some fancy text effects? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.