Türkiye'nin en güncel forumlardan olan forumdas.com.tr'de forumda aktif ve katkısı olabilecek kişilerden gönüllü katkıda sağlayabilecek kişiler aranmaktadır.
edwardo
FD Üye
HTML öğretici kodu, renkli animasyonlu bir nesneyi bir açıklamayla gösteren bir örnektir:
Bu kod örneğinde, bir DIV elementi üzerinde hareketli, renkli bir top oluşturulmuştur. Topun hareketi, animation özelliği kullanılarak tanımlanmıştır. @keyframes içerisinde, topun her bir aşamada (0%, 25%, 50%, 75%, 100%) nerede olacağı ve hangi renkte olacağı belirtilmiştir.
CSS seçicisi #top, topun boyutunu, arkaplan rengini, konumunu ve hareket animasyonunu tanımlar. window.onload olayı, sayfanın tamamen yüklendiğinde topun hareketini başlatır.
Tarayıcıda bu HTML dosyasını açtığınızda, sayfada hareket eden, renkli bir top belirecektir. Top, belirlenen aşamalarda çeşitli renklere ve konumlara sahip olarak hareket edecektir.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hareketli Renkli Top</title>
<style>
#top {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: hareket 1s infinite;
}
@keyframes hareket {
0% { top: 0; left: 0; background-color: red; }
25% { top: 0; left: 200px; background-color: blue; }
50% { top: 200px; left: 200px; background-color: green; }
75% { top: 200px; left: 0; background-color: yellow; }
100% { top: 0; left: 0; background-color: red; }
}
</style>
</head>
<body>
<div id="top"></div>
<script>
// Sayfanın yüklenmesi tamamlandığında harekete başlatılır
window.onload = function() {
var topElt = document.getElementById("top");
topElt.style.animationPlayState = "running";
};
</script>
</body>
</html>Bu kod örneğinde, bir DIV elementi üzerinde hareketli, renkli bir top oluşturulmuştur. Topun hareketi, animation özelliği kullanılarak tanımlanmıştır. @keyframes içerisinde, topun her bir aşamada (0%, 25%, 50%, 75%, 100%) nerede olacağı ve hangi renkte olacağı belirtilmiştir.
CSS seçicisi #top, topun boyutunu, arkaplan rengini, konumunu ve hareket animasyonunu tanımlar. window.onload olayı, sayfanın tamamen yüklendiğinde topun hareketini başlatır.
Tarayıcıda bu HTML dosyasını açtığınızda, sayfada hareket eden, renkli bir top belirecektir. Top, belirlenen aşamalarda çeşitli renklere ve konumlara sahip olarak hareket edecektir.
