Skip to content

Commit 80a0a3b

Browse files
SrishtiopsSrishtiops
committed
enhanced the Animated-text
1 parent 148a7b2 commit 80a0a3b

File tree

3 files changed

+78
-57
lines changed

3 files changed

+78
-57
lines changed

‎Animated-Text/demo.png

-202 KB
Binary file not shown.

‎Animated-Text/index.html

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,22 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Document</title>
6+
<title>Animated Text Effect</title>
77
<link rel="stylesheet" href="index1.css">
88
</head>
99
<body>
1010
<div class="container">
1111
<div class="text1">
12-
<span style="--i:1">r</span>
13-
14-
<span style="--i:2">o</span>
15-
<span style="--i:3">s</span>
16-
<span style="--i:4">o</span>
17-
<span style="--i:5">g</span>
18-
19-
<span style="--i:6">o</span>
20-
<span style="--i:7">l</span>
21-
22-
<span style="--i:8">l</span>
23-
<span style="--i:9">a</span>
24-
25-
26-
27-
28-
</div>
12+
<span style="--i:1">R</span>
13+
<span style="--i:2">O</span>
14+
<span style="--i:3">S</span>
15+
<span style="--i:4">O</span>
16+
<span style="--i:5">G</span>
17+
<span style="--i:6">O</span>
18+
<span style="--i:7">L</span>
19+
<span style="--i:8">L</span>
20+
<span style="--i:9">A</span>
21+
</div>
22+
</div>
2923
</body>
3024
</html>

‎Animated-Text/index1.css

Lines changed: 66 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,70 @@
1+
/* index1.css */
2+
13
* {
2-
padding: 0;
3-
margin: 0;
4-
box-sizing: border-box;
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
overflow: hidden;
11+
}
12+
13+
.container {
14+
width: 100%;
15+
min-height: 100vh;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
background: linear-gradient(120deg, #00203F, #1A0033, #001F54, #0A2E4C);
20+
background-size: 200% 200%;
21+
animation: bgShift 10s ease infinite;
22+
}
23+
24+
@keyframes bgShift {
25+
0%, 100% {
26+
background-position: 0% 50%;
527
}
6-
7-
.container {
8-
width: 100%;
9-
min-height: 100vh;
10-
position: relative;
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
14-
background-color: #203733;
28+
50% {
29+
background-position: 100% 50%;
1530
}
16-
17-
.text1 span {
18-
font-size: 60px;
19-
padding: 0 10px;
20-
text-transform: uppercase;
21-
color: #240707;
22-
animation: zoomup 3s linear infinite;
23-
animation-delay: calc(70ms * var(--i));
24-
}
25-
26-
27-
@keyframes zoomup {
28-
0%,
29-
100% {
30-
color: #00c2ba;
31+
}
32+
33+
.text1 {
34+
display: flex;
35+
}
36+
37+
.text1 span {
38+
font-size: 80px;
39+
padding: 0 12px;
40+
text-transform: uppercase;
41+
font-weight: bold;
42+
color: #ff007f;
43+
animation: neonGlow 3s ease-in-out infinite, waveEffect 1.5s ease-in-out infinite;
44+
animation-delay: calc(100ms * var(--i));
45+
}
46+
47+
@keyframes neonGlow {
48+
0%, 100% {
49+
color: #ff007f;
3150
filter: blur(1px);
32-
text-shadow: 0 0 10px #00c2ba, 0 0 20px #541a8b, 0 0 30px #00c2ba,
33-
0 0 40px #00c2ba, 0 0 60px #00c2ba, 0 0 80px #00c2ba, 0 0 100px #00c2ba,
34-
0 0 120px #00c2ba;
35-
}
36-
37-
5%,
38-
95% {
39-
filter: blur(0);
40-
color: #ffffff;
41-
text-shadow:none;
42-
}
43-
}
51+
text-shadow: 0 0 10px #ff007f, 0 0 20px #ff00ff, 0 0 30px #ff007f,
52+
0 0 40px #00c2ff, 0 0 70px #ff007f, 0 0 80px #ff007f,
53+
0 0 100px #ff00ff, 0 0 150px #ff007f;
54+
}
55+
50% {
56+
color: #00f9ff;
57+
text-shadow: 0 0 10px #00f9ff, 0 0 20px #00ff99, 0 0 30px #00f9ff,
58+
0 0 40px #ff007f, 0 0 70px #00ff99, 0 0 80px #ff007f,
59+
0 0 100px #00f9ff, 0 0 150px #00f9ff;
60+
}
61+
}
62+
63+
@keyframes waveEffect {
64+
0%, 100% {
65+
transform: translateY(0);
66+
}
67+
50% {
68+
transform: translateY(-20px);
69+
}
70+
}

0 commit comments

Comments
 (0)