Skip to content

Commit 76c60d3

Browse files
nandini7637nandini7637
authored
Merge pull request Dezenix#108 from Sumandeep-Kaur/text-animations
Text animations
2 parents 5c70483 + 991d18a commit 76c60d3

File tree

12 files changed

+388
-0
lines changed

12 files changed

+388
-0
lines changed

‎Text_Animations/Text_Animation_02/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Shining Text Effect
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
## Preview
7+
https://user-images.githubusercontent.com/77191007/150644249-8f2265bf-b841-4d6c-8a6b-139862a2f353.mp4
8+

‎Text_Animations/Text_Animation_02/code/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
<title>Shining Text Animation</title>
9+
</head>
10+
<body class="container">
11+
<div class="text">
12+
DEZENIX
13+
</div>
14+
</body>
15+
</html>

‎Text_Animations/Text_Animation_02/code/style.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
.container {
6+
height: 100vh;
7+
width: 100vw;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
background: #000;
12+
}
13+
.text {
14+
font-size: 80px;
15+
font-weight: bold;
16+
font-family: sans-serif;
17+
background: linear-gradient(90deg, #000, #fff, #000);
18+
letter-spacing: 5px;
19+
-webkit-background-clip: text;
20+
background-clip: text;
21+
-webkit-text-fill-color: transparent;
22+
background-repeat: no-repeat;
23+
background-size: 80%;
24+
animation: shine 5s linear infinite;
25+
}
26+
@keyframes shine {
27+
0% {
28+
background-position-x: -500%;
29+
}
30+
100% {
31+
background-position-x: 500%;
32+
}
33+
}

‎Text_Animations/Text_Animation_03/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Blink Text Effect
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
## Preview
7+
https://user-images.githubusercontent.com/77191007/150644290-98312c12-bba0-4a41-9810-8cd66dc1c729.mp4
8+

‎Text_Animations/Text_Animation_03/code/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
<title>Blink Text Animation</title>
9+
</head>
10+
<body class="container">
11+
<div class="text">
12+
<span class="fast-flicker">D</span>EZE<span class="flicker">N</span>IX
13+
</div>
14+
</body>
15+
</html>

‎Text_Animations/Text_Animation_03/code/style.css

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
.container {
6+
height: 100vh;
7+
width: 100vw;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
background-color: #141114;
12+
}
13+
.text {
14+
font-size: 80px;
15+
font-weight: bold;
16+
letter-spacing: 2;
17+
color: #ffe6ff;
18+
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
19+
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
20+
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
21+
animation: shine 2s forwards, flicker 3s infinite;
22+
}
23+
.flicker {
24+
animation: shine 2s forwards, blink 3s 2s infinite;
25+
}
26+
.fast-flicker {
27+
animation: shine 2s forwards, blink 10s 1s infinite;
28+
}
29+
@keyframes shine {
30+
0% {
31+
color: #6b1839;
32+
text-shadow: none;
33+
}
34+
100% {
35+
color: #ffe6ff;
36+
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
37+
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
38+
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
39+
}
40+
}
41+
@keyframes blink {
42+
0%,
43+
22%,
44+
36%,
45+
75% {
46+
color: #ffe6ff;
47+
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
48+
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
49+
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
50+
}
51+
28%,
52+
33% {
53+
color: #ff65bd;
54+
text-shadow: none;
55+
}
56+
82%,
57+
97% {
58+
color: #ff2483;
59+
text-shadow: none;
60+
}
61+
}
62+
@keyframes flicker {
63+
from {
64+
opacity: 1;
65+
}
66+
67+
4% {
68+
opacity: 0.9;
69+
}
70+
71+
6% {
72+
opacity: 0.85;
73+
}
74+
75+
8% {
76+
opacity: 0.95;
77+
}
78+
79+
10% {
80+
opacity: 0.9;
81+
}
82+
83+
11% {
84+
opacity: 0.922;
85+
}
86+
87+
12% {
88+
opacity: 0.9;
89+
}
90+
91+
14% {
92+
opacity: 0.95;
93+
}
94+
95+
16% {
96+
opacity: 0.98;
97+
}
98+
99+
17% {
100+
opacity: 0.9;
101+
}
102+
103+
19% {
104+
opacity: 0.93;
105+
}
106+
107+
20% {
108+
opacity: 0.99;
109+
}
110+
111+
24% {
112+
opacity: 1;
113+
}
114+
115+
26% {
116+
opacity: 0.94;
117+
}
118+
119+
28% {
120+
opacity: 0.98;
121+
}
122+
123+
37% {
124+
opacity: 0.93;
125+
}
126+
127+
38% {
128+
opacity: 0.5;
129+
}
130+
131+
39% {
132+
opacity: 0.96;
133+
}
134+
135+
42% {
136+
opacity: 1;
137+
}
138+
139+
44% {
140+
opacity: 0.97;
141+
}
142+
143+
46% {
144+
opacity: 0.94;
145+
}
146+
147+
56% {
148+
opacity: 0.9;
149+
}
150+
151+
58% {
152+
opacity: 0.9;
153+
}
154+
155+
60% {
156+
opacity: 0.99;
157+
}
158+
159+
68% {
160+
opacity: 1;
161+
}
162+
163+
70% {
164+
opacity: 0.9;
165+
}
166+
167+
72% {
168+
opacity: 0.95;
169+
}
170+
171+
93% {
172+
opacity: 0.93;
173+
}
174+
175+
95% {
176+
opacity: 0.95;
177+
}
178+
179+
97% {
180+
opacity: 0.93;
181+
}
182+
183+
to {
184+
opacity: 1;
185+
}
186+
}
187+

‎Text_Animations/Text_Animation_04/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Grow-N-Glow Text Effect Animation
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
## Preview
7+
https://user-images.githubusercontent.com/77191007/150644355-92e8b4a3-4004-40af-aa84-691a7864c5c5.mp4
8+

‎Text_Animations/Text_Animation_04/code/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
<title>Grow-N-Glow Text Animation</title>
9+
</head>
10+
<body class="container">
11+
<div class="text">
12+
DEZENIX
13+
</div>
14+
</body>
15+
</html>

‎Text_Animations/Text_Animation_04/code/style.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
}
7+
.container {
8+
height: 100vh;
9+
width: 100vw;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
background: #333641;
14+
}
15+
.text {
16+
background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
17+
-webkit-background-clip: text;
18+
background-clip: text;
19+
color: transparent;
20+
font-size: 10vw;
21+
font-family: "Source Sans Pro", sans-serif;
22+
animation: reveal 3000ms ease-in-out forwards 200ms,
23+
glow 2500ms linear infinite 2000ms;
24+
}
25+
@keyframes reveal {
26+
80%{
27+
letter-spacing: 8px;
28+
}
29+
100% {
30+
background-size: 300% 300%;
31+
}
32+
}
33+
@keyframes glow {
34+
40% {
35+
text-shadow: 0 0 8px #fff;
36+
}
37+
}
38+

‎Text_Animations/Text_Animation_05/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Blink Text Effect
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
## Preview
7+
https://user-images.githubusercontent.com/77191007/150644406-808e49f7-9b72-4611-8f91-872bcde200bb.mp4
8+

‎Text_Animations/Text_Animation_05/code/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
<title>Blink Text Animation</title>
9+
</head>
10+
<body class="container">
11+
<div class="text">
12+
DEZENIX
13+
</div>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)