Web design and hosting, database, cloud and social media solutions that deliver business results
  • Solução de negócio
    • Automação Robótica de Processos
    • Programas
    • Serviços de banco de dados
      • Relatórios
      • Integração de dados
    • Design de Websites
      • Design de logotipo
      • Gateways de pagamento
      • Localização e Tradução Web
      • Otimização de sites
      • Segurança do site
      • Ferramentas Técnicas
    • Serviços Empresariais
      • Amazon Web Services
      • Serviços do Google Cloud
      • Microsoft Azure
    • Microsoft Office
    • Mídia Social
  • Sobre
    • Carreiras
      • Tradutor Inglês-Espanhol
      • Tradutor Inglês-Turco
      • Tradutor Inglês-Japonês
      • Tradutor Inglês-Português
    • Equipe
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
    • Portfolio
čeština (CS)Deutsch (DE)English (EN-US)English (EN-GB)Español (ES)Français (FR)हिंदी (HI)italiano (IT)日本語 (JA)polski (PL)Português (PT)русский (RU)Türk (TR)中国的 (ZH)

Criar objetos em queda no CSS

Como criar objetos caindo em CSS

Snow Example


snowflakessnowflakessnowflakessnowflakessnowflakessnowflakes

CSS

Tivemos alguns comentários agradáveis ​​sobre o tema do Natal no site, então decidiram compartilhar o código. Não há nenhum ponto em frente a um artigo que já foi explicado muito bem, então aqui está um link para http://www.w3schools.com/css/css3_animations.asp .
Este é o código CSS que usamos.

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

Há quatro imagens menores no exemplo, e duas maiores, elas estão configuradas para se mover em velocidades diferentes, o que dificulta o olhar para pensar que elas estão mais próximas.

Você também precisará usar uma certa quantidade de matemática para obter o posicionamento e o tempo corretos para o topo, por exemplo, a imagem usada aqui é 1198x999 pixels, em um div de 300 pixels de altura.

O tamanho da imagem na tela é configurado para 400px de largura, portanto a posição precisa começar pelo menos (400/1198) * 999 = 333 pixels acima da parte superior e passar para a nova altura da imagem mais a altura do div 333 300 = 633.

Há também um exemplo de como centrar um objeto quando a posição é definida como absoluta. Eles são ajustados para 50% restantes, e então a margem esquerda é configurada para metade da largura do objeto.

Author

Helpful?

Please note, this commenting system is still in final testing.
Copyright Claytabase Ltd 2020

Registered in England and Wales 08985867

RSSLoginLink Política de CookiesSitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.comClaytabase Ltd, Unit 3d, Rink Road Industrial Estate, PO33 2LT, United Kingdom
As configurações neste site são definidas para permitir todos os cookies. Estes podem ser alterados em nossa página de configurações e políticas de cookie. Ao continuar a usar este site, você concorda com o uso de cookies.
Ousia Logo
Logout
Ousia CMS Loader