Skip to content

Commit 5c8e129

Browse files
codeaashucodeaashu
authored
✨
1 parent c653a52 commit 5c8e129

File tree

2 files changed

+108
-0
lines changed

2 files changed

+108
-0
lines changed

‎index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<!-- Credit - youtube.com/@ashutoshpython -->
9+
<title> Ashutosh Python | CSS Text Animation </title>
10+
</head>
11+
<body>
12+
<h1>TEXT 🫧 DESIGN</h1>
13+
</body>
14+
</html>

‎style.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
2+
/* Credit - youtube.com/@ashutoshpython */
3+
4+
:root{
5+
--normal: hsla(0, 0%, 0%, .9);
6+
--Sky-Color: rgb(0, 149, 255);
7+
--Pink-Color: rgb(255, 0, 123);
8+
}
9+
10+
body {
11+
background: var(--normal);
12+
}
13+
14+
h1 {
15+
color: var(--normal);
16+
font: normal 140px Varela Round, sans-serif;
17+
height: 140px;
18+
left: 0;
19+
letter-spacing: 5px;
20+
margin: -80px 0 0 0;
21+
position: absolute;
22+
text-align: center;
23+
text-transform: uppercase;
24+
top: 50%;
25+
width: 100%;
26+
animation: move linear 2000ms infinite;
27+
}
28+
29+
@keyframes move {
30+
0% {
31+
text-shadow:
32+
4px -4px 0 var(--Sky-Color),
33+
3px -3px 0 var(--Sky-Color),
34+
2px -2px 0 var(--Sky-Color),
35+
1px -1px 0 var(--Sky-Color),
36+
-4px 4px 0 var(--Pink-Color),
37+
-3px 3px 0 var(--Pink-Color),
38+
-2px 2px 0 var(--Pink-Color),
39+
-1px 1px 0 var(--Pink-Color)
40+
;
41+
}
42+
25% {
43+
text-shadow:
44+
-4px -4px 0 var(--Pink-Color),
45+
-3px -3px 0 var(--Pink-Color),
46+
-2px -2px 0 var(--Pink-Color),
47+
-1px -1px 0 var(--Pink-Color),
48+
4px 4px 0 var(--Sky-Color),
49+
3px 3px 0 var(--Sky-Color),
50+
2px 2px 0 var(--Sky-Color),
51+
1px 1px 0 var(--Sky-Color)
52+
;
53+
}
54+
50% {
55+
text-shadow:
56+
-4px 4px 0 var(--Sky-Color),
57+
-3px 3px 0 var(--Sky-Color),
58+
-2px 2px 0 var(--Sky-Color),
59+
-1px 1px 0 var(--Sky-Color),
60+
4px -4px 0 var(--Pink-Color),
61+
3px -3px 0 var(--Pink-Color),
62+
2px -2px 0 var(--Pink-Color),
63+
1px -1px 0 var(--Pink-Color)
64+
;
65+
}
66+
75% {
67+
text-shadow:
68+
4px 4px 0 var(--Pink-Color),
69+
3px 3px 0 var(--Pink-Color),
70+
2px 2px 0 var(--Pink-Color),
71+
1px 1px 0 var(--Pink-Color),
72+
-4px -4px 0 var(--Sky-Color),
73+
-3px -3px 0 var(--Sky-Color),
74+
-2px -2px 0 var(--Sky-Color),
75+
-1px -1px 0 var(--Sky-Color)
76+
;
77+
}
78+
100% {
79+
text-shadow:
80+
4px -4px 0 var(--Sky-Color),
81+
3px -3px 0 var(--Sky-Color),
82+
2px -2px 0 var(--Sky-Color),
83+
1px -1px 0 var(--Sky-Color),
84+
-4px 4px 0 var(--Pink-Color),
85+
-3px 3px 0 var(--Pink-Color),
86+
-2px 2px 0 var(--Pink-Color),
87+
-1px 1px 0 var(--Pink-Color)
88+
;
89+
}
90+
}
91+
92+
93+
94+

0 commit comments

Comments
 (0)