Html ve Css ile 2 Duvar Arasında Gidip Gelen Top Uygulaması

Bu yazımda Css3 ile birlikte gelen animation özelliğini kullanarak iki duvar arasında gidip gelen top uygulaması yapacağız.

Uygulamamızın son hali şu şekilde olacak.

html-ve-css-ile-iki-duvar-arasında-gidip-gelen-top-uygulamasi

Bu uygulama için kullandığımız Css3 özellikleri şunlar:

  • animation
  • border-radius
  • linear-gradient

Bu konularda eksikleriniz varsa detaylı olarak anlattığım şu yazılara bakabilirsiniz.

Css Animation Kullanımı

Css Border Radius Kullanımı

Css Gradient Kullanımı

Html Kodları

Css Kodları

Kısaca yazdığımız kodları özetleyecek olursak:

 ⇒  Id si left ve right olan div’leri birer dikey çizgi haline getiriyoruz. Dikey çizgi oluşturmak için Html ve Css ile Dikey Çizgi Nasıl Yapılır? yazımı da okuyabilirsiniz.

 ⇒  Topun tam yuvarlak olması için border-radius özelliğine 50% değeri veriyoruz.

 ⇒  Topun tek renk olması yerine geçişli bir renk vermek için linear-gradient özelliğini kullanıyoruz.

 ⇒  animation-duration özelliği ile animasyonun toplam 3 saniye sürmesini sağlıyoruz.

 ⇒  animation-iteration-count özelliğine infinite değeri vererek animasyonun sürekli devam etmesini sağlıyoruz.

 ⇒  keyframes içerisinde de yapmak istediğimiz animasyonun kodlarını yazıyoruz.

Html ve Css kullanarak yaptığımız iki duvar arasında gidip gelen top uygulamamız bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Html ve Css ile Zıplayan Top Uygulaması

Yeni bir yazımda görüşmek üzere.

Yorum Yazın