Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Servizi database
    • Strumenti
      • Backup del codice SQL
      • Claytabase Server Disk IOPs Calculator
      • Stampante SQL
    • Articoli tecnici
      • Piano di manutenzione di SQL Server 2008
      • Utilizzo dei dati di SQL Server
      • Utilizzo delle date di SQL Server
      • Utilizzo delle funzioni di SQL Server
      • Utilizzo di SQL Server Pivot-Unpivot
  • Sito Web Design
    • Articoli tecnici
      • ASP-NET
      • CSS
    • isola di Wight
    • Sicurezza del sito
  • Servizi per gli affari
    • Microsoft Azure
    • Microsoft Office
  • Circa
    • Portafoglio
    • Squadra
      • Chester Copperpot
CS - češtinaDE - DeutschEN - EnglishES - EspañolFR - FrançaisHI - हिंदीPL - polskiPT - PortuguêsRU - русскийTR - TürkZH - 中国的

Crea oggetti di caduta in CSS

Come creare oggetti che cadono in CSS

Snow Example


snowflakessnowflakessnowflakessnowflakessnowflakessnowflakes

CSS

Avevamo qualche bel commento sul tema del Natale sul sito, quindi abbiamo deciso di condividere il codice. Non c'è motivo di passare a un articolo già spiegato molto bene, quindi qui è un link a http://www.w3schools.com/css/css3_animations.asp .
Questo è il codice CSS che abbiamo utilizzato.

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

Nell'esempio ci sono quattro immagini più piccole, e due più grandi, sono impostate per muoversi a velocità diverse, che truccano l'occhio nel pensare di essere più vicini.

Dovrai anche usare una certa quantità di matematiche per ottenere il posizionamento e il timing corretto per la parte superiore, ad esempio l'immagine qui utilizzata è di 1198x999 pixel, in un div di 300 pixel di altezza.

La dimensione dell'immagine sullo schermo è impostata su 400px wide, quindi la posizione deve partire da almeno (400/1198) * 999 = 333 pixel sopra la parte superiore e passare alla nuova altezza dell'immagine più l'altezza div 333 300 = 633.

C'è anche un esempio di come centrare un oggetto quando la posizione è impostata su assoluto. Sono impostati al 50% a sinistra, quindi il margine sinistro viene impostato a metà della larghezza dell'oggetto.

Author

Gavin Clayton
Gavin Clayton
Ho formato Claytabase nel 2010 come un modo per continuare il mio lavoro con SQL Server e ASP.NET. Ciò è culminato nel sistema di gestione dei contenuti di Ousia che viene preso dal concetto a uno dei CMS più rapidi presenti sul mercato.
 Google Translate
Google Translate

Helpful?

Please note, this commenting system is still in final testing.
RSS Login ContactCookie PolicyMappa del sito
facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd
+442392064871info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ
Partners
Le impostazioni di questo sito sono impostate per consentire tutti i cookie. Questi possono essere modificati sulla nostra pagina politica e le impostazioni dei cookie. Continuando a utilizzare questo sito l'utente accetta l'utilizzo dei cookie.
Ousia Logo
Ousia CMS Loader