Word-Glow-Animation/index.html at main · dvCodeWorld/Word-Glow-Animation · GitHub

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Text Animation Effects</title>

    <style>
        @import url('https://fonts.googleapis.com/css?family=Bad+Script');

        body{
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
            font-family: 'Bad Script', cursive;
        }
        h1{
            margin: 0;
            padding: 0;
            color: #111;
            font-size: 16em;
        }

        h1 span{
            display: table-cell;
            margin: 0;
            padding: 0;
            animation: animate 2s linear infinite;
        }
        h1 span:nth-child(1){
            animation-delay: 0s;
        }
        h1 span:nth-child(2){
            animation-delay: 0.25s;
        }
        h1 span:nth-child(3){
            animation-delay: 0.5s;
        }
        h1 span:nth-child(4){
            animation-delay: 0.75s;
        }
        h1 span:nth-child(5){
            animation-delay: 1s;
        }
        h1 span:nth-child(6){
            animation-delay: 1.25s;
        }
        h1 span:nth-child(7){
            animation: animate-heart 2s linear infinite;
            animation-delay: 1.50s;
            padding-left: 80px;
            font-size: 1.3em;
        }


        @keyframes animate {
            0%, 100%{
                color: #fff;
                filter: blur(2px);
                text-shadow: 0 0 10px #00b3ff,
                            0 0 20px #00b3ff,
                            0 0 40px #00b3ff,
                            0 0 80px #00b3ff,
                            0 0 120px #00b3ff,
                            0 0 200px #00b3ff,
                            0 0 300px #00b3ff,
                            0 0 400px #00b3ff;
            }
            5%, 95%{
                color: #111;
                filter: blur(0px);
                text-shadow: none;
            }
        }
        @keyframes animate-heart {
            0%, 100%{
                color: red;
                filter: blur(2px);
                text-shadow: 0 0 10px red,
                            0 0 20px red,
                            0 0 40px red,
                            0 0 80px red,
                            0 0 120px red,
                            0 0 200px red,
                            0 0 300px red;
                            /* 0 0 400px red; */
                            /* 0 0 800px red, */
                            /* 0 0 1000px red; */
            }
            5%, 95%{
                color: #111;
                filter: blur(0px);
                text-shadow: none;
            }
        }
    </style>
</head>
<body>
    <h1>
        <span>R</span>
        <span>a</span>
        <span>g</span>
        <span>i</span>
        <span>n</span>
        <span>i</span>
        <span>♥</span>
    </h1>

</body>
</html>