Süper Üye
Merhaba değerli forum sakinleri,bugün size HTML&CSS tabanlı hareketli yazı nasıl oluşturulur,bahsetmek istiyorum.Aşağıda vereceğim hazır kodlar ile sadece harfleri değiştirmeniz yeterlidir.Daha fazla harf eklemeniz durumunda kodları kopyala yapıştır yaparak harfleri değiştirmeniz yeterlidir.
HTML:
<html>
<head>
<title>MemoryHackers.org</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text-box">
<span>M</span>
<span>H</span>
<span>.</span>
<span>O</span>
<span>R</span>
<span>G</span>
</div>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
background:#000000;
}
.text-box{
font-size:100px;
font-family:sans-serif;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
span{
display:inline-block;
font-weight:bolder;
animation:mover 6s linear infinite;
color:#22ebf6;
}
@keyframes mover{
0%{
text-shadow:0 0 30px rgba(0,0,0,0);
}
50%{
text-shadow:0 0 30px rgba(0,0,0,0.30);
transform:translateY(30px);
}
100%{
text-shadow: 0 0 30px rgba(0,0,0,0);
}
}
span:nth-child(1)
{
animation-delay:0,5s;
}
span:nth-child(2)
{
animation-delay:1s;
}
span:nth-child(3)
{
animation-delay:1,5s;
}
span:nth-child(4)
{
animation-delay:2s;
}
span:nth-child(5)
{
animation-delay:2,5s;
}
span:nth-child(6)
{
animation-delay:3s;
}