Read more
Moving shodow style text
This is very amazing styles text now your
Source code here
<!DOCTYPE html>
<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>
<style>
.text-box{
font-family:poppins;
font-size: 100px;
font-weight:600;
letter-spacing:10px;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.text-box span{
color:burlywood;
text-transform:uppercase;
animation:animate 4s ease forwards infinite;
}
.text-box span:nth-child(1){
animation-delay:.1s;
}
.text-box span:nth-child(2){
animation-delay:.2s;
}
.text-box span:nth-child(3) {
animation-delay: .3s;
}
.text-box span:nth-child(4) {
animation-delay: .4s;
}
.text-box span:nth-child(5) {
animation-delay: .5s;
}
.text-box span:nth-child(6) {
animation-delay: .6s;
}
@keyframes animate{
0%,100%{
text-shadow: 0 0 0 #000;
}
}
@keyframes animate{
50%{
text-shadow: 0 30px 25px #000;
}
}
</style>
</head>
<body bgcolor="beige">
<div class="text-box">
<span>k</span>
<span>r</span>
<span>i</span>
<span>s</span>
<span>n</span>
<span>a</span>
</div>
</body>
</html>
0 Reviews