CSS setting flashing font
Setting Flashing Fonts with CSS
In web design, sometimes we want certain text to attract the user’s attention and make it stand out. A common practice is to make the text flash, which makes it more eye-catching. In this article, we will introduce how to use CSS to set a flashing font effect.
1. Using @keyframes to Create a Flashing Effect
First, we can use the CSS @keyframes rule to define a flashing animation effect. Here’s a simple example:
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.blink {
animation: blink 1s infinite;
}
In the above code, we define an animation called blink to show and hide the text at 0%, 50%, and 100% of the time, respectively, thus achieving a blinking effect. Next, we can apply this style in the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blinking Text</title>
<style>
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.blink {
animation: blink 1s infinite;
}
</style>
</head>
<body>
<p class="blink">Welcome to geek-docs.com!</p>
</body>
</html>
Output:
In the example above, we applied the .blink class to a paragraph element, causing the text to blink.
2. Using text-decoration to Create a Blinking Effect
In addition to using animation, we can also use the text-decoration property to create a blinking effect. Here’s an example code:
.blink {
text-decoration: underline;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
In the above code, we underline the text and apply the blink animation effect we defined previously. Next, we can use this style in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blinking Text</title>
<style>
.blink {
text-decoration: underline;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<p class="blink">Welcome to geek-docs.com!</p>
</body>
</html>
Output:
In the above example, the text will flash as an underline.
3. Using the color property to achieve a flashing effect
In addition to changing the text style, we can also achieve a flashing effect by changing the text color. Here’s a sample code:
.blink {
color: red;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
In the code above, we set the text color to red and apply the blink animation effect we defined previously. Next, we can use this style in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blinking Text</title>
<style>
.blink {
color: red;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<p class="blink">Welcome to geek-docs.com!</p>
</body>
</html>
Output:
In the above example, the text will flash in red.
4. Using the transform property to achieve a flashing effect
In addition to changing the style and color of text, we can also use the transform property to achieve a flashing effect. Here’s an example code:
.blink {
transform: scale(1.1);
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
In the code above, we use transform: scale(1.1) to enlarge the text and apply the blink animation effect defined previously. Next, we can use this style in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blinking Text</title>
<style>
.blink {
transform: scale(1.1);
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<p class="blink">Welcome to geek-docs.com!</p>
</body>
</html>
Output:
In the above example, the text will enlarge and flash.
5. Using the box-shadow Property to Create a Flashing Effect
Finally, we can also use the box-shadow property to create a flashing effect. Here’s an example code:
.blink {
box-shadow: 0 0 10px red;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
In the code above, we use box-shadow: 0 0 10px red to add a red shadow to the text and apply the blink animation effect defined previously. Next, we can use this style in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blinking Text</title>
<style>
.blink {
box-shadow: 0 0 10px red;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<p class="blink">Welcome to geek-docs.com!</p>
</body>
</html>
Output:
In the above example, the text will appear shaded red and flash.
Through the code examples above, we can see how to use different CSS properties to create a flashing text effect, making it stand out and attract attention. In actual web design, you can choose the appropriate flashing effect based on your specific needs and design style to achieve the best visual effect.