CSS Animation Komutu nasıl oluşturulur kısaca bu makalede gösterecem.Aşağıda ki HTML-CSS kodları ile oluşturduğum örneğin kodlarını verecem.
Örnek olarak İstiklal Marşımızın iki kıtasını kullandım.Her kıtanın arka plan rengi iki saniyede bir kırmızı mavi olarak renk değiştirecek.
<html>
<head>
<link href="stil.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="kutu">
<br>Korkma, sönmez bu şafaklarda yüzen al sancak;</br>
Sönmeden yurdumun üstünde tüten en son ocak.</br>
O benim milletimin yıldızıdır, parlayacak;</br>
O benimdir, o benim milletimindir ancak.</br>
</div>
<div class="kutu">
<br>Çatma, kurban olayım, çehrene ey nazlı hilal!</br>
Kahraman ırkıma bir gül... Ne bu şiddet, bu celal?</br>
Sana olmaz dökülen kanlarımız sonra helal;</br>
Hakkıdır, Hakk'a tapan, milletimin istiklal.</br>
</div>
</body>
</html>CSS kodlarını blogger şablon kodları içerisinde </b:skin> kodunun hemen üstüne ekleyin
.kutu {
background: blue;
width: 300px;
color: white;
padding: 20px;
text-align: justify;
margin: 20 auto;
animation:renklendir 2s infinite;
-webkit-animation:renklendir 2s infinite;
}
@keyframes renklendir
{
0% {background:blue;}
50% {background:red;}
100% {background:blue;}
}
@-webkit-keyframes renklendir
{
0% {background:blue;}
50% {background:red;}
100% {background:blue;}
}
Aşağıda Yorum ve Sorularınızı Yazabilirsiniz...
Yorum Gönder Blogger Facebook