Skip to content

Commit 7f7236a

Browse files
Mansi8874Mansi8874
committed
Glowing Text Animations
Added a Glowing Text Animations
1 parent 7b05683 commit 7f7236a

3 files changed

Lines changed: 107 additions & 0 deletions

File tree

‎Projects/Glowing-Text-Animation/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Glowing text</title>
10+
</head>
11+
12+
<body>
13+
<div class="glowing">
14+
<span>M</span>
15+
<span>A</span>
16+
<span>N</span>
17+
<span>S</span>
18+
<span>I</span>
19+
</div>
20+
21+
</body>
22+
23+
</html>

‎Projects/Glowing-Text-Animation/readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
## Glowing Text Animation
2+
The Glowing Text Animation project is a CSS-based animation that adds a vibrant and eye-catching effect to text elements on a webpage. <br><br>

‎Projects/Glowing-Text-Animation/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* Set the margin, padding, and background color for the body */
2+
body {
3+
margin: 0%;
4+
padding: 0%;
5+
background: #262626;
6+
}
7+
8+
/* Styling for the glowing text container */
9+
.glowing {
10+
position: absolute;
11+
top: 50%;
12+
left: 50%;
13+
transform: translate(-50%, -50%);
14+
}
15+
16+
/* Styling for each individual span element */
17+
.glowing span {
18+
color: #fff;
19+
font-family: Verdana;
20+
font-size: 10px;
21+
display: inline-block;
22+
animation: animate 2s linear infinite;
23+
width: 24px;
24+
height: 24px;
25+
text-align: center;
26+
line-height: 24px;
27+
border: 1px solid rgba(255, 255, 255, .4);
28+
margin: 0 -2.5px;
29+
}
30+
31+
/* Keyframes animation for the glow effect */
32+
@keyframes animate {
33+
0% {
34+
color: #f00;
35+
box-shadow: 0 2px 10px rgba(255, 0, 0, 1);
36+
border: 1px solid rgba(255, 0, 0, 1);
37+
}
38+
33.3% {
39+
color: #ff0;
40+
box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
41+
border: 1px solid rgba(255, 255, 0, 1);
42+
}
43+
66.6% {
44+
color: #0f0;
45+
box-shadow: 0 2px 10px rgba(0, 255, 0, 1);
46+
border: 1px solid rgba(0, 255, 0, 1);
47+
}
48+
100% {
49+
color: #f00;
50+
box-shadow: 0 2px 10px rgba(255, 0, 0, 1);
51+
border: 1px solid rgba(255, 0, 0, 1);
52+
}
53+
}
54+
55+
/* Animation delay for each span element */
56+
.glowing span:nth-child(1) {
57+
animation-delay: 0s;
58+
}
59+
60+
.glowing span:nth-child(2) {
61+
animation-delay: 0.1s;
62+
}
63+
64+
.glowing span:nth-child(3) {
65+
animation-delay: 0.2s;
66+
}
67+
68+
.glowing span:nth-child(4) {
69+
animation-delay: 0.3s;
70+
}
71+
72+
.glowing span:nth-child(5) {
73+
animation-delay: 0.4s;
74+
}
75+
76+
.glowing span:nth-child(6) {
77+
animation-delay: 0.5s;
78+
}
79+
80+
.glowing span:nth-child(7) {
81+
animation-delay: 0.5s;
82+
}

0 commit comments

Comments
 (0)