CSS3'te Düşen Nesneler Oluşturun

Mutlak konumlandırma ve CSS3 animasyonu kullanarak düşen nesneler oluşturmak için CSS kullanma örneği

Snow Example

CSS

Bir yıl boyunca sitemizde bulunan bir Noel teması hakkında güzel yorumlar almıştık, bu yüzden kodu paylaşmaya karar verdik. Tasarım, sayfaları biçimlendirmek için yalnızca CSS kullandı, bu nedenle eklentilere ihtiyaç duymadan tüm tarayıcılarda çalıştı.

CSS Animasyonları nedir?

Animasyon, bir öğenin kademeli olarak bir stilden diğerine değişmesine izin verir.

İstediğiniz kadar CSS özelliğini istediğiniz kadar değiştirebilirsiniz.

CSS animasyonunu kullanmak için önce animasyon için bazı ana kareler belirtmelisiniz.

Anahtar kareler, öğenin belirli zamanlarda hangi stillere sahip olacağını tutar.

Zaten çok iyi açıklanmış bir makalenin üzerinden geçmenin bir anlamı yok, bu yüzden aşağıdaki sayfaya bir bağlantı var.

Bu, kullandığımız HTML ve CSS kodudur.

W3C web sitesinde CCS3 Animation'ı kullanma

HTML & CSS

<style type="text/css">.snowContainer{width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;}.snowExample{position: absolute; top: -450px; opacity: .5; text-align: center;animation: SnowExampleSlide ease-in infinite;-webkit-animation: SnowExampleSlide ease-in infinite;-moz-animation: SnowExampleSlide ease-in infinite;-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;animation-fill-mode: forwards;}@keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-webkit-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-moz-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}</style><div class="snowContainer"><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 3s;animation-delay: 3s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /></div>

CSS

Örnekte dört küçük resim ve daha büyük iki resim farklı hızlarda hareket edecek şekilde ayarlanmıştır, bu da göze daha yakın olduklarını düşündürür.

Ayrıca, üst kısım için konumlandırma ve zamanlamayı doğru hale getirmek için belirli bir miktarda matematik kullanmanız gerekecektir, örneğin burada kullanılan görüntü, 300 piksel yüksekliğinde bir div'de 1198x999 pikseldir.

Ekrandaki görüntü boyutu 400 piksel genişliğe ayarlanmıştır, bu nedenle konumun en az (400/1198)*999=333 piksel yukarıdan başlaması ve görüntünün yeni yüksekliği artı div yüksekliği 333+300'e taşınması gerekir. =633.

Konum mutlak olarak ayarlandığında bir nesnenin nasıl ortalanacağına dair bir örnek de vardır. %50 sola ayarlanır ve ardından sol kenar boşluğu nesne genişliğinin yarısına ayarlanır.