├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # CSS-Text-Animation
2 | Creating a amazing text animation using HTML & CSS.
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Ashutosh Python | CSS Text Animation
10 |
11 |
12 | TEXT 🫧 DESIGN
13 |
14 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
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 |
95 |
--------------------------------------------------------------------------------