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.
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.
Artık kodlarımızı yazmaya başlayalım.
Html Kodları
|
1 2 3 |
<div id="ball"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#ball { width: 100px; height: 100px; margin: 50px auto; position: relative; border-radius: 50%; background: linear-gradient(60deg, #F5D41E, #F59914); animation-name: ball; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes ball { 0% { top: 0px; } 50% { top: 249px; width: 120px; height: 60px; } 100% { top: 0px; } } |
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.
elinize sağlık telefon araması için on numara animasyon oldu
Rica ederim. Iyi kodlamalar 🙂
Kodlarınız cok işime yaradı teşekkür ederim.