Read more
Background text style
Hello dosto in this article I will show you my new text style..
The source code here-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.tex-box{
display:flex;
align-items:center;
justify-content:center;
margin-top:1000px;
font-size:100px;
font-weight:bold;
}
.tex-box span{
text-transform:uppercase;
animation: animate 4s forwards infinite;
}
.tex-box span:nth-child(1){
animation-delay:1s;
}
.tex-box span:nth-child(2){
animation-delay:2s;
}
.tex-box span:nth-child(3) {
animation-delay: 3s;
}
.tex-box span:nth-child(4) {
animation-delay: 4s;
}
.tex-box span:nth-child(5) {
animation-delay: 5s;
}
.tex-box span:nth-child(6) {
animation-delay: 6s;
}
.tex-box span:nth-child(7) {
animation-delay: 7s;
}
.tex-box span:nth-child(8) {
animation-delay: 8s;
}
.tex-box span:nth-child(9) {
animation-delay: 10s;
}
.tex-box span:nth-child(11) {
animation-delay: 11s;
}
@keyframes animate{
0%,100%{
box-shadow: 0 0 0 #000;
border-radius:10px;
}
}
@keyframes animate{
75%{
box-shadow: 0 30px 25px #000;
border-radius:10px;
background-color:pink;
}
}
</style>
<body bgcolor="yellow">
<div class="tex-box">
<span>k</span>
<span>r</span>
<span>i</span>
<span>s</span>
<span>h</span>
<span>n</span>
<span>a</span>
<span>r</span>
<span>a</span>
<span>j</span>
</div>
</body>
</html>
0 Reviews