How to use CSS code to make text display flashing effect? (code example)

In the Web page, usually the designers in order to highlight their product theme, will always let text or add special effects, such as to keep the text flashing, or regular discoloration. So as to achieve the purpose of attracting attention. So what are some of the other ways to achieve this feature, in addition to GIF animations made with PS? For those who understand the code, we all know that there are many kinds of CSS Chinese font styles, such as tilt, bold and so on. Then here to introduce you, how to use CSS code to make the text flashing effect, this article has two flashing ways for everyone to reference.

First, the CSS font flashing (wave flashing) The specific example code is as follows:

<! DOCTYPE html>
The above code can be copied directly in the local test, the test results are as follows:



Second, the CSS font flashing (gradient flashing) The specific sample code is as follows:

<! DOCTYPE html>
The above code can be copied directly in the local test, the test results are as follows:


Note: The main idea of the second gradient method is to change the transparency to achieve a gradual flicker of text

@keyframes blink{} Defines the keyframe animation, named Blink.

@-webkit-keyframes blink Add compatibility prefix

. blink{} defining the Blink class

-webkit-animation:;-moz-animation:-ms-animation:-o-animation:; Other browser compatibility prefixes

This article introduces two kinds of text flashing effect method, I hope to have a friend in need to help.

"Recommended for the relevant content"

Effect code for text flicker with HTML

Cool text jumping floating JS effect code

CSS3 realization of three-dimensional text dynamic text effects

A webpage title The flashing hint effect realization idea _javascript skill

Using pure CSS to implement dynamic text effect instances