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.
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 4 5 |
<div id="ball"></div> <div id="left"></div> <div id="right"></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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
#left { width: 8px; background-color: blue; height: 100px; position: relative; left: 19%; top: 40px; } #right { width: 8px; background-color: blue; height: 100px; position: relative; left: 85%; top: -60px; } #ball { width: 70px; height: 70px; margin: 50px auto; position: fixed; left: 20%; border-radius: 50%; background: linear-gradient(35deg, #F5D41E, #F59914); animation-name: ball; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes ball { 50% { left: 80%; } 100% { left: 20%; } } |
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.
