CSS text flickering
CSS Text Flash
In web design, you often see some text flashing effects. This effect can attract users’ attention and make the page look more vivid. In CSS, we can create a flashing text effect with simple code. This article will detail how to use CSS to achieve this effect, hoping it will be helpful.
How to Create Flashing Text
To achieve the flashing text effect, we can use the CSS @keyframes rule to define a simple animation and then apply this animation to the text. Here’s a basic CSS code to achieve a flashing text effect:
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.blink {
animation: blink 1s linear infinite;
}
In the code above, we define an animation called blink. This animation sets the text’s opacity to 1 at 0%, meaning it’s completely opaque; sets it to 0 at 50%, meaning it’s completely transparent; and finally sets it back to 1 at 100%, creating a blinking effect. We then apply this animation to an element with the class name .blink.
Next, we can create an element with the class name .blink in our HTML file to see the text blink.
<!DOCTYPE html>
<html>
<head>
<title>Blinking Text</title>
<style>
@keyframes blink { 0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.blink {
animation: blink 1s linear infinite;
}
</style>
</head>
<body>
<h1 class="blink">Hello, World!</h1>
</body>
</html>
In the example above, we apply the .blink class to the <h1> tag, causing the text to blink continuously at 1-second intervals. You can achieve different effects by adjusting the animation timing and style.
Alternating Blink Effect
In addition to the simple blink effect above, we can also achieve an alternating blink effect, where two different blinking patterns alternate. Here’s a CSS code that implements an alternating blinking effect:
@keyframes blink1 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes blink2 {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.blink-alternate {
animation: blink1 1s linear infinite, blink2 1s linear infinite;
}
In the above code, we define two different blinking animations, blink1 and blink2. blink1 sets the text’s opacity to 1 at 0% and 100%, and to 0 at 50%. blink2 sets the text’s opacity to 0 at 0% and 100%, and to 1 at 50%. Finally, we apply both animations to an element with the .blink-alternate class.
Next, create an element with the .blink-alternate class in your HTML file to see the alternating blinking effect.
<!DOCTYPE html>
<html>
<head>
<title>Alternate Blinking Text</title>
<style>
@keyframes blink1 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes blink2 {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.blink-alternate {
animation: blink1 1s linear infinite, blink2 1s linear infinite;
}
</style>
</head>
<body>
<h1 class="blink-alternate">Hello, World!</h1>
</body>
</html>
In the example above, we applied the .blink-alternate class to the <h1> tag, causing the text to alternate between two blinking effects. You can adjust the animation timing and style to achieve different effects according to your needs.
Conclusion
Through this article, I believe you have learned how to create blinking text effects in CSS. Whether it’s a simple blinking effect or an alternating blinking effect, you can achieve it using the CSS @keyframes rule.