# glow
<h1 class="glowIn">Hello World</h1>
<p class="glowIn">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis pellentesque id nibh tortor. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu.</p>
1
2
2
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
body {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
background-image: linear-gradient(
rgba(16, 16, 16, 0.8),
rgba(16, 16, 16, 0.8)
),
url(https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg);
background-size: cover;
}
p {
margin: 0em 5em 4em 5em;
}
.glowIn {
text-align: left;
line-height: 1.8;
color: white;
font-family: Lora, serif;
span {
animation: glowIn 0.8s ease both;
}
}
@keyframes glowIn {
from {
opacity: 0;
}
65% {
opacity: 1;
text-shadow: 0 0 25px white;
}
75% {
opacity: 1;
}
to {
opacity: 0.7;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
let glowInTexts = document.querySelectorAll(".glowIn");
glowInTexts.forEach(glowInText => {
let letters = glowInText.textContent.split("");
glowInText.textContent = "";
letters.forEach((letter, i) => {
let span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = `${i * 0.05}s`;
glowInText.append(span);
});
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11