Animação CSS de nuvem chuvosa

1. Introdução ao curso: Então é isso que vamos construir hoje nesta aula. Vamos construir essa linda nuvem chuvosa. Como você pode ver, Harry criou um lindo efeito de nuvem chuvosa Você pode notar que gotas de chuva caem da nuvem e depois de cair no chão, ela desapareceu Vamos construí-lo hoje nesta classe. Olá. Meu nome é John Sharkar e sou seu instrutor neste projeto Este lindo projeto de animação CSS seria um ótimo complemento para seu portfólio. Aqui, precisamos criar uma nuvem usando CSS e também precisamos criar essas gotas de chuva e também precisamos cair essas gotas de chuva É isso que vamos criar neste projeto. Se você estiver interessado em aprender, vamos começar. 2. Como criar a nuvem usando CSS: É bom ver vocês de volta, pessoal. Este é o primeiro tutorial desse projeto e, neste tutorial, vamos criar a nuvem. Na primeira parte deste tutorial, vamos criar essa linda nuvem usando CSS. Para criar esse tipo de formato de nuvem, vamos usar classes Posido, como antes da classe Posido Sem falar muito, vamos entrar no editor de código do Studio de resultados e começar o projeto. Como você pode ver, lado a lado, abro meu editor de código do Result Studio e meu navegador usando a extensão de servidor ao vivo, e já crio um arquivo TML com pontos de índice Eu também crio um arquivo CSS de pontos de estilo. Como você pode ver, vinculamos nosso arquivo de estilo a este documento HTML Como você sabe, precisamos começar com a estrutura do TMS. Primeiro, vou criar um contêiner, que conterá Cloud e ring. Vou criar um contêiner de pontos de classe D. Como você pode ver, criamos uma classe chamada container e, dentro desse container Dev, vou criar o Cloud. Aqui eu vou criar outra De Dev Cloud. Vou configurar esse arquivo. Agora vou pular para a seção de estilo, arquivo css de pontos de estilo. Primeiro, vou selecionar a página do documento usando a seleção universal para digitar estrela. Então, dentro do Cali diz, primeiro, vou usar a propriedade de margem Margem zero. Com isso, também vou usar preenchimento, preenchimento e também zero Em seguida, vou usar a propriedade de dimensionamento da caixa, o tamanho da caixa e aqui vou usar a caixa de água V. Por padrão, não há margem de atraso neste documento Agora vou estilizar nossa etiqueta corporal. Aqui eu vou amarrar o corpo. Então, dentro da resina de Cali, a princípio, vou usar essa propriedade, display display flex Em seguida, vou usar Justify, o centro de conteúdo do Justify Além disso, precisamos usar outra propriedade, alinhar itens. Alinhe o centro de mensagens instantâneas. Se você não está familiarizado com o Flexbox e a ganância , pode conferir meu curso Então eu vou dizer a altura mínima desta página. Então, para digitar altura média, altura média, 100 VH. Nossa próxima propriedade é o plano de fundo. Plano de fundo, e eu vou dizer cor de fundo. Sim, eu vou dizer algo de cor cinza escuro. Cinza escuro. Eu quero um pouco mais de cor escura. Eu seleciono essa cor, essa, e vou definir esse arquivo. Essa cor é boa, por exemplo, e você pode escolher sua própria cor. E agora precisamos estilizar a seção do contêiner. Vou copiar o nome dessa classe de contêiner. E aqui, vou digitar dot container. Então, dentro da coli res, nossa primeira propriedade é a posição. Posição, na verdade. Além disso, vou dizer altura desse contêiner, altura de algo de 400 pixels. Eu vou colocar esse lado. Agora precisamos projetar a parte da nuvem. Então, para copiar o nome da classe cloud e depois um container, eu sou slate dot Cloud Então, dentro dos cálices, nossa primeira propriedade é posição, relação posição Também vou dizer isso à altura desta nuvem com 320 pixels. E altura, 100 pixels. Em seguida, vou definir a cor do fundo, o plano de fundo e vou usar o fundo branco. Para isso, vou usar o valor hexadecimal, tem a tag F. Se eu definir esse arquivo, como você pode ver, ele cria um retângulo e precisamos dar a ele uma forma É por isso que vou usar a propriedade de raio de borda. Raio da borda, raio da borda, 100 pixels. Vamos definir o arquivo e C. Além disso vou posicioná-lo a partir do topo. Aqui vou usar a propriedade superior, os 50 pixels superiores. Vou configurar este para dar forma de nuvem, precisamos usar o seletor Posius Aqui, vou criar um seletor de posius para nuvem, nuvem e cólon Então, dentro do alivss, vou criar Blank contain bland, basicamente, vou criar uma cópia dessa nuvem A próxima propriedade é posição, posição e, desta vez, vou usar o absoluto Obsolt Next, quero mover essa nova nuvem para essa posição Para isso, precisamos usar a propriedade, top -50 pixels. Então eu vou me colocar dentro da altura dessa nuvem. Temos 110 pixels. Além disso, vou definir altura, altura e também 110 pixels. E então eu vou definir a cor de fundo. fundo e para cor de fundo, vou definir também branco. Vou configurar esse arquivo. Agora precisamos dar uma forma redonda. Para isso, precisamos usar o raio da borda. Raio da borda, 50%. Eu vou configurar este. Para colocá-lo no meio, precisamos mover esse círculo para o lado do lábio. Aqui eu vou usar a propriedade lit, it, p 40 pixels. Se eu estiver satisfeito, você pode ver o resultado. Agora, aqui precisamos criar outra forma de círculo para criar uma nuvem perfeita. Para isso, vou criar uma sombra de caixa sólida. Deixe-me te mostrar como. Aqui eu vou usar a propriedade box shadow, box shadow. Primeiro, precisamos posicionar essa sombra. Do topo, vou dar 90 pixels. Da direita, vou dar zero. De baixo, também vou dar zero e da esquerda, vou dar 30 pixels. E, finalmente, vou dar uma cor sólida a essa sombra de caixa. Então, aqui, eu vou digitar, tem etiqueta, cor branca, se se for. Se eu definir esse arquivo, você poderá ver o resultado. Então, como você pode ver, criamos uma forma de nuvem perfeita usando DML e CSS Na próxima parte deste projeto, vamos criar em. Então, obrigado por assistir a este vídeo. Nos vemos na próxima parte. 3. Como criar as gotas de chuva e animá-las usando CSS: Então, essa é a parte final deste tutorial. Nesta seção, vamos criar pingos de chuva e, para criar os pingos de chuva, vamos usar a ajuda de variáveis CSS E também, você vai ter ajuda da função CSS calc Então, vamos voltar ao editor de código do Visual Studio. Na parte anterior, criamos a nuvem com sucesso. Mas nesta parte, vamos criar as gotas de chuva. Então, sem perder seu tempo, vamos começar. No início, vou criar uma etiqueta profunda que conterá gotas de chuva RL de pontos profundos. Como você pode ver, criamos um elemento profundo com classe de chuva. Então, dentro desse elemento profundo, vou criar uma etiqueta de extensão múltipla para nossas gotas de chuva Aqui, dentro dessa tag profunda, vou criar uma tag span. Em seguida, vou usar o atributo de estilo nesse estilo de plano. Aqui eu vou usar variáveis CSS. Eu sei que parece um pouco avançado, mas é muito eficaz limpar uma variável CSS, precisamos usar dads sine Deixe-me mostrar como é o traço e o nome da nossa variável I. Então, precisamos usar dois pontos Então, precisamos usar frio para definir nossa variável. Depois de dois pontos, precisamos fornecer o valor. Para obter um valor aqui, vou digitar um número aleatório, algo 11. No total, vou usar 20 pingos de chuva, mas você pode usar o quanto quiser Vou duplicar essa linha. E aqui, eu vou passar 12. Então, novamente, vou duplicar essa linha aqui, vou passar dez Você pode usar um número aleatório, qualquer número aleatório. É um dez. Lá, duplique-o mais uma vez. E aqui eu vou usar 14. Então, novamente, vou usar 18. Vamos primeiro encaminhar esta seção para economizar seu tempo. E então eu vou duplicar essa seção de trabalho novamente. Eu crio 20 gotas de chuva usando a tag span. Se eu definir esse arquivo, como você pode ver, nada é paraíso aqui. Agora precisamos estilizar as gotas de chuva em nosso arquivo SSS. Quero copiar o nome da classe reinado em nosso arquivo de estilo, vou selecionar essa classe, Reg Então, dentro do Calibra, nossa primeira propriedade é posição, posição relativa Nossa segunda propriedade é display, display flex. E nossa terceira propriedade é o índice Z. Um índice um. Agora precisamos estilizar as gotas de chuva. Para isso, precisamos selecionar a tag rain and Span. Para isso, precisamos selecionar tag de extensão, ponto, chuva, espaço, extensão. Então, dentro dos aliases, nossa primeira propriedade é a posição relativa Nossa próxima propriedade é altura, altura, dez pixels, e também largura, dez pixels Agora vou dizer a cor do diagrama para nossas gotas. Aqui eu vou usar a propriedade do diagrama, fundo vermelho. Vamos configurar o arquivo e ver o que aconteceu. Se eu definir esse arquivo, como você pode ver, ele se parece com uma linha de estado. Mas são todas 20 gotas de chuva. Vamos adicionar um pouco de acolchoamento à nossa chuva. Aqui vou usar a propriedade de preenchimento, preenchimento. Primeiro, para cima e para baixo, vou usar zero, e para a esquerda e para a direita, vou usar 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Em seguida, precisamos colocar uma margem entre as gotas de chuva. Para isso, precisamos usar a propriedade de margem. Margem. Para cima e para baixo, vou usar zero e da esquerda e direita, vou usar dois pixels. Agora você pode ver que nossos pontos de chuva estão perfeitamente organizados e agora precisamos manter a forma redonda dos pontos de chuva para usar a propriedade do raio da borda Então, aqui, vou digitar o raio da borda. Raio da borda, 50%. Vamos configurar o arquivo e você poderá ver o resultado. Agora, ele é enviado para criar a animação. Então, vou usar animação de propriedades de animação. E o nome da nossa animação é animate. E a duração da nossa animação é de cinco segundos. Além disso, a direção é linear. Por fim, precisamos fornecer a contagem de iterações de animação, que é infinita porque eu quero seguir o intervalo de tempo infinito Agora, vamos adicionar o quadro-chave a essa animação. Eu digito nos quadros-chave vermelhos , nosso nome de animação é animate Então, dentro das cálices, primeiro na posição de 0%, vou usar a propriedade transform, transform e quero mover esses pontos vermelhos para É por isso que precisamos usar translate Y. Translate Y. Quero começar nossa animação de ponto vermelho a partir da posição 0% É por isso que eu passo zero. Da mesma forma, vou duplicar essa linha e, na posição de 70%, quero movê-la 300 pixels para baixo É por isso que vou passar dos 300. Também na posição de 100%, quero usar 300 pixels. Vamos configurar o arquivo e ver se ele funcionou corretamente ou não. Como você pode ver, a animação funciona perfeitamente e traduzimos a propriedade Y, eu quero usar a propriedade de escala. Escale na posição de 0%, quero escalar uma vez. Então, na posição de 70%, quero escalá-la mais uma vez, mas na posição de 100%, quero escalá-la para zero. Se eu definir esse arquivo, agora você poderá ver o resultado. Como você pode ver, quando nossas gotas de chuva caem no chão, elas desaparecem, não voltam à posição antiga porque usamos o valor da escala zero na posição de 100% É por isso que desapareceu quando caiu no chão. Agora precisamos mudar a posição de origem da transformação. Aqui eu vou usar transformadores e vou usar o peso inferior. Em seguida, escaneie a parte mais importante desse projeto. Aqui você pode ver que as gotas de chuva estão caindo juntas, mas eu não quero cair gotas de chuva assim Quero que as gotas de chuva caiam uma a uma, aleatoriamente. E para fazer isso, precisamos brincar com a propriedade de duração da animação. Se mudarmos a duração da animação, todas as gotas de chuva cairão uma a uma, aleatoriamente Se você se lembra, como você pode ver no meu arquivo ML, criamos nossa tag span com variável e nossa variável lim é I e definimos um valor aleatório para essa variável, 16, 11, 12, etc Vou usar esse valor aleatório para criar chuva real. Vamos ao arquivo CSS e aqui, vou usar a propriedade de duração da animação , duração da animação. Também vou usar a função Kels, que é uma função do CSS Quero dividir 15 segundos como nós ou a variável I. Aqui vou digitar onde, dentro das redondas, nossa variável N é I para chamar a variável, precisamos usar um traço, depois I. Se eu definir esse arquivo, agora você pode ver que nossas gotas de chuva Estou muito bonita e agora parecem gotas de chuva reais, precisamos mudar a cor das gotas de chuva, e vou usar a cor branca para Se eu definir esse arquivo, agora você pode ver que ele funciona perfeitamente. Nosso projeto está quase concluído, precisamos criar o solo e para criar uma parte do solo no local da morte, precisamos usar a propriedade border bottom. Precisamos encontrar um contêiner aqui. Vou digitar borda inferior. E vou usar uma borda de dois pixels. Além disso, quero uma cor sólida para nossa borda, sólida, e nossa borda é branca, se for Se eu definir esse arquivo, você poderá ver o resultado. Além disso, precisamos remover as gotas de chuva do fundo Então, aqui, vou digitar os dez pixels inferiores. Depois de configurar esse arquivo, agora ele funcionou perfeitamente. Então, concluímos com sucesso nosso projeto de animação Rainy Cloud Se você gosta deste projeto, não se esqueça de fornecer sua avaliação do Vov Muito obrigado.