Glowing Text Yükleniyor - HTML5 - CSS3 - Ders11
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parıldayan Yazılar</title>
<link rel="stylesheet" href="style.css">
<body>
<ul>
<li>Y</li>
<li>Ü</li>
<li>K</li>
<li>L</li>
<li>E</li>
<li>N</li>
<li>İ</li>
<li>Y</li>
<li>O</li>
<li>R</li>
</ul>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
background: #262626;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
display: flex;
}
ul li{
list-style: none;
color: #484848;
font-size: 4em;
letter-spacing: 15px;
font-family: arial;
animation: animate 2s linear infinite;
}
@keyframes animate{
0%{
color: #484848;
text-shadow: none;
}
90%{
color: #484848;
text-shadow: none;
}
100%{
color: #fff900;
text-shadow: 0 0 7px #fff900 , 0 0 50px #ff6c00;
}
}
ul li:nth-child(1){animation-delay: .2s}
ul li:nth-child(2){animation-delay: .4s}
ul li:nth-child(3){animation-delay: .6s}
ul li:nth-child(4){animation-delay: .8s}
ul li:nth-child(5){animation-delay: 1s}
ul li:nth-child(6){animation-delay: 1.2s}
ul li:nth-child(7){animation-delay: 1.4s}
ul li:nth-child(8){animation-delay: 1.6s}
ul li:nth-child(9){animation-delay: 1.8s}
ul li:nth-child(10){animation-delay: 2s}
Yorumlar
Yorum Gönder