Html ve Css ile Zıplayan Top Uygulaması

Bu yazımda Css3 ile birlikte gelen animation özelliğini kullanarak zıplayan top uygulaması yapacağız.

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

html-ve-css-ile-ziplayan-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:

 ⇒  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 1 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 zıplayan 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 2 Duvar Arasında Gidip Gelen Top Uygulaması

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

Yorum Yazın

500+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.