Clever use of filters to achieve high-level text flash switching effect

Today I happened to see such an interesting text flash animation :

If this type of text flash switching effect is used properly, it can better attract users' attention.

Of course, today is not to use CSS to achieve the above-mentioned effects. In the process of trying, I found another type of text flash animation that can be easily realized using CSS, using the blur() filter and the contrast() filter, similar to this:

This technique is also mentioned in many articles, and this article will briefly describe it.

The blur filter is mixed with the contrast filter to produce a fusion effect

The focus of this article, blur filter superimposed on the contrast filter produced by the fusion effect . Take out the two filters separately, their functions are:

1. filter: blur() : Set the Gaussian blur effect to the image.
2. filter: contrast() : Adjust the contrast of the image.

However, when they "fitted together", a wonderful fusion phenomenon occurred.

Let's first look at a simple example:

CodePen Demo -- filter mix between blur and contrast

Look carefully at the process of the intersection of the two circles. When the edge touches the edge, a boundary fusion effect will be produced. The fuzzy edge of the Gaussian blur is eliminated through the contrast filter, and the Gaussian blur is used to achieve the fusion effect.

The realization of the above effect is based on two points:

1. The graphics are animated on the canvas background that filter: contrast()
2. The animated graphic is set to filter: blur() (the parent element of the animated graphic needs to be the canvas filter: contrast()

Of course, the background color is not necessarily white, we slightly modify the above Demo, a simple schematic diagram is as follows:

Use blur/contrast filters to switch text

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

CodePen Demo -- word animation | word filter

In this way, using this technique, we can cleverly conceive an animation:

1. Multiple characters appear in sequence (using animation-delay for control processing)
2. When the previous text disappears, the next text appears
3. Just superimpose the above filter

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">强得很！</div>
</div>

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

For the entire code, the core needs to pay attention to @keyframes change . We add this animation to the text in sequence (that is, animation-delay ) to achieve the effect of the last text disappearing and the next text display.

The above .g-container adds such a code - filter: contrast(15) , if this sentence is removed, the effect is as follows:

Add this key code- filter: contrast(15) , and the whole effect is as shown in the picture at the beginning:

CodePen Demo - Pure CSS to achieve text fusion flash switching effect

The two core key points of the entire animation:

1. The blur filter is used to mix the contrast filter to produce a fusion effect
2. In the process of disappearing of the previous text, the next text is displayed, so as to produce the effect that the current displayed text is evolved from the previous text

As a result, you can control the number of texts through HTML, change the $speed representing the animation duration and the number of $wordCount SASS variable, and finally @keyframes change , constantly adjusting and optimizing the effect you want. Evolve various text flash effects.

finally

Okay, this concludes this article, I hope this article is helpful to you :)

Want to get the most interesting CSS information, don’t miss my public - 1619469395fa4d iCSS front-end interesting 1619469395fa50 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. 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.