Today I came across this kind of interesting text flash:

This kind of text flash switch effect is used properly, can better attract the eye of the user.

Of course, today’s goal is not to use CSS to achieve the above effect. While experimenting, I found another class of text flash that can be done very easily with CSS, using the blur() and contrast() filters to create a fusion effect that looks something like this:

This technique has been mentioned in many articles, and will be briefly discussed in this article.

Blend the Contrast filter to create a fusion effect

This paper focuses on the fusion effect of blur filter superimposed contrast filter. Taking the two filters out separately, their roles are as follows:

  1. filter: blur(): Sets the gaussian blur effect on the image.
  2. filter: contrast(): Adjust the contrast of the image.

However, when they “fit together”, there is a wonderful fusion phenomenon.

Let’s start with a simple example:

CodePen Demo — filter mix between blur and contrast

Take a close look at the process of intersection of two circles. When the edge contacts with the edge, it will produce a boundary fusion effect. The blur edge of Gaussian blur will be eliminated by contrast filter, and the fusion effect will be realized by Gaussian blur.

The above effects are achieved based on two points:

  1. The graph is being setfilter: contrast()Animated on the canvas background
  2. The graphic to animate is setfilter: blur()The parent element of the animated graph needs to be setfilter: contrast()Canvas)

Of course, the background color does not have to be white. Let’s modify the Demo a little bit.

Use the Blur /contrast filter to toggle text

Using the above techniques, we can achieve a text fusion effect like this:

CodePen Demo — word animation | word filter

So, using this technique, we can think of a clever animation:

  1. Multiple words appear in sequence (useanimation-delayControl processing)
  2. Do the last text disappears at the same time, the next text appears
  3. Add the above filters

The core code is as follows:

<div class="g-container">
  <div class="word">iPhone</div>
  <div class="word">13</div>
  <div class="word">Pro</div>
  <div class="word">Very strong!</div>
</div>
Copy the code
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

$speed: 8s;
$wordCount: 4;

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: # 000;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 120px;
    filter: contrast(15);
}
.word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: change $speed infinite ease-in-out;

    @for $i from 0 to $wordCount {
        &:nth-child(# {$i + 1{})animation-delay: ($speed / ($wordCount + 1) * $i) - $speed; }}}@keyframes change {
    0%.5%.100% {
        filter: blur(0px);
        opacity: 1;
    }
    50%.80% {
        filter: blur(80px);
        opacity: 0; }}Copy the code

The core of the whole code needs to pay attention to the animation @keyframes change. We add this animation to the text in order (that is, adding the delay in the order of animation-delay) to achieve the effect of the next text display when the last text disappears.

The above.g-container adds filter: contrast(15). Remove this and the effect looks like this:

Add this key phrase, filter: Contrast (15), and the effect looks as shown in the picture above:

CodePen Demo – pure CSS text fusion flash switching effect

Two key points of the entire animation:

  1. By using theblurFilter blendcontrastThe filter produces a fusion effect
  2. While the previous text disappears, the next text is displayed to give the effect that the current displayed text evolved from the previous text

From this, you can use HTML to control the number of lines of text, change the SASS variable $speed and $wordCount for the length of the animation, and finally @keyframes change to optimize the effect you want. Evolved various text flash effects.

The last

Well, that’s the end of this article, I hope you found it helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.