CSS Glowing Animation Using HTML and CSS
If you want to add some flair and style to your website, you might want to try using CSS glowing animation. This effect can make your elements look more dynamic and eye-catching, as well as create a sense of depth and dimension. In this blog post, I will show you how to create a simple CSS glowing animation using the text-shadow and animation properties.
First, let’s create a basic HTML structure with a heading element that contains the text “CSS Glowing Animation”. We will apply the glowing effect to this element later.
Next, let’s add some CSS styles to the heading element. We will use the font-size property to make the text bigger, the color property to make the text white, and the text-align property to center the text.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Glowing </title>
<!-- Link to your CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flexbox">
<div class="card">
<img src="bg.jpg">
<img src="bg.jpg">
<img src="bg.jpg">
</div>
</div>
</body>
</html>
CSS
body {
font-family: system-ui;
background: #333631;
color: white;
text-align: center;
font-size:1vw;
overflow: hidden;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}
.flexbox {
display:flex;
flex-direction:column;
flex-shrink: 2;
width:100%;
justify-content:center;
}
.card {
text-align:center;
padding:10vh;
margin:auto;
width:50%;
height:100%;
background: #1d1e22;
filter: drop-shadow(0px 0px 10px #4535c8);
animation:glow 4s linear infinite;
display: flex;
border-radius: 10px;
}
.card img {
width:200px;
height: 200px;
border-radius: 50%;
filter: drop-shadow(0px 0px 10px #4535c8);
animation:glow 4s linear infinite;
margin: 10px;
}
/* glowing animation */
@keyframes glow{
0% {
filter: drop-shadow(0 0 1rem rgb(9, 255, 0.5));
}
33% {
filter: drop-shadow(0 0 1rem rgba(1, 6, 255, 0.5));
}
66% {
filter: drop-shadow(0 0 1rem rgba(255, 0, 0, 0.5));
}
100% {
filter: drop-shadow(0 0 1rem rgb(9, 255, 0.5));
}
}
h1 {
padding:10px;
}
i {
font-size:24px;
}
For More Tutorials Please Click Here
2 comments
It is truly a great and useful piece of info. I am satisfied that you shared this useful information with us.
Please keep us up to date like this. Thanks for sharing.
What a material of un-ambiguity and preserveness of valuable
familiarity on the topic of unpredicted feelings.