Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Veritabanı Hizmetleri
    • Araçlar
      • Claytabase Server Disk IOPs Calculator
      • SQL Kod Yedekleme
      • SQL Yazıcı
    • Teknik Makaleler
      • SQL-Server
      • SQL Server 2008 Bakım Planı
      • SQL Server işlevlerini kullanma
      • SQL Server Tarihlerini Kullanma
  • Web Sitesi Tasarımı
    • Ousia
    • Teknik Makaleler
      • ASP-NET
      • CSS
    • Web Sitesi Güvenliği
    • Wight Adası
  • İş hizmetleri
    • Microsoft Azure
    • Microsoft Office
  • Sosyal Medya
  • Hakkında
    • Portföy
    • Takım
      • Chester Copperpot
CS - češtinaDE - DeutschEN - EnglishES - EspañolFR - FrançaisHI - हिंदीIT - italianoPL - polskiPT - PortuguêsRU - русскийZH - 中国的

CSS'de Düşen Nesneler Oluşturun

CSS'de düşen nesneler nasıl oluşturulur?

Snow Example


snowflakessnowflakessnowflakessnowflakessnowflakessnowflakes

CSS

Sitede Noel teması hakkında güzel yorumlar vardı, bu yüzden kodu paylaşmaya karar verdik. Zaten çok iyi açıklanmış bir makaleyi gözden geçirmenin hiçbir anlamı yok, bu yüzden http://www.w3schools.com/css/css3_animations.asp bağlantısını burada bulabilirsiniz .
Bu, kullandığımız CSS kodudur.

HTML

<style type="text/css">
  .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;}
  .SnowExample.animation {}
  @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 style="width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;">
<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

Örnekteki dört küçük resim var ve iki tane daha büyük resim var, farklı hızlarda hareket etmeye hazırlanıyorlar ki bu da gözlerin daha yakın olduğunu düşünmelerine neden oluyor.

Ayrıca, üst için doğru konumlandırma ve zamanlama almak için belirli bir miktarda matematik kullanmanız gerekecektir; örneğin, burada kullanılan resim, yüksek, 300 piksel bir div'de 1198x999 pikseldir.

Ekrandaki görüntü boyutu 400 piksellik genişliğe ayarlandığından, konumun en azından (400/1198) * 999 = 333 pikselden başlayıp resmin yeni yüksekliğine ve div yüksekliğine hareket etmesi gerekiyor 333 300 = 633.

Bir konumun mutlak olarak ayarlandığında bir nesnenin merkezlenmesinin bir örneği de vardır. Bunlar% 50 sola ayarlanır ve daha sonra sol kenar boşluğu nesne genişliğinin yarısına ayarlanır.

Author

Gavin Clayton
Gavin Clayton
SQL Server ve ASP.NET ile çalışmamı sürdürmek için bir yol olarak Claytabase'i 2010'da kurdum. Bu, Ousia İçerik Yönetim Sisteminin konseptten pazardaki en hızlı CMS'lerden biri haline getirilmesiyle sonuçlandı.
 Google Translate
Google Translate
RSS Login ContactCookie PolicySitemap
facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd
+441983300796info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ
Bu sitedeki ayarlar tüm çerezlere izin verecek şekilde ayarlanmıştır. Bunlar, çerez politikamız ve ayarlar sayfamızdan değiştirilebilir. Bu siteyi kullanmaya devam ederseniz, çerezlerin kullanımını kabul etmiş olursunuz.
Ousia Logo
Ousia CMS Loader