Text Animation template html code
index.html
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8" />5
<title>Webleb</title>6
<meta content="width=device-width, initial-scale=1.0" name="viewport" />7
<meta content="" name="keywords" />8
<meta content="" name="description" />9
<link href="css/styles.css" rel="stylesheet" />10
</head>11
<body>12
<h1><span>WebLeb</span></h1>13
</body>14
</html>15
styles.css
1
html,2
body {3
height: 100%;4
overflow: hidden;5
user-select: none;6
}7
body {8
display: flex;9
align-items: center;10
justify-content: center;11
background: radial-gradient(#000000, #000);12
}13
h1 {14
font: 300 80px/1 courier;15
white-space: nowrap;16
color: whitesmoke;17
}18
span {19
display: inline-block;20
animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;21
transform-origin: center;22
}23
span:nth-of-type(1) {24
animation-delay: 0.25s;25
}26
span:nth-of-type(2) {27
animation-delay: 0.5s;28
}29
span:nth-of-type(3) {30
animation-delay: 0.75s;31
}32
span:nth-of-type(4) {33
animation-delay: 1s;34
}35
span:nth-of-type(5) {36
animation-delay: 1.25s;37
}38
span:nth-of-type(6) {39
animation-delay: 1.5s;40
}41
span:nth-of-type(7) {42
animation-delay: 1.75s;43
}44
span:nth-of-type(8) {45
animation-delay: 2s;46
}47
span:nth-of-type(9) {48
animation-delay: 2.25s;49
}50
span:nth-of-type(10) {51
animation-delay: 2.5s;52
}53
@keyframes stretch {54
5% {55
transform: scaleX(5000);56
opacity: 0.1;57
}58
15% {59
transform: scaleX(1);60
opacity: 1;61
}62
}63
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
