Animações criativas de CSS e JavaScript - o guia completo com 150 projetos!

1. Animações criativas avançadas de CSS e Javascript - 140 projetos: Você está procurando um curso que o leve de um iniciante completo à criação de animações CSS e Javascript bonitas e avançadas para seus sites, ou você já fez outros cursos de CSS, mas ainda quer melhorar suas habilidades em CSS e levá-las ao próximo nível dominando as CSS e Se sim, então você veio ao lugar certo. Eu sou e este é o curso de animações CSS e Javascript mais vendido Neste curso, você dominará animações, transições e transformações em CSS e Javascript, e até mesmo a propriedade CSS clip path, enquanto codifica 140 animações e efeitos criativos , passo a passo E ao criar cada um desses exemplos, você aprenderá novas ideias e obterá inspiração para ajudá-lo a criar animações avançadas e torná-lo um desenvolvedor web melhor e mais confiante Então, o que há nesse curso? Bem, começaremos examinando a propriedade de transição CSS e suas diferentes funções e veremos como ela pode dar vida aos seus elementos HTML. Em seguida, passaremos para as transformações CSS, que abrem as portas para muitas opções criativas Movendo elementos HTML pela página para redimensioná-los, girá-los e incliná-los Lá, dominaremos todas as funções de transformação que podemos usar em dois ambientes D e três D. Então chegamos à parte divertida. Usaremos tudo o que aprendemos sobre CSS, transformações e transições para criar alguns exemplos criativos que inspirarão você e ajudarão você a aproveitar ao máximo o que aprendeu Começaremos criando vários efeitos de botão diferentes, depois experimentaremos efeitos de imagem, efeitos de menu, efeitos cartas e até mesmo outras transformações interessantes, exemplos como efeitos de texto e mídia social Em seguida, passaremos a dominar CSS, animações e quadros-chave Aprenderemos tudo sobre eles, todas as suas diferentes propriedades que facilitam a animações web criativas e avançadas Na seção a seguir, criaremos mais de 40 projetos criativos de animação usando técnicas diferentes. Tenho certeza de que esses exemplos o surpreenderão e estimularão sua imaginação, mostrando quantas coisas incríveis podem ser feitas usando as habilidades que você aprendeu Depois disso, aprenderemos sobre a propriedade CSS clip path, que nos permite criar efeitos de ótima aparência e abre as portas para ideias ainda mais criativas. Aprenderemos como podemos usá-lo para criar alguns projetos diferentes e muito interessantes. Agora, em sua jornada neste curso, muitos dos meus alunos pediram que eu fizesse o upload uma nova seção com alguns efeitos de Javascript. Então, a seu pedido, agora você pode conferir esta seção no final do curso, onde levaremos nossas habilidades para a próxima etapa e aproveitaremos o poder do Javascript para criar alguns efeitos avançados interessantes que são impossíveis de criar usando apenas CSS. Para ter uma ideia geral dos projetos que vamos criar ao longo do curso, recomendo que você confira a primeira palestra de cada seção Lá eu incluí uma prévia de todos os efeitos que vamos criar. Acho que você pode ver que este curso está repleto de conteúdo. Ele vem com 18 horas de vídeo para download e todos os recursos de codificação para os projetos em que trabalharemos ao longo do curso Lembre-se de quando ele foi carregado pela primeira vez. Este curso dura apenas meia hora. Então, você sabe, estou sempre tentando adicionar novos conteúdos com ideias diferentes para ajudá-lo a se manter atualizado com as novas técnicas atuais de CSS e Javascript para criar todos os efeitos interessantes que você vê por aí. Se você quiser aprimorar suas habilidades em CSS e Javascript, este curso é realmente perfeito para você. Mais de 19.000 estudantes já se inscreveram e deixaram centenas de avaliações cinco estrelas Tenho certeza de que você gostará do curso tanto quanto eles. Não espere e se pergunte. Junte-se a nós no curso hoje e nos vemos lá dentro. 2. 2 - o que é transições CSS: Olá a todos. Bem-vindo a esta lição em que falaremos sobre transições CSS. Então, primeiro de tudo, o que é a propriedade de transição CSS? E o que isso pode fazer por nós? Bem, transição como uma propriedade CSS aplicada a um elemento específico para fazer outras propriedades deste elemento específico mudar suavemente ao longo de uma determinada duração. Ou animado de uma maneira agradável ao passar o mouse sobre, ou para outro exemplo, focando nesse elemento. Vejamos um exemplo do que quero dizer aqui no meu HTML. Você pode ver aqui que eu tenho um botão simples. E aqui no meu CSS, adicionei alguns estilos ao botão. Você pode ver que eu acabei de mudar a altura, a largura e o tamanho da fonte para torná-la maior. Altere a cor do texto para branco e remova a borda e, em seguida, adicionou uma cor de fundo azul. E você pode ver no navegador aqui como nosso botão. Agora, vamos adicionar uma nova declaração CSS. Então eu vou direto aqui e dizer botão sobre o pairar. Ou seja, quando movo o cursor sobre o botão, quero mudar a cor de fundo para verde. Agora, se eu passar o mouse sobre o meu botão, você pode ver a cor de fundo azul muda para verde. E quando afasto o rato, a cor de fundo volta a azul. Mas você deve ter notado que esta mudança de azul para verde, está acontecendo tão rápido. Parece um interruptor de ligar e desligar. Parece bastante mecânico. Acho que ficará muito melhor se essa mudança acontecer de forma mais suave. E isso é exatamente o que a transição CSS pode fazer por nós. Então dissemos que a transição faz com que a mudança das propriedades CSS ocorra sem problemas durante um período específico de tempo. Para definir uma transição, precisamos usar pelo menos duas coisas. A primeira é a propriedade CSS que mudará do estado inicial para o estado final. A segunda é a duração, o que significa que a quantidade de tempo que esta mudança levará para completar faz sentido, certo? Então, a fim de fazer isso, precisamos declarar para propriedades CSS. O primeiro é chamado de propriedade de transição, que é a propriedade que você deseja aplicar a transição ou fazer alterações suavemente são bem. Neste caso, é a cor de fundo. E o segundo é uma duração de transição, que é o período de tempo que a propriedade levará para mudar do estado inicial para o final. Digamos um segundo. E agora, quando eu passar o mouse sobre o botão, você pode ver que a mudança ocorre sem problemas uma maneira agradável e é muito melhor do que antes da transição foi aplicada. E quando eu me afasto, a cor de fundo retorna ao azul bem. Agora, a propriedade de duração de transição Connect Set milissegundos, bem como segundos. Por exemplo, eu posso mudar este 1 segundo para, digamos, 3000 milissegundos, que na verdade são três segundos. Então, quando eu passar o mouse sobre o botão novamente, a cadeia deve ocorrer em uma duração mais longa. 3. 3 - opções de transição CSS: Olá a todos. Nesta lição vamos continuar falando sobre a propriedade de transição e as outras opções com as quais podemos lidar ao usá-la em nossos elementos HTML. Agora, além da propriedade de transição e da duração de transição que falamos na última lição. E lembre-se que dissemos que eles são necessários para a transição para trabalhar nos elementos. Nós também temos duas propriedades adicionais que podemos usar para assumir um controle adicional de nossa transição. E essas são a função de temporização de transição e o atraso de transição. Primeiro, a função de temporização de transição simplesmente se refere a como a alteração na propriedade ocorrerá. Por exemplo, a cor de fundo começará a mudar lentamente no início da duração da transição e, em seguida, mais rápida no final? Ou irá mudar ao mesmo ritmo durante todo o período de transição? Essas perguntas podem ser respondidas pela função de temporização de transição. Agora, a função de temporização de transição tem cinco valores diferentes que podemos usar. Primeiro, a facilidade, que é aplicada por padrão, se você não usar a função de temporização de transição, o que ela faz é que a cadeia comece lenta, então vá mais rápido no meio, e depois desacelere um pouco antes do fim. Segunda linear em que a mudança ocorrerá na mesma taxa desde o início até o fim ao longo da duração da transição. Terceiro é n, em que a mudança começa lenta e, em seguida, acelera antes do final. frente. Facilidade para fora, que ao contrário de facilidade in, começa rápido e, em seguida, diminui no final. E, finalmente, facilidade em entrar, fora em que a mudança começa devagar, em seguida, acelera no meio, e depois termina devagar. É uma espécie de facilidade. Não há muita diferença entre eles. Ótima. Então vamos ver aqueles em ação. Eu tenho cinco valores de função de temporização de transição aqui no meu navegador, e eu tenho uma demonstração para cada um deles. Agora, a propriedade que vai mudar aqui é a posição da div. Então, quando eu passar o mouse sobre qualquer um deles, ele irá mover uma distância específica horizontalmente e, em seguida, retornar à sua localização original quando eu passar o mouse para longe, assim. Agora, antes de ver os diferentes valores, Vamos dar uma olhada neles no editor de código e ver como criamos esse movimento horizontal. Então aqui no meu HTML, eu tenho uma div com uma classe de contêiner. Então, dentro dele, eu tenho cinco divs crianças, todos eles tendo com movimento de classe que está usando um CSS para adicionar os estilos gerais para todas as divs. E cada um deles tem um ID específico para que possamos alterar a função de temporização de transição de acordo com esse ID. Então você pode ver que o primeiro tem uma identificação de facilidade. Sua função de temporização de transição será 0s. O segundo é linear. Em seguida, facilidade para dentro, facilidade para fora e facilidade para fora. E quando vamos para o nosso CSS, aqui nós selecionamos a classe Move e adicionamos alguns estilos genéricos para tornar os vídeos mais bonitos. Como algumas margens com altura, preenchimento e assim por diante. E aqui na última linha, declaramos a propriedade de transição, que é a tradução que é responsável por alterar a localização das dibs da esquerda para a direita sobre nossa duração de transição de três segundos. Então, se olharmos aqui no final do arquivo CSS, você pode ver que estamos direcionando todas as divs. E quando passarmos o mouse sobre eles, eles traduzirão, ou, em outras palavras, sua localização na página mudará. Eles moverão 900 pixels no eixo x ou horizontalmente e 0 verticalmente. Esta é uma propriedade de transformação que aprenderemos mais tarde no curso. Mas eu quero que você saiba que isso apenas mudará a localização do div 900 pixels para a direita. Quando passarmos por cima dele. Acima disso, eu direcionei cada div com seu ID exclusivo e adicionei os cinco valores diferentes da função de temporização de transição. Então aqui eu adicionei facilidade para o primeiro, linear para o segundo, e, em seguida, facilidade para dentro, facilidade para fora e facilidade para dentro, fora. Então, para encerrar as coisas, o que estamos fazendo aqui é simples. Nós apenas dissemos para o navegador, quando eu passar o mouse sobre qualquer div, eu quero que ele mova 900 pixels para a direita. E eu quero que essa mudança ou esse movimento aconteça sem problemas em três segundos. E quero que cada div se mova de forma diferente. Então, o primeiro se moverá de forma diferente do segundo, que se moverá de forma diferente do terceiro, e assim por diante. Agora, tudo bem, vamos voltar para o navegador. E quando eu passar o mouse sobre 0s, que é o padrão, você pode ver que ele começa lento, então fica mais rápido quando retorna para lento antes do final. E quando eu pairar para longe, ele também retornará lento, então rápido, depois lento. Mas para linear, se eu pairar, você vê que ele vai na mesma taxa ao longo do tempo de duração. Está se movendo na mesma velocidade por todos os três segundos. E facilidade em entrar. Devagar no início, depois mais rápido no final. E quando eu pairo para longe, ele retorna devagar. Então, mais rápido novamente no final. Facilitar rapidamente no início e, em seguida, lento no final. E quando eu pairo para longe, ele retorna rápido. E depois devagar de novo no final. Facilidade para entrar e sair, Comece devagar, em seguida, move-se mais rápido no meio, em seguida, lento novamente no final. Tudo bem, agora, a segunda propriedade sobre a qual falaremos nesta lição é chamada de atraso de transição. E simplesmente representa o tempo que a transição espera antes de começar. Ele aceita valores de tempo em segundos ou milissegundos. Agora, aqui no nosso HTML, temos o botão da primeira lição. Eu acho que você se lembra que quando passarmos o mouse sobre esse botão, a cor de fundo vai mudar de azul para verde, assim. Agora vamos voltar ao nosso CSS. Vou aqui abaixo da propriedade de duração da transição. E vou adicionar atraso de transmissão dois segundos. E agora, quando eu passar o mouse sobre o botão, ele deve esperar dois segundos antes que a mudança nas cores de fundo comece. E isso é simplesmente a propriedade de atraso de transição. 4. 4 - maneiras diferentes escrever a propriedade de transição: Olá a todos. Nesta lição vamos continuar falando sobre as várias opções de transição que temos. Assim, nas lições anteriores, aprendemos que a transição faz com que a mudança em uma propriedade CSS específica ocorra suavemente em um valor específico de tempo. Mas podemos usar a transição em mais de uma propriedade, seja, podemos fazer mais de uma mudança de propriedade sem problemas? Bem, a resposta é sim. Aqui no meu CSS, eu vou aqui e adicionar cor. Preto. Então, quando eu passar o mouse sobre o botão, quero que a cor de fundo mude de azul para verde, e a cor do texto mude de branco para preto. Agora, vamos ver isso no navegador. Vou passar o mouse sobre o botão e você verá que a cor do texto muda rapidamente sem transição. Então, como podemos aplicar a transição a ela? É tão fácil. Voltar ao nosso CSS. Vou aqui adicionar um espaço. Em seguida, outra propriedade de transição, que é a cor, é claro. E agora, quando eu voltar para o navegador e passar o mouse sobre o botão, você pode ver que a cor do texto muda suavemente junto com a cor do plano de fundo. E podemos realmente estender isso, ou seja. Podemos alterar quantas propriedades quisermos. Então, por exemplo, vamos para o nosso CSS. E eu também quero mudar a largura do botão para, digamos, 600 pixels quando eu passar o mouse sobre ele. E eu vou subir aqui e adicionar espaço que largura para fazê-lo mudar suavemente. E quando eu vou para o navegador e passar o mouse sobre o botão, você pode ver que tudo está mudando bem juntos. E no caso de você precisar mudar muitas propriedades, digamos cinco ou seis. E você acha que vai ser difícil escrever todos eles aqui. Você pode simplesmente removê-los e adicionar a palavra-chave all. Ao fazer isso, todas as propriedades serão incluídas na transição. Então vamos ver isso. Você pode ver que nada muda. Ótimo. Agora aprendemos todas as propriedades de transições CSS com as quais podemos trabalhar. Mas há uma propriedade abreviada que podemos usar para misturar todos eles em uma única linha, e é chamado apenas transição. Então eu vou remover essas duas linhas e eu vou adicionar transição. Em seguida, a propriedade de transição bem aqui. Vou fazer a transição apenas para o fundo. Em seguida, um espaço e a duração da transição de três segundos. São suficientes para que a transição ocorra. Mas se você quiser adicionar as outras propriedades, adicione outro espaço e adicione a função de temporização de transição. Digamos facilidade em outro espaço e o atraso de transição no final, digamos apenas 1 segundo. E quando vemos isso no navegador, você pode ver quando eu passar o mouse sobre o botão, ele vai esperar 1 segundo. Inicie a alteração na cor de fundo ao longo de três segundos. E, novamente, podemos escolher mais de uma propriedade. Para adicionar mais de uma propriedade. Neste método curto, usamos uma vírgula para separar as várias propriedades. Então eu vou aqui e adicionar uma vírgula. Então vou adicionar a outra propriedade que eu quero mudar, que é a cor. Então a duração da transição, digamos dois segundos desta vez. E então a função de temporização de transição, digamos facilidade. E finalmente, a duração da transição. Agora queremos fazer algo legal aqui. Queremos que a mudança na cor do texto comece após a mudança na cor de fundo terminar. Então devemos adicionar uma duração de transição de quatro segundos, três para a transição de fundo em si, e um para o seu atraso. Então, de volta ao navegador. Vou passar o mouse sobre o botão e você verá que a cor de fundo muda. E depois disso, a cor do texto começa a mudar. E, claro, podemos adicionar outras propriedades. Então eu vou voltar para o nosso CSS e ir para a direita aqui, remover esta nova largura e adicionar uma nova propriedade, digamos limite de raio, 50%. Então o raio da fronteira também mudará. E então eu vou subir aqui e incluir isso na transição e adicionar uma duração de transição de quatro segundos, em seguida, facilitar a função de temporização de transição e, em seguida, seis segundos para a duração da transição. Então, ele começará após as duas primeiras propriedades terminarem. Então, quando eu voltar para o navegador e passar o mouse sobre o botão, você pode ver o fundo vai mudar quando a cor do texto, e finalmente, o raio da borda. E, claro, podemos usar a palavra-chave tudo se quisermos apenas animar todas as propriedades juntas, vou remover tudo isso e dizer, oh, então a duração da transição de três segundos e, em seguida, facilitar. E finalmente, o atraso de transição de dois segundos. E quando vemos isso no navegador, você pode ver todas as propriedades estão mudando umas com as outras. Mas você notou agora que não podemos controlar o atraso de transmissão como poderíamos no método anterior, porque todas as propriedades agora estão começando e terminando juntas. Então é isso para esta lição, e eu vou te ver na próxima. 5. 5 - que as propriedades podem ser 5: Olá a todos. Nas lições anteriores, aprendemos o que é uma transição, como ela funciona em todas as opções disponíveis e sintaxe que podemos usar em uma transição. Se você se lembra, dissemos que os inimigos de transição a mudança nas propriedades CSS ao longo de uma duração específica. Mas nem todas as propriedades CSS podem ser usadas com transições porque a mudança nessas propriedades não acontece gradualmente. É mudanças de um estado para outro sem quaisquer valores intermediários. Propriedades que não são animatable. Os nossos gostam de imagem de fundo, porque não pode mudar gradualmente de uma imagem para outra. Exibir também não é uma propriedade animatable. E há muitos mais como estilo de borda, posição, flutuação, fundo, repetição, font-family, e assim por diante. Por outro lado, as propriedades animáveis são aquelas que podem ser expressas por números. Porque o navegador pode calcular ou interpelar valores intermediários, como largura, altura, largura da borda, preenchimento, margem, altura da linha, opacidade. Foi ideia da Gabby. Também podemos animar as propriedades que são expressas por cores, como cor e cor de fundo. E se você quiser um recurso para encontrar todas as propriedades animatable, o site do desenvolvedor dot mozilla.org tem uma lista de todas elas. Então você pode simplesmente ir para o Google e digitar quais propriedades CSS podem ser transferidas. E, em seguida, clique no site Mozilla. E ele vai levá-lo a esta lista onde você tem todas as propriedades animatable. Agora, para que você veja essas propriedades animatable em ação, eu criei esta página que contém algumas delas. Por exemplo, se eu passar o mouse sobre esta div, nós opacidade vai fazer a transição assim. Então você pode baixar esse arquivo a partir dos recursos e tem essas propriedades para ver como eles ficam durante a transição. 6. 6 - CSC2D de transforma conceitos básicos: Olá a todos e bem-vindos a esta nova seção no curso onde aprenderemos sobre transformações 2D. Então, o que nosso CSS transforma e o que eles podem fazer por nós? Bem, no último capítulo, aprendemos sobre transições CSS, que nos permitiu lidar com as propriedades CSS aplicadas a elementos específicos e fazer essas propriedades mudarem suavemente durante um período específico de tempo. Neste capítulo, não estaremos aprendendo a controlar as propriedades aplicadas aos elementos, mas vamos controlar os próprios elementos, como divs e imagens e assim por diante. Em outras palavras, aprenderemos como alterar o tamanho, a forma e a posição do elemento. E isso é o que as transformações CSS são nosso limite. A propriedade transform tem quatro funções que podemos usar para controlar como nossos elementos serão exibidos. E essas funções são a função de escala, que nos permite redimensionar os elementos, que significa aumentar ou diminuir sua altura ou largura. A função de tradução, que nos permite mover o elemento e mudar sua posição para qualquer ponto no navegador horizontal ou verticalmente. A função de rotação, que nos permite girar os elementos em um ambiente 2D por qualquer grau ou qualquer número de voltas que queremos. E a função de inclinação, que nos permite inclinar os elementos ao longo do eixo x ou do eixo y. Então, agora, depois de ver o que as transformações CSS podem fazer por nós e quais funções são usadas com ele. Na próxima lição, começaremos a aprender essas funções, e começaremos com a função de tradução. Vejo-te na próxima lição. 7. 7 - função tranlsate CSS: Olá a todos. Nesta lição, vamos aprender como mudar a posição de elementos HTML como divs, imagens e assim por diante usando a função Transformar Translate. Agora, toda vez que você quiser usar a propriedade transform, você vai escrevê-la assim. Transformar. Em seguida, a função de transformação que você deseja aplicar, que é traduzir para esta lição e, em seguida, parênteses. E dentro deles, o valor para a função especificada. Agora vamos falar um pouco sobre a função de tradução. Basicamente, a função de tradução move elementos ao redor do navegador ao longo do eixo x e do eixo y. Então, por exemplo, se eu escrever algo assim, transformar traduzir e pixels, dez pixels, isso irá mover o elemento 10 pixels para a direita e dez pixels para a parte inferior de sua posição original. Então vamos tentar isso. Você pode ver aqui no meu HTML, tudo o que eu tenho é uma imagem que vamos tentar todas as funções em e em cima aqui e adicionar alguns estilos para fazer a imagem parecer boa quando a vemos. E se formos para o navegador, você pode ver que a imagem está sentada aqui. Então queremos mudar a posição da imagem, o significa que queremos movê-la horizontalmente ou verticalmente. Então, primeiro, queremos fazer com que se mova horizontalmente. Podemos fazer isso facilmente usando a propriedade translate transform. Voltarei ao editor de código e direcionarei a imagem. E quando eu passar o mouse sobre ele, vou adicionar transformação. E a função que eu quero é traduzir, e eu quero movê-la horizontalmente ao longo do eixo x. Então eu vou dizer traduzir x, e então eu vou adicionar o valor da distância que eu quero que o elemento para mover, digamos 500 pixels. E vamos subir aqui e adicionar algumas transições para que o movimento aconteça sem problemas. Então vou adicionar transição. E, em seguida, a propriedade que queremos mudar suavemente, que é claro é transformada, e depois a duração da animação. Digamos dois segundos. Ótimo. Então agora o que deve acontecer quando eu passar o mouse sobre a imagem é que ela move 500 pixels horizontalmente ao longo do eixo x para a direita. Então, de volta ao navegador. E quando eu passar o mouse sobre a imagem, é claro que ela se moverá suavemente 500 pixels para a direita. Agora, nós também podemos usar valores negativos para a propriedade translate, e ele vai funcionar bem, mas o elemento vai se mover para a esquerda, não para a direita. Então de volta ao nosso editor de código. E eu vou aqui e adicionar menos 500. E quando eu voltar e passar o mouse sobre a imagem novamente, ele vai se mover para a esquerda desta vez. Ótimo. Em seguida, queremos mover a imagem verticalmente, não horizontalmente. Fácil o suficiente. Vamos usar Traduzir Y em vez de X. Então eu vou voltar para o nosso editor de código e mudar este x para um y. Então, quando usamos valores positivos, a imagem vai se mover em direção ao fundo. Mas neste caso estamos usando valores negativos. Então devemos ir para o topo, de volta para o navegador. E quando eu passar o mouse sobre a imagem, você pode ver que ela se move 500 pixels em direção ao topo. E vamos voltar ao nosso editor de código e usar 500 pixels positivos. E claro que se moverá para baixo. Agora, podemos combinar essas duas funções em uma função simplesmente chamada traduzir. Então de volta ao nosso editor de código. Vou remover este y. Agora a função de tradução aceita dois valores. O primeiro valor é X, que moverá a imagem ao longo do eixo x. Então eu vou dizer menos 500 pixels, por exemplo. E o segundo valor é y, que indica o movimento verticalmente ao longo do eixo y, digamos 200 pixels. E agora, quando eu passar o mouse sobre a imagem, ela não deve mover menos 500 pixels ao longo do eixo x, significando 500 pixels para a esquerda e 200 pixels para a parte inferior ao mesmo tempo. E assim, a imagem está se movendo horizontalmente e verticalmente ao mesmo tempo. Então, para embrulhar as coisas, Traduzir é uma das funções que podemos usar com a propriedade transform. E nos permite alterar a posição dos elementos HTML na página. Pode ser Traduzir X, que irá mover o elemento horizontalmente para a direita se o valor for positivo ou para a esquerda se o valor for negativo. Ou pode ser Traduzir Y, que moverá os elementos verticalmente em direção ao fundo se for positivo ou em direção ao topo se for negativo. E podemos apenas usar Translate, que aceita dois valores, x e y, que removem o elemento ao longo de ambos os eixos ao mesmo tempo. 8. 8 - função de escala CSS: Olá a todos. Nesta aula, nós vamos aprender como redimensionar elementos HTML utilizando a função de escala. Assim, a função de escala nos permite redimensionar os elementos facilmente. Mas o que queremos dizer quando dizemos redimensionar elementos? Bem, redimensionar elementos significa mudar sua largura ou altura ou ambos os aspectos. Então vamos começar com a largura. Podemos redimensionar os elementos facilmente usando escala x. Então eu tenho a mesma imagem da lição anterior, e eu vou para a direita aqui quando eu passar o mouse sobre a imagem e eu vou adicionar a escala de transformação x. e a função de escala exceto números que quanto a largura do elemento mudará em relação à sua largura original. Então, por exemplo, se eu adicionei aqui, isso fará com que a largura da imagem seja aumentada no dobro do tamanho original. Então, se fosse 100 pixels, será 200 pixels. E se eu mudar os dois para 1,5 , serão 150 pixels. Então vamos ver isso. Você pode ver quando eu passar o mouse sobre a imagem, sua largura aumenta e é dobrada. Agora posso diminuir a largura também. Então eu posso voltar para o editor de código e usar 0.5, por exemplo, o que irá diminuir a largura da imagem para metade do original. Como este. Grande nanoescala, a altura dos elementos, podemos usar a escala y em vez de x. Então, de volta ao nosso editor de código. Vou mudar isso para y. e isso deve diminuir a altura para ter uma célula igual. E, claro, podemos aumentar a altura usando valores maiores que um. Vamos ver como isso se parece. Então, de volta ao nosso editor de código. Vou mudar este 0.5 para 1.5. E isso deve aumentar a altura. Simplesmente assim. Como translate, a função scale pode levar dois argumentos, x e y, onde o valor x define quanto a largura dos elementos aumentará ou diminuirá em relação à sua largura original. E o valor y define quanto sua altura aumentará ou diminuirá em relação à sua altura original. Então, de volta ao nosso editor de código. Eu vou aqui, remover este y e adicionar dois. Então, a largura será dobrada e outros dois. Assim, a altura será dobrada também. E a imagem deve ser duas vezes maior. Agora, quando eu passar o mouse sobre a imagem, você pode ver que ela está ficando maior e tem esse zoom agradável em efeito. Agora, se eu voltar para o nosso editor de código e remover este segundo valor e deixar apenas este primeiro valor. Isso irá dimensionar a largura e a altura juntas. Assim como se não removêssemos o segundo valor. Então, se eu fizer este ponto 2, 5, isso deve dimensionar a imagem para 25% do seu tamanho original. Então, para encerrar as coisas, escala é uma das funções que podemos usar com a propriedade transform. E nos permite alterar a largura de um elemento HTML ou sua altura ou ambos simultaneamente. Ele pode ser dimensionado x, que aumentará o elemento com se o valor for maior que um, ou diminuí-lo se o valor for menor que um. Ou pode ser dimensionado y, que aumentará a altura do elemento se for positivo, ou diminuirá se for negativo. E podemos apenas usar escala, que aceita dois valores, x e y. e vamos mudar a largura e altura do elemento ao mesmo tempo. 9. 9 - função girando em CSS: Olá a todos. Nesta aula, nós vamos aprender como girar elementos HTML em um ambiente 2D usando a função girar. Assim, a função de rotação aceita um valor, que é o ângulo ou o número de graus. Você quer girar o elemento por, seguido por DEG quatro graus. Então vamos realmente tentar girar nossa imagem. Eu vou aqui e adicionar transformar, girar, e vamos dizer 20 graus. Então o que isso vai fazer é girar a imagem 20 graus no sentido horário. Então, quando eu vou para o navegador e passar o mouse sobre a imagem, você pode ver que ela está girando no sentido horário em 20 graus. Certo, vamos voltar ao editor de código e tentar algo como 90 graus. Você pode ver que a imagem agora está girada em 90 graus. Vamos tentar 180 graus. E agora você pode ver a imagem gira 180 graus e vira verticalmente. Em seguida, vou tentar 360 graus, que fará a imagem girar círculo completo e, em seguida, retornar ao jeito que era antes. Agora, também podemos usar graus negativos para a função girar, que irá girar elementos HTML no sentido anti-horário. Então eu vou voltar para o meu editor de código e mudar isso para, digamos, menos 60 graus. E agora, quando eu pairar sobre a borda, ele girará 60 graus no sentido anti-horário. Ótima. Agora, a função girar aceita valores em outras unidades também. Por exemplo, podemos usar voltas para dizer ao elemento quão longe ele deve girar. Então, se eu for ao meu editor de código, remova isso e adicione uma vez. E agora, quando eu for para o navegador e passar o mouse sobre a imagem, ele girará uma volta completa no sentido horário, que é igual a 360 graus. E podemos até usar termos negativos para fazer o elemento girar no sentido anti-horário. Então, por exemplo, vamos usar menos 0,5 voltas. E agora a imagem está girando meia volta no sentido anti-horário. Outra unidade que podemos usar com a função de rotação é gradientes. Então, um círculo completo é 400 gradientes. Vamos experimentar esses. Vou ao editor de código e mudo para 200 gradientes. E agora, quando eu passar o mouse sobre a imagem, ela deve girar uma meia volta assim. No mundo real, a função de rotação é usada com graus a maior parte do tempo, mas eu só queria que você soubesse sobre essas outras unidades. Então é isso para a função de rotação. É muito simples. Então eu vou te ver na próxima lição. 10. 10 - função skew do CSS: Olá a todos. Nesta aula, nós vamos aprender como inclinar elementos horizontalmente ou verticalmente usando a função de inclinação. A função de inclinação é como as funções de tradução e escala, significa que temos atos de inclinação para inclinar elementos horizontalmente e inclinar por que o incliná-los verticalmente? Ou podemos usar distorção. E o primeiro valor será x, e o segundo será y. Agora, inclinação é semelhante a girar em termos de unidades, usamos graus para determinar quanto o elemento deve ser distorcido. Bom, agora vamos ver como funciona em ação. Vou aqui e adicionar Transform Skew x, digamos 30 graus. E agora, quando eu vou para o navegador e passar o mouse sobre a imagem, você pode ver que ela se inclina horizontalmente em 30 graus. E podemos mudar a direção inclinada usando valores negativos. Então vamos tentar isso. Vou voltar ao meu CSS e fazer este menos 30. E agora, quando eu passar o mouse sobre ele, ele deve ser distorcido na outra direção. Agora, vamos inclinar a imagem verticalmente usando a função yinclinação. Voltarei ao nosso editor de código e mudarei este x para y. e agora, quando eu passar o mouse sobre a imagem, você pode vê-la distorcida verticalmente. E para torná-lo inclinado verticalmente na direção oposta, podemos voltar e remover o menos para torná-lo positivo. E quando eu passar o mouse sobre ele de novo, ele vai distorcer do outro lado. Agora, como dissemos, podemos distorcer elementos HTML horizontalmente e verticalmente ao mesmo tempo usando apenas inclinação, que aceita dois valores. A primeira é para ACS e a segunda é reconectada. Então eu vou voltar para o meu editor de código e deixar isso apenas distorcido. E, em seguida, torná-lo inclinado em 20 graus horizontalmente e 40 graus verticais. E agora, quando eu passar o mouse sobre ele, você pode ver que ele está inclinado em ambas as direções. 11. 11- a origem de transformação de CSS: Olá a todos. Depois de terminar todas as funções de transformação 2D nesta lição, aprenderemos sobre uma nova propriedade chamada origem de transformação. Bem, a origem da transformação é o ponto que uma transformação toma como referência quando funciona. Em outras palavras, o ponto em torno do qual a transformação é aplicada. Então, por exemplo, aqui no meu navegador e eu tenho duas imagens, eu adicionei transformar girar em 30 graus para ambas. Então, quando eu passar o mouse sobre eles, eles devem girar no mesmo grau. Mas a diferença é que mudei a origem da segunda imagem para estar no canto superior esquerdo, mas não mudei nada para a primeira. Então ele só tem transformar girar. Agora, quando eu passar o mouse sobre a primeira imagem, você pode ver que nada estranho acontece aqui. Ele apenas gira 30 graus no sentido horário como vimos antes na lição anterior. Mas agora vou passar o mouse sobre a segunda imagem. Algo interessante está acontecendo aqui. A imagem está girando 30 graus no sentido horário, mas está girando em seu canto superior esquerdo, que é a origem da transformação, enquanto a primeira imagem está girando de seu ponto central, que nos diz que o ponto central é o valor padrão de origem de transformação. Agora, vamos falar sobre os valores que transformam a origem aceita. Ele pode aceitar palavras-chave como um valor, como superior, inferior, direita e esquerda. Então vamos tentar isso novamente para o nosso editor de código. E aqui eu tenho apenas uma imagem. Então, quando passarmos o mouse sobre essa imagem, queremos adicionar transformação e girá-la em 45 graus, por exemplo. E vamos subir aqui e adicionar o topo da origem da transformação. E agora, quando vamos para o navegador e passar o mouse sobre a imagem, você pode ver que ela está girando do centro superior da imagem agora. Ok, Next é uma demonstração para as outras palavras-chave que transformam as excepções de origem. Então vamos ver como eles funcionam. Primeiro de tudo, temos guia. Nós dissemos que ele irá girar a div em torno do centro superior do elemento. Então, exatamente aqui. Assim como. Então temos, certo. E neste caso a div girará do centro do lado direito, exatamente aqui, assim. Agora, eu quero que você pause o vídeo e adivinhe como todos os seguintes div, eles vão se mover. Então, pausar agora. Tudo bem, então no fundo é claro, vai fazer girar em torno do ponto central inferior bem aqui. Como este. Então temos à esquerda, que irá girar em torno deste ponto. Simplesmente assim. Em seguida, superior direito, que girará em torno do canto superior direito, depois inferior direito, depois inferior esquerdo e, finalmente, superior esquerdo. Agora, a origem de transformação também pode aceitar valores como porcentagens. Começamos a partir do canto superior esquerdo do elemento. Portanto, o primeiro valor percentual é porcentagem X. E quando a porcentagem X é 100%, isso significa que começamos a partir do canto superior esquerdo, em seguida, mover 100% através do elemento com para a direita, que significa que vamos acabar no canto direito do elemento. E então a porcentagem Y indica o quão longe vamos nos mover verticalmente em relação à altura do elemento. Então, se é 100% está bem, então nós nos moveríamos para baixo uma distância igual à altura do elemento. Assim, nossa origem transformada vai acabar no canto inferior direito do elemento. Agora, digamos que queremos fazer a origem de transformação do elemento no centro usando o método de porcentagem. Então o que devemos fazer é colocar x como 50% e então y como 50 por cento também. E deve ser centrado. Ok, vamos tentar este método em ação. Irei aqui e adicionarei origem de transformação, digamos 30 por cento para a direita e 80% para o fundo. E então, quando vamos para o navegador, vamos mover 30% para a direita, em seguida, 80% para o fundo. Então a origem da transformação estará em algum lugar por aqui. Outros valores que transformam a origem aceita ou pixels. Então você pode apenas dizer, eu quero que ele mova 50 pixels para a direita e, em seguida, 100 pixels para a parte inferior. E este será o nosso ponto de origem de transformação. Então vamos tentar isso. Vou até aqui e adicionar 300 pixels. Então isso é metade da largura. Em seguida, adicione 150 pixels, que é metade da altura aqui. Então agora o ponto de origem da transformação deve estar no centro. Simplesmente assim. Então é isso para esta lição, pessoal, e eu verei vocês na próxima. 12. 12- traduzir em 3D: Olá a todos. Bem-vindo a esta nova seção do curso. Nesta seção, vamos aprender como usar algumas das propriedades que falamos na seção anterior. Mas em um ambiente 3D. Agora, a principal diferença entre ambientes 2D e 3D é o eixo z. Em ambientes 2D, temos o eixo x, que é horizontal, e o eixo y, que é vertical. Mas em 3D, também temos o eixo z, que é perpendicular a ambos. Agora, a fim de criar um ambiente 3D em um plano 2D, como a tela do nosso computador, precisamos criar algo chamado perspectiva. Você pode pensar em perspectiva como a distância entre nossos olhos e a tela do computador. Acho que entenderá mais quando a virmos em ação. Mas eu quero que você se lembre que toda vez que você quiser trabalhar com um ambiente 3D, você precisa definir a perspectiva primeiro. Então vamos começar com a propriedade de tradução. Na seção anterior, aprendemos como traduzir ou mover elementos HTML horizontalmente ou verticalmente usando as funções traduzir X e traduzir Y. E agora queremos usar Traduzir Z e ver o que vai conseguir. Então aqui no meu HTML, eu tenho apenas uma imagem, e eu vou direto aqui e adicionar transformação, traduzir Z, digamos 300 pixels. Então, quando eu passar o mouse sobre a imagem, eu quero que ela mova 300 pixels na direção z. Mas dissemos que antes de usar qualquer uma das propriedades de transformação 3D, precisamos criar perspectiva. E para fazer isso, usamos uma propriedade chamada prospectiva e adicioná-lo ao contêiner dos elementos HTML que queremos que ele transforme. No nosso caso, o recipiente da imagem é o corpo. Então eu vou mirar o corpo e adicionar perspectiva. E lembre-se que dissemos que a perspectiva é a distância entre nossos olhos, os olhos do espectador e a tela do computador. Portanto, ele aceita valores em pixels. Então, digamos 100 pixels. E agora, quando eu vou para o navegador e passar o mouse sobre a imagem, você vê que algo interessante está acontecendo aqui. A imagem está ficando maior. A largura e a altura estão aumentando, assim como o que aconteceu quando usamos a propriedade Scale na seção anterior. Mas, na verdade, não é isso que está acontecendo aqui. O que realmente está acontecendo aqui é que a imagem está se movendo em nossa direção. Por isso, está a aproximar-se dos nossos olhos. E é por isso que parece maior, mas sua largura e altura não mudaram. Então agora você pode pensar no eixo z como a linha desenhada entre dois pontos. O primeiro é nossos olhos, e o segundo é a tela. Então, quando movemos o elemento ao longo do eixo z, ele se moverá ao longo desta linha e se aproximará ou se afastará de nossos olhos. Por exemplo, se eu voltar ao meu editor de código e alterar esses 300 pixels para menos 300 pixels. Agora, quando eu passar o mouse sobre a imagem, você pode ver que ela está ficando menor porque está realmente se afastando de nossos olhos. Voltarei novamente e removerei essa nota negativa. Então agora, qual é a perspectiva que adicionamos aqui mesmo no corpo? Bem, antes de falarmos sobre isso, vamos mudar para 500 pixels e ver o que conseguimos. Então, antes de recarregar meu navegador, quando eu passar o mouse sobre a imagem, você pode ver que a imagem está se aproximando de mim por 300 pixels em uma perspectiva de 1, 0, 0, 0, 0. Então, vou atualizar meu navegador para mudar para uma perspectiva de 500 pixels. E então eu vou passar o mouse sobre a imagem. E você pode ver, neste caso, a imagem está ficando muito mais próxima do que a primeira vez com essa nova perspectiva. E isso porque a nova perspectiva é menor. A distância entre nossos olhos e a imagem é de 500 pixels. Então, quando ele se move 300 pixels em nossa direção, então ele vai acabar 200 pixels longe de nossos olhos. Enquanto, quando estávamos usando uma perspectiva de cem, dez centenas de pixels, ele acabou 700 pixels de nossos olhos. Então parece menor. Vamos ver outro exemplo. Então eu vou voltar para o meu editor de código e mudar esses 300 pixels para qualquer valor maior do que a perspectiva, que é atualmente 500 pixels. Então, digamos 800 pixels. Agora, antes de passar o mouse sobre a imagem, vamos imaginar o que vai acontecer. A distância entre a imagem e nossos olhos é de 500 pixels. E queremos que a imagem mova 800 pixels em nossa direção. Então o que acontecerá é que a imagem se moverá em nossa direção até passar por nossos olhos. E não seremos capazes de vê-lo porque estará atrás de nós, ou talvez atrás de nossos olhos em nossos crânios, que soa um pouco assustador, mas não se preocupe, é seguro. Então, quando eu pairar sobre ele, você pode ver que ele desaparece além de nossos olhos. Então, para encerrar as coisas, toda vez que queremos criar um ambiente 3D, temos que adicionar perspectiva ao contêiner de elementos primeiro. E a perspectiva é a distância entre o espectador e a tela. 13. 13- gire em 3D: Olá a todos. Nesta aula, nós vamos aprender como girar elementos dentro um ambiente 3D utilizando a função Transformar Girar. Então aqui em nosso código temos nossa imagem e ela está sentada aqui em nosso navegador. E aqui em cima você pode ver que temos uma perspectiva de 500 pixels. Porque lembre-se, toda vez que queremos usar as propriedades de transformação, precisamos definir a perspectiva primeiro. Então agora vamos começar a usar a função girar. Primeiro de tudo, temos Girar X, que fará com que o elemento gire em seu eixo. Então temos girar y, o que o fará girar em seu eixo y. E finalmente, z, o que, claro, fará com que ele gire em seu eixo z. Então vamos começar com girar Z. Eu vou aqui dentro do seletor de imagem e eu vou adicionar transformar, girar Z, digamos 120 graus. E eu vou para o navegador e recarregar. Agora, antes de passar o mouse sobre a imagem, estamos girar Z vai fazer, é ele vai fazer a imagem girar em seu eixo z, que é como uma linha que passa da tela para nossos olhos. Portanto, não deve parecer diferente da função de rotação que usamos antes quando estávamos lidando com transformações 2D. Então eu vou passar o mouse sobre a imagem e você pode vê-lo gira em torno do eixo z em 120 graus. Bom. Então girar Z na verdade é semelhante a girar, o que aprendemos antes. Ótima. Em seguida, vamos falar sobre Girar ovo. Eu vou aqui e troco, rodar Z para girar x. e eu quero que ele gire em 60 graus. E o que isso fará é fazê-lo girar em seu eixo x, que é horizontal. Então vou passar o mouse sobre a imagem e você pode vê-lo gira em 3D ao longo do eixo horizontal. Então, por exemplo, se eu voltar e mudar 60 graus para 90 graus, então volte e passe o mouse sobre a imagem. Você pode ver que a imagem girará 90 graus até que ela desapareça. O que está acontecendo aqui é que a imagem gira até que só possamos ver sua borda. E como não tem espessura, desaparece. Então nós temos girar y. Então eu vou voltar e mudar, girar x, girar y, e mudar os graus de volta para 60 novamente. Então, quando eu passar o mouse sobre a imagem, você pode ver que ela gira em seu eixo y, que é vertical com o tempo. E é isso para esta lição, todos e eu nos veremos na próxima. 14. 15 - efeito de botão creative criativo: Olá a todos. Nesta aula, nós vamos aprender como criar este efeito agradável quando passarmos o mouse sobre um botão. Você pode ver que quando passamos o mouse sobre ele, o fundo amarelo está girando no canto inferior esquerdo do link até cobrir a coisa toda. Então vamos começar aqui no meu HTML, eu vou apenas ir aqui e adicionar uma tag âncora. E diga “paira-me”. Então eu vou para o meu CSS e adicionar alguns estilos. Então, primeiro de tudo, eu vou mirar o corpo e adicionar altura 100 vh. Então vou adicionar exibição, flexionar, justificar o conteúdo, centralizar, alinhar o centro de itens também. Então o que essas três linhas de código vão fazer é que eles vão apenas enviar-lhe o link horizontal e verticalmente usando Flexbox. Isso não tem nada a ver com animação CSS. E se você quiser aprender mais sobre flexbox, que é um aprendizado obrigatório para qualquer desenvolvedor web hoje em dia, eu tenho um curso sobre isso aqui na Udemy. Pode verificar se estiver interessado. Então vamos começar a estilizar nosso link. Vou mirá-lo. Em seguida, adicione decoração de texto. Nenhum. Cor. Esta bela cor preta. Família Font, Sans Serif. Tamanho da fonte 45 pixels, borda, cinco pixels, sólido e são cor preta agradável. Então vou adicionar preenchimento, 40 pixels e 80 pixels da esquerda e da direita. Então eu vou adicionar posição relativa grau. Então, agora, a fim de criar o fundo amarelo agradável, vamos precisar usar o elemento pseudo antes. E se você não sabe o que são pseudo elementos, eles apenas permitem que você insira código antes ou depois de elementos HTML. Então eu vou dizer um cólon antes. Então não adicionarei conteúdo porque não queremos adicionar texto. E depois disso, vou adicionar posição absoluta, e eu vou adicionar esquerda 0, em seguida, topo 0 também. Agora temos o nosso pseudo elemento antes e sua posição está no canto superior esquerdo do link, bem aqui, porque nós adicionamos esquerda 0 para que ele vai mover 0 distância da esquerda. Ou, em outras palavras, ele ficará à esquerda do link. E também estará no topo, como dissemos, topo para 0 também. Então agora do que antes, pseudo elemento é apenas um ponto no canto superior esquerdo do link. Quando em nosso exemplo, queremos que ele seja um fundo amarelo que ocupa toda a largura e altura do link. Então podemos fazer isso facilmente adicionando cor de fundo, nossa cor amarela, então altura 100%, e largura 100% também. Bom. Então agora você pode ver que o pseudo elemento antes está aparecendo como a cor de fundo e ocupando toda a largura e altura do link. Exatamente como queríamos. Mas há um problema com um fundo amarelo agora está escondendo o texto abaixo dele. Então agora não podemos ver as palavras pairar. Isso pode ser corrigido facilmente indo para a direita aqui e adicionando z-index minus1, para que o texto apareça novamente na frente do fundo amarelo. Ótimo. Então, agora, se dermos uma olhada em nossa demonstração, você pode ver que quando eu passar o mouse sobre ele com fundo amarelo gira no sentido horário de seu canto inferior esquerdo até que ele termine horizontalmente com uma rotação de 0 graus. E para obter esse efeito, eu vou para a direita aqui e adicionar origem de transformação inferior esquerda, como a rotação está girando neste ponto, em seguida, Transformar, Girar menos 90 graus, modo que esta será a posição inicial e o fundo amarelo. Então eu vou adicionar transição transformar 1 segundo. Agora, quando eu passar o mouse sobre o link, eu queria fazer algumas alterações no fundo amarelo. Então eu vou adicionar transformar, girar em 0 graus, ou seja, retornado à sua posição horizontal original. E agora, quando eu passar o mouse sobre o link, você pode ver o grau de rotação agora é 0. Quando eu pairo para longe, ele retorna para menos 90 graus. Então só temos uma coisa a fazer, que é esconder a parte do fundo amarelo fora do link. Isso pode ser feito facilmente, indo para o link e apenas dizendo overflow oculto. E agora temos o efeito que queríamos no nosso botão. Agora, podemos usar a mesma técnica para obter resultados diferentes, o que ficará muito bom também. Então vamos tentar alguns deles. Digamos que queremos que o fundo amarelo gire do canto inferior direito, não do canto inferior esquerdo. Isso pode ser feito alterando algumas das propriedades que adicionamos. Mas primeiro, vamos voltar ao nosso CSS e remover esta linha de código para que possamos ver a caixa amarela fora do link. fim de fazer a caixa amarela girar a partir do canto inferior direito, podemos apenas ir aqui e mudar a origem da transformação para o canto inferior direito em vez de inferior esquerdo. Então agora você pode ver o fundo amarelo gira do canto inferior direito em menos 90 graus. Mas agora vamos mudar essa rotação para 90 graus em vez de menos 90 graus. E agora o fundo amarelo gira 90 graus. Agora vamos para o nosso CSS e adicionar overflow escondido novamente. E agora, quando eu passar o mouse sobre o link, você pode ver que temos o mesmo efeito de antes, mas desta vez a rotação está centrada no canto inferior direito, não no canto inferior esquerdo. Agora, eu tenho um pequeno desafio para você. Eu quero que você tente fazer o fundo amarelo girar em torno de pontos diferentes. O primeiro é o canto superior esquerdo. O segundo é o canto superior direito. Você só precisará alterar dois valores, a origem da transformação e o ângulo de rotação. Então tente isso e me diga se você foi capaz de fazê-lo na seção de perguntas e respostas. 15. 16 - efeito de botão girado criativo: Olá a todos. Nesta lição, vamos criar este efeito de passar o mouse agradável. Então, quando eu passar o mouse sobre este link, você pode ver o plano de fundo deslizar suavemente da esquerda para a direita e a cor muda para branco. E quando eu passar o mouse para longe, o fundo desliza para a esquerda novamente. Então vamos ver como podemos fazer isso. Aqui no meu HTML, eu vou apenas adicionar uma tag âncora e apenas dizer paira-me. Então eu vou para o meu CSS e adicionar alguns estilos. Vou direcionar o link, e vou adicionar alguns estilos para torná-lo mais agradável. Então eu vou adicionar decoração de texto, nenhum. Em seguida, cor. Esta cor bonita. Família Font. Sem Serif. Tamanho da fonte 40 pixels, borda, três pixels, sólido. E a nossa cor. Em seguida, preencha 40 pixels da parte superior e inferior e 80 pixels da esquerda e da direita. Então eu vou adicionar posição, relativa e, finalmente, transição todos 1 segundo. Agora você pode ver que nosso link está parecendo muito mais agradável e podemos começar a trabalhar nesse efeito de limpeza. Então, a idéia por trás deste efeito de furto é que vamos criar um elemento antes pseudo que vai ocupar toda a largura e altura do link. Então vamos traduzi-lo fora do link. E ao passar o mouse sobre o link, removeremos a tradução para que ela retorne ao seu lugar onde possamos vê-la. E isso fará muito mais sentido quando criarmos juntos. Então eu vou direto aqui no meu CSS e adicionar dois pontos antes. E então eu vou deixar o conteúdo vazio. Em seguida, abaixo disso, vou adicionar posição absoluta, e depois esquerda 0 e top 0 também. Então precisamos fazê-lo ocupar toda a largura e altura do nosso recipiente. Então eu vou adicionar altura 100%, em seguida, largura 100%. E vou adicionar uma cor de fundo. Nossa cor, é claro. Então eu adicionarei z-index minus1, e direi por que adicionamos isso em um segundo. Ótima. Então, quando você olha para o link, você pode ver o pseudo elemento antes está ocupando toda a largura e altura do link. E o texto meio que desapareceu porque tem a mesma cor que o fundo, então não somos capazes de vê-lo. Então agora queremos criar este movimento branco a partir da esquerda que pode ser facilmente feito usando a função de tradução, que eu tenho certeza que você se lembra. Vamos mover os elementos ao redor da tela. Então eu vou aqui no elemento pseudo antes e eu vou adicionar transformar. Traduzir X menos 100%. Agora tenho certeza que você se lembra que valores negativos, elementos de filme para a esquerda e positivos movê-lo para a direita. Então agora você pode ver o pseudo elemento antes movido para a esquerda em 100% de sua largura. E você pode ver que o texto está aparecendo agora mesmo aqui. Ótima. Agora, quando pairando sobre o link, quero que duas coisas aconteçam. Eu queria antes pseudo elemento para voltar à sua posição. E quero que a cor mude para branco. Então, ao passar o mouse sobre o link, eu quero fazer algumas mudanças acontecerem com o pseudo elemento antes. E essas mudanças estão devolvendo-o à sua posição. Então eu vou adicionar transformar traduzir X 0 para que ele retorna ao seu lugar original. E eu quero que essa mudança aconteça sem problemas. Então eu vou subir aqui no pseudo elemento e adicionar transição, oh, 1 segundo. Então, agora, quando eu passar o mouse sobre o link, você pode ver o fundo está se movendo suavemente da esquerda para sua posição original. Uma coisa que falta fazer e que é esconder o fundo fora do link. E isso pode ser feito simplesmente indo para a tag âncora e adicionando overflow oculto. Então agora você pode ver que o fundo é invisível fora do link mais. E temos o efeito que queremos. Finalmente, precisamos mudar a cor do texto para branco ao passar o mouse também. Então eu vou para o meu CSS e quando passar o mouse sobre o link, eu quero que a cor mude para branco. E isso também acontecerá sem problemas porque adicionamos uma transição aqui na declaração da tag âncora. Então, agora, quando eu passar o mouse sobre ele, você pode ver que a cor do texto está mudando muito larga. Agora, quanto ao índice Z que adicionei aqui. Eu fiz isso porque quando eu criei o elemento pseudo antes e deu-lhe a largura total e altura do link. O texto estava escondido atrás dele, o que significa que cobriu o texto. Então, por exemplo, se eu for e removê-lo assim. Em seguida, passe o mouse sobre o link. Você pode ver as tags serão escondidas atrás do plano de fundo. Então nós adicionamos para fazer o texto aparecer na frente dele para que possamos vê-lo. Ótima. Então, agora que entendemos o conceito por trás deste movimento branco, podemos modificá-lo facilmente para obter resultados diferentes. Então vamos dizer que queremos que este movimento branco seja do lado direito, não do lado esquerdo. Podemos fazer isso alterando apenas uma linha de código. Então aqui no meu CSS, vou mudar o Traduzir X para o fundo para 100% em vez de menos 100%, modo que a posição inicial antes de passar o mouse sobre ele será à direita, não à esquerda. Então, quando eu passar o mouse sobre o link novamente, você pode ver que o pequeno movimento é agora do lado direito. E digamos que queremos que o furto seja de cima para baixo. Então, em vez de usar translate x, vamos usar Traduzir Y desta vez. Então eu vou mudar x para y, e nós queremos isso de cima para baixo. Então, vamos dizer menos 100% porque os valores negativos movem elementos para cima. E novamente, eu vou mudar este x aqui para y. e agora você pode ver quando eu passar o mouse sobre o link, o fundo desliza de cima para baixo. Então agora eu quero que você brinque com esses valores e crie mais efeitos. Pode sentir-se livre para compartilhar o que você inventar com outros alunos no Q e uma seção. 16. 17 - efeito de verão o botão criativo: Olá a todos. Nesta lição estaremos criando um bom efeito de pairar. Então, quando eu passar o mouse sobre o link, este pequeno efeito agradável deve acontecer. Tudo bem, então vamos começar indo aqui no meu HTML. Ao adicionar um link, basta dizer pairar sobre mim. Então eu vou para o meu CSS e adicionar alguns estilos. Vou direcionar o link e adicionar preenchimento, 40 pixels da parte superior e inferior, e 80 pixels da esquerda e da direita. Então eu vou adicionar fonte, família, Sans Serif, em seguida, decoração de texto, nenhum para se livrar do sublinhado. Em seguida, cor. O 2626 afiado. Tamanho da fonte, 45 pixels. Espaçamento entre letras. Dois pixels, borda cinco pixels, sólido. E novamente, essa cor, posição relativa e transição 1 segundo. Então é assim que o link parece agora. Certo, então precisaremos usar o pseudo elemento antes. E se você não sabe o que é isso, ele só permite que você insira código antes do seu elemento. Veremos como isso funciona em um segundo. Então eu vou dizer um cólon antes. E dentro desse conteúdo, vazio. Então eu não recebo nenhum texto dentro deste pseudo elemento. E então posição absoluta 0, esquerda, 0, largura, 100%, altura, 100%. Então deve levar toda a largura e altura de um link e, em seguida, cor de fundo, nossa transição de cor. 1 segundo. Então agora você pode ver nosso pseudo elemento aparece na parte superior do link e nós não somos capazes de ver o link mais. Ótima. Tenho certeza que você se lembra das funções girar x, girar y que aprendemos no início do curso. E que você se lembra que girar x faz o elemento girar ao longo do eixo x, enquanto girar y faz com que ele gire ao longo do eixo y. Vamos rever isso juntos. Aqui, eu tenho duas imagens e eu defini o giro x para o primeiro para 90 graus ao passar o mouse sobre ele. Então vamos ver o que vai acontecer quando eu passar o mouse sobre ele. Você pode ver que a imagem é girada 90 graus ao longo do eixo x, de modo que agora não podemos vê-lo porque a parte dela que está voltada para nós agora. Sua borda. E eu disse que o girar y para a segunda imagem para 90 graus em pairar também. Então agora, quando eu passar o mouse sobre ele, você pode ver que a imagem é girada ao longo do eixo y em 90 graus até que ela desapareceu também. Tudo bem, agora que revisamos o que girar x e girar, por que fazer? Vamos voltar ao nosso CSS. Eu vou para a direita aqui e adicionar rotação x 90 graus, nosso pseudo elemento para que ele vai girar 90 graus e vai desaparecer exatamente como no exemplo de imagem. Ótima. Então, agora o que eu quero fazer é quando eu passar o mouse sobre o link, eu quero remover a rotação do pseudo elemento antes para que ele retorna direito onde ele estava antes de desaparecer. Então eu vou direcionar o link e quando eu passar o mouse sobre ele, eu queria fazer algumas alterações para o pseudo elemento antes. Eu quero redefinir a rotação em torno do eixo x para 0 para que ele apareça novamente e nós possamos vê-lo. E porque estou usando a transição aqui em cima, essa mudança na rotação deve acontecer sem problemas. Então, agora, quando eu passar o mouse sobre o link, você pode ver que o pseudo elemento antes volta e mostra isso muito bem. Agora, precisamos mudar a cor do texto quando passarmos o mouse sobre o link para branco. Então eu vou mirar o link. E quando eu passar o mouse sobre ele, eu quero mudar a cor para branco. E se eu passar o mouse sobre o link agora, você pode ver que nada acontece. A cor do texto não está aparecendo. E isso ocorre porque o pseudo elemento está aparecendo no topo do link e o texto está deitado por baixo dele. Então o que podemos fazer é ir aqui mesmo no pseudo-elemento e adicionar índice Z menos um para que o texto apareça na frente do pseudo-elemento. Então, agora, quando eu passar o mouse sobre o link, você pode ver o texto aparece e nós temos um bom efeito pairando acontecendo. Agora, tentamos girar x. Vamos mais longe e tentar girar y, misturá-los e ver o que vai conseguir. Então eu vou copiar este pseudo elemento, colá-lo novamente, e apenas mudar antes para depois. Certo, agora temos dois pseudoelementos. Vou apenas mudar a função de rotação para y. então ele irá girar ao longo do eixo y até que não possamos vê-lo mais. E eu vou copiar este efeito pairando. Cole novamente e mude antes para depois de X para Y. modo que quando eu passar o mouse sobre ele, a rotação ao longo do eixo y retorna de volta para 0. A imagem aparece bem com o pseudo elemento antes. E agora, quando eu passar o mouse sobre ele, você pode ver o antes e depois pseudo elementos estão aparecendo juntos, dando a ele este efeito realmente agradável. E isso é exatamente o que queríamos. 17. 18 - efeito de esticamento para botão criativo: Olá a todos. Nesta lição, vamos criar este efeito agradável de pairar. Você pode ver quando eu passar o mouse sobre o link, o texto fica mais ousado e o espaçamento entre letras e a espessura da borda aumentam. Este é um efeito fácil, mas bonito. Então vamos ver como podemos fazer isso. Aqui no meu HTML, você pode ver que eu implementei uma fonte do Google Fonts chamado Roboto neste exemplo. Então eu vou aqui e adicionar uma etiqueta de âncora. E eu vou dizer “botão”. Então eu vou para o meu CSS para adicionar alguns estilos. Vou direcionar a etiqueta âncora e adicionar decoração de texto. Nenhum. Preenchimento, 40 pixels da parte superior e inferior e 80 pixels da esquerda e da direita. Então eu vou adicionar cor. Esta bela cor vermelha e borda, três pixels, sólido. E a nossa cor vermelha. Então eu vou adicionar transformação de texto. Maiúsculas, tamanho da fonte 40 pixels. E font-família. Roboto. Em seguida, o peso da fonte 300, o que o tornará um pouco mais leve. Em seguida, espaçamento entre letras menos dois pixels para que as letras fiquem mais próximas umas das outras. E, finalmente, transição ou 0,5 segundos para que a mudança ocorra sem problemas. E agora você pode ver que o link está parecendo exatamente como nossa demo. Agora precisamos criar o efeito que queremos em pairar. Então eu vou direcionar o link e ao passar o mouse, vou mudar o peso da fonte para 900, então será muito mais ousado. Em seguida, vou adicionar espaçamento de letras dez pixels para que as letras fiquem um pouco longe umas das outras. E depois copiarei a fronteira daqui de cima e colarei. E eu vou mudar isso para sete pixels em vez de três pixels. E é isso. Quando eu passar o mouse sobre o link, você pode ver que a mudança é agradável e suave, exatamente como queremos. 18. 19- efeito do botão criativo de cima para a parte inferior com texto: Olá a todos. Nesta lição, vamos criar este efeito de deslize agradável de cima para baixo. E se você notar, esse efeito é muito semelhante ao que criamos na lição anterior. A principal diferença é que aqui temos conteúdo no pseudo-elemento, que é a palavra ano. E, claro, existem algumas diferenças na aparência dos botões, mas vamos usar os mesmos arquivos do exemplo anterior e fazer algumas alterações para obter esse efeito. Então aqui está o HTML do exemplo anterior, e nós não vamos mudar nada nele em tudo. As mudanças serão em nosso CSS. Então vamos para o nosso CSS. E antes de fazer qualquer outra coisa, vamos apenas mudar como será o link. Então, a primeira coisa que vou fazer é adicionar um fundo cinza escuro agradável ao corpo. E depois disso, farei algumas alterações no link. Então vou mudar a cor para branco. As famílias de fontes, bom. O tamanho da fonte é bom. E aqui vou mudar a cor da borda para branco também. E é isso para o link em si. Agora, precisamos adicioná-lo o pseudo elemento antes. Então, neste exemplo, precisamos adicionar conteúdo aqui. Então eu vou digitar ano e eu vou adicionar cor branca. E eu também mudarei a cor de fundo para esta cor vermelha. E agora, quando eu passar o mouse sobre o link, você pode ver a palavra ano aparece atrás do texto do link. Isso acontece porque o índice z é definido como menos um aqui. Então vou remover isso. E agora, quando eu passar o mouse sobre o link, você pode ver a palavra sim, aparece na frente do botão. Ótimo, então agora precisamos centrar nossa palavra em segundo plano. Isso é muito fácil usar Flexbox. Então eu vou apenas ir aqui e adicionar display flex para que nós controlamos qualquer coisa que está neste pseudo elemento usando Flexbox. E vou adicionar o centro de itens de alinhamento para centralizar o conteúdo verticalmente e justificar-conteúdo centro, bem como centralizá-lo horizontalmente. Então agora, quando eu passar o mouse sobre o botão, você pode ver que a palavra está agora perfeitamente centrada dentro do pseudo elemento. 19. 20 - efeito de brilho criativo: Olá a todos. Nesta lição, vamos criar esse efeito ao passar o mouse sobre um botão. Então vamos ver que em nossa demonstração mais lenta para ver o que exatamente está acontecendo, vou passar o mouse sobre o link. E você pode ver que a cor de fundo está mudando para alguma cor vermelha. E há uma linha branca grossa que é inclinada em um ângulo de 45 graus e está passando através do elo. Ao mesmo tempo, a cor do plano de fundo muda. Legal, certo? Então vamos ver como podemos fazer isso. Primeiro de tudo, irei para o meu HTML e adicionarei uma tag âncora. E apenas diga pairando sobre mim. Então eu vou para o meu CSS para adicionar alguns estilos. Vou adicionar um fundo cinza escuro ao corpo. Então, abaixo disso, direcionarei a tag âncora e adicionarei decoração de texto. Nenhum. Em seguida, cor, branco. Família Font. Sem Serif. Tamanho da fonte 40 pixels. Borda, três pixels. Branco sólido. Acolchoamento. 40 pixels da parte superior e inferior, e 80 pixels da esquerda e da direita. Em seguida, vou adicionar transição 0, 0, 3 segundos posição relativa. E, em seguida, vamos fazer a cor de fundo mudar para vermelho ao passar o mouse sobre o link. Então eu vou aqui e digo “A” e “pairando”. Vou mudar a cor de fundo para a nossa cor vermelha. E agora, quando eu passar o mouse sobre o link, você pode ver que a cor de fundo muda para leitura. Bom. Agora queremos criar uma linha branca grossa que cruza o link. E vamos usar o pseudo elemento antes para isso. Então eu vou para o meu CSS e dizer dois pontos antes. E eu vou deixar o conteúdo vazio. Então eu vou fazer a cor de fundo branca. Então eu vou dizer top 0, esquerda 0 também. Em seguida, largura 100% e altura 50 pixels, em seguida, posição absoluta. E então, quando olhamos para ele, você pode ver que ele tem um fundo branco ocupando toda a largura do link e tendo um máximo de 50 pixels. Agora, queremos movê-lo para a esquerda fora do link para que quando eu passar o mouse sobre ele, ele se mova da esquerda para a direita. Então eu vou aqui e adicionar transformação, traduzir X menos 100%. E agora você pode ver que ele está traduzido fora do link à esquerda por uma distância igual a 100% de sua largura. Em seguida, eu quero girá-lo em 45 graus porque ele é girado e eu demo. Então eu vou para a direita aqui e adicionar outra função de transformação que é girar 45 graus. E agora você pode ver que está girado. Bom. Agora queremos que ele se mova para a direita todo o caminho através do link quando passarmos o mouse sobre ele. E isso pode ser feito, sem problema. Então eu vou para o meu CSS e nós estamos pairando sobre o link. Eu quero fazer algumas mudanças aconteceram com o pseudo elemento antes. Vou adicionar transformar traduzir X 100% para que ele se move para a direita em 100% de sua largura. Em seguida, gire 45 graus. Assim, ele permanecerá girado durante o movimento. E agora, quando eu passar o mouse sobre o link, você pode ver o pseudo elemento antes está se movendo da esquerda para a direita passando pelo link. Mas ainda temos um pequeno problema. E isso é livrar-se do pseudo elemento fora do link. Podemos corrigir que nenhum problema, indo para o seletor de tags âncora e adicionando overflow oculto para que qualquer coisa fora dele será escondido. E agora, quando eu passar o mouse sobre o link, você pode ver que estamos recebendo o efeito exato que queremos. 20. 22- de duas camadas de troca: Olá a todos. Nesta lição, vamos criar este bom efeito de pairar. Nós estaremos usando tanto o antes e o depois pseudo elementos neste exemplo. Então vamos ver como podemos fazer isso. Bem, em primeiro lugar, vou começar aqui no HTML, e vou adicionar uma tag âncora. E apenas diga “paira-me”. Então precisamos ir para o nosso CSS e adicionar alguns estilos. Então eu vou mirar a etiqueta âncora. Então vou adicionar texto, decoração. Nenhum. Cor de fundo. Esta cor cinza escuro agradável. Font-família. São Serif. Tamanho da fonte 40 pixels, borda. Para pixels, cor sólida e cinza escuro. Em seguida, adicionarei preenchimento, 40 pixels de cima e de baixo e 80 pixels da esquerda e da direita. E, finalmente, vou adicionar posição relativa. Bom. Agora vamos começar a trabalhar nos pseudo elementos antes e depois. Vou criar os pseudo elementos antes para o nosso link. E eu vou dizer conteúdo. Em seguida, as palavras pairam-me, em seguida, posição absoluta, superior, 0 , esquerda, 0, altura, 100% , largura, 100% também. Em seguida, cor de fundo. Esta bela cor amarela. Em seguida, colorir nossa cor cinza escuro. E agora precisamos centralizar o conteúdo dentro dele. E vamos fazer isso usando Flexbox. Então eu vou adicionar display flex, em seguida, justificar o centro de conteúdo, a fim de centrá-lo horizontalmente. Em seguida, alinhe os itens no centro, bem como, a fim de ascender ao conteúdo verticalmente. E, finalmente, vou adicionar transição ou 0,5 segundos cinza. Então agora temos o pseudo elemento antes com este fundo amarelo definido em cima do nosso link. Agora vamos trabalhar no pseudo elemento após. Vou copiar tudo isso. Cole de novo. E eu vou mudar antes para depois. E agora o depois 0 elemento está sentado em cima do antes. Está bem? Eu vou apenas ir aqui no depois pseudo elemento e eu vou adicionar transformar traduzir. E eu quero traduzi-lo por menos 100% horizontalmente. Então ele vai se mover para a esquerda. E eu vou traduzi-lo em 100% verticalmente. Então, ele se moverá para o fundo. Então agora ele deve mover 100% de sua largura para a esquerda e 100% de sua altura para o fundo. Assim como vemos aqui. Grelha. Agora temos os pseudo elementos antes sentados em cima do link. E o pseudo elemento depois está em sua nova posição. Vamos continuar pairando. Eu quero antes de um pseudo elemento para mover para o canto superior direito fora do link. E eu quero que o pseudo elemento depois tome seu lugar. Isso é fácil de fazer. Então eu vou para aqui. E quando eu passar o mouse sobre o link, eu quero fazer algumas mudanças acontecerem com o pseudo elemento antes. Vou adicionar transformar traduzir. Eu queria me mudar para a direita. Então vou adicionar 100% de sua largura à direita. E eu quero que ele vá para o topo. Então, vou adicionar menos 100% de sua altura para o topo. E assim, quando eu passar o mouse sobre o link, você pode ver o pseudo elemento antes se move para esta nova posição. Agora, queremos fazer o pseudo elemento depois tomar o seu lugar. Isso será muito fácil de fazer. Vou copiar isso e mudar antes para depois. Então eu vou fazer tanto o Traduzir X e o traduzir y 0 para que ele retorne à sua posição original. E agora quando eu passar o mouse sobre o link, você pode ver o pseudo elemento antes deixa seu lugar para o depois pseudo elemento. Agora, se você notar, você pode ver que ainda temos a cor azul do link atrás do pseudo elemento antes. E aparece quando pairamos. Para que possamos nos livrar disso. Não há problema, apenas voltando para os links, a palestra e adicionando cor transparente para que ele desapareça. E adicionarei overflow oculto para que os elementos não apareçam fora do link. E agora, quando passamos o mouse sobre o link, você pode ver que tudo parece exatamente como esperávamos. 21. 21 - efeito de esde texto criativo: Olá a todos. Bem-vindo a esta lição do curso. Nesta lição, vamos criar este efeito agradável de pairar e vamos usar o pseudo elemento antes para criá-lo. Então vamos ver como podemos fazer isso. Vou começar aqui no meu HTML adicionando um link. E eu vou dizer “paira-me”. Então eu vou para o meu CSS para adicionar alguns estilos. Vou mirar no link. Então vou adicionar texto, decoração. Nenhum. Cor. Esta cor cinza escuro agradável. Família Font. Sem serif. Tamanho da fonte 40 pixels, borda, três pixels, sólido. E nossa cor cinza escuro. Em seguida, adicionarei preenchimento, 40 pixels de cima e de baixo, e 80 pixels da esquerda e da direita. Então vou adicionar transição ou 0,5 segundos. E finalmente, posição relativa. E agora nosso link está parecendo muito melhor. Bom. Agora vamos usar o pseudo elemento antes para criar o nosso efeito. Então eu vou aqui e adicionar um cólon antes. E eu vou adicionar conteúdo. Pire em mim. Em seguida, posição absoluta, superior, 0, esquerda 0, depois altura, 100%, largura, 100% também. Portanto, ele ocupa toda a largura e altura do link. Então vou adicionar cor de fundo, nossa cor cinza escuro. E finalmente, cor branca. E agora você pode ver o pseudo elemento antes é definido em cima do link com sua cor de fundo cinza escuro. Então agora queremos centralizar o conteúdo dentro do pseudo elemento antes, e vamos usar flexbox para fazer isso. Então eu vou aqui e adicionar exibição. Flex e, em seguida, justifique o conteúdo e alinhe o centro de itens também. Ótimo, então a seguir faremos um trabalho no nosso afeto. A idéia por trás disso é que vamos fazer esta escala de fundo cinza escuro até cerca de cinco vezes o seu tamanho original. Então, será muito grande. E faremos sua opacidade 0 para que seja transparente. E quando passarmos o mouse sobre o link, faremos com que ele redimensione para um novamente, e a opacidade mudará para 1, assim será visível. Vamos fazer isso. Eu vou aqui dentro do pseudo elemento antes, e eu vou adicionar escala de transformação cinco vezes. E você pode ver que ele é dimensionado para cinco vezes o seu tamanho e é enorme. Agora, eu quero que ele fique escondido fora do link. Então eu vou entrar aqui dentro do seletor de links. E eu adicionarei transbordamento escondido. E agora você pode ver as partes do pseudo elemento antes fora do link ou oculto. Incrível, vamos continuar. Agora. Precisamos torná-los antes do pseudo-elemento transparente. Então eu vou aqui e adicionar opacidade 0. E agora você pode ver que está escondido. Então eu vou adicionar transição, todos os zeros, cinco segundos. Agora estou pairando. Queremos tornar a escala do pseudo-elemento uma vez mais. E também queremos torná-lo visível, tornando-me opacidade um. Então vamos fazer isso. Vou adicionar um cólon, pairar, cólon antes. E dentro dela, vou adicionar transformação, escala um, depois opacidade um. E agora, quando eu passar o mouse sobre o link, você pode ver o pseudo elemento antes aparece e escala até seu tamanho original, dando-nos o efeito que queríamos. 22. 22 - efeito de troca circular criativo: Olá a todos. Bem-vindo a esta nova lição no curso. Nesta lição, vamos criar este ótimo efeito de focalização do botão. Então você pode ver quando eu passar o mouse sobre o botão, um fundo vermelho preenche o botão de cima para baixo. Então vamos descobrir como podemos fazer isso. Primeiro, vou classificar aqui no meu HTML e adicionar um botão e dar-lhe uma classe de btn. E eu vou apenas dizer botão. Então eu vou para o meu CSS para adicionar alguns estilos a este botão. Vou começar por segmentar o botão usando a classe que adicionamos. E continuarei adicionando uma borda, dois pixels, sólida. E agora vamos usar a cor de tomate. Em seguida, removerei o plano de fundo adicionando fundo. Nenhum. Então vamos adicionar cor. Tomate novamente para o texto. Em seguida, preencha 20 pixels da parte superior e inferior e 40 pixels da esquerda e da direita. Então precisamos aumentar um pouco o tamanho da fonte. Então vou adicionar o tamanho da fonte 25 pixels. Em seguida, o texto transforma o ponteiro do cursor em maiúsculas para que o cursor converta em uma mão passasse o mouse sobre o botão. Em seguida, transição ou 0,5 segundos, porque vamos mudar a cor do texto quando passarmos o mouse sobre o botão. E precisamos que isso aconteça sem problemas. Agora, certo? Agora temos nosso botão sentado aqui e já parece incrível. Então vamos trabalhar no efeito pairando. Vamos usar o elemento pseudo antes para criar o fundo vermelho. Então eu vou aqui e eu vou dizer BTN cólon antes. Em seguida, dentro dele, eu vou adicionar conteúdo vazio porque nós não queremos nenhum texto ou qualquer coisa assim. Em seguida, posição absoluta, superior, 0, esquerda, 0, largura, 100%, altura, 100%. E vamos adicionar fundo, tomate. Tudo bem, então aqui você pode ver que o fundo vermelho está sentado em cima do botão, ocupando toda a largura e altura do botão. E está escondendo o texto abaixo dele. Então vamos corrigir isso indo bem aqui dentro do fundo vermelho e adicionando índice Z menos um. Agora o botão está sentado em cima do fundo vermelho, mas não podemos vê-lo agora porque ele tem a mesma cor que o fundo. Então, se subirmos aqui dentro do seletor de botões e mudarmos a cor para branco, por exemplo. Você pode ver o texto agora aparece. Tudo bem, vamos voltar para tomate de novo. Agora, vamos continuar trabalhando no fundo vermelho. Se formos à nossa demo e dermos uma olhada rápida, você pode ver que estou pairando. O fundo vermelho obtém um raio de borda dos cantos inferior esquerdo e inferior direito. Então vamos voltar e adicionar isso ao nosso botão. Eu vou aqui dentro do pseudo elemento antes. E adicionarei o raio da borda 0, 050% e 50 por cento. Então 0 dos cantos superior esquerdo e superior direito, porque não queremos curvas nelas. E 50% da parte inferior esquerda e inferior direita. E aqui você pode ver que o fundo vermelho agora tem essas curvas na parte inferior. Legal. Agora vamos trabalhar no efeito pairando. O que vamos fazer é definir a altura do fundo vermelho para 0. Em seguida, ao passar o mouse sobre o botão, faremos sua altura aumentar para que ele preencha e cubra o botão. Então vamos cuidar disso. Eu vou aqui dentro do fundo vermelho, e eu vou fazer a altura 0% em vez de 100%. Então agora você pode ver que o fundo vermelho não é mais visível. Então vamos aqui e dizer BTN sobre o cólon hover antes. E faremos a altura 100% novamente. Então, a fim de fazer essa mudança de altura acontecer sem problemas, eu vou subir aqui e adicionar transição 0, 0, 0,5 segundos. Bom. Então agora, quando eu passar o mouse sobre o botão, você pode ver a altura do fundo vermelho torna-se 100% novamente. Mas é claro, por causa do raio de fronteira que adicionamos a ele, não está cobrindo o botão inteiro. Então precisamos aumentar sua altura e torná-lo mais de 100% em pairar. Então vamos aqui e mudar isso 100% para, digamos 190%. E agora, quando eu passar o mouse sobre o botão, você pode ver que o fundo vermelho cobre o botão. Mas como sua altura é agora 100% do site de botões, ele está transbordando. Podemos cuidar disso. Não há problema ao entrar aqui dentro do seletor de botões e adicionar overflow oculto para evitar qualquer transbordamento do botão. Impressionante, Agora está olhando exatamente do jeito que queremos. Mas ainda temos uma coisa, que é fazer a cor do texto mudar para branco ao passar o mouse sobre o botão. Então eu vou aqui e adicionar btn. E em pairar. Vou adicionar cor, branco. Excelente. Agora você pode ver que temos o mesmo efeito que queremos, e parece ótimo. Agora que aprendemos o conceito ou a idéia por trás de tudo isso, podemos manipular esse efeito e fazê-lo acontecer de uma direção diferente, de baixo para cima, por exemplo. Então, tudo o que vamos precisar fazer é mudar a guia aqui para baixo para que ele vai crescer para cima ou preencher a partir do mapa inferior para guia. E neste caso, também precisaremos mudar o raio da borda e colocar as curvas na taxa superior e nos cantos superiores esquerdos. Então vamos dizer 50 por cento e 50 por cento aqui em vez de 00. E isso é tudo o que precisamos fazer. Agora, o efeito acontece de cima para baixo. Simplesmente assim. 23. 23- efeito de tornos: Olá a todos. Nesta lição, vamos criar este efeito de botão sobre o mouse. Então, quando eu passar o mouse sobre o botão, você pode ver que temos este efeito em que primeiro um fundo verde cobre o botão e, em seguida, um vermelho cobre todos eles. Então vamos descobrir isso e fazer isso. Vou começar aqui no meu HTML, adicionando uma tag âncora e apenas dizer botão. Então eu vou para o meu CSS para adicionar alguns estilos. Vou mirar no link. Adicione preenchimento, 20 pixels da parte superior e inferior e 40 pixels da esquerda e da direita. Então vou adicionar decoração de texto. Nenhum. Transformação de texto. Maiúsculas, cor de fundo, uma cor amarela e, em seguida, cor branca. E queremos que o tamanho da fonte seja um pouco maior. Então eu vou adicionar o tamanho da fonte 20 pixels. Também queremos espaçamento entre as letras. Então eu vou adicionar espaçamento de letras para pixels. E finalmente, posição relativa. Agora o nosso botão está muito melhor. Em seguida, queremos criar o fundo verde que cobre o botão quando passamos o mouse sobre ele. Então eu vou aqui e criar um pseudo elemento antes para a nossa tag âncora. E dentro dele, vou adicionar Conteúdo. Botão, posição, absoluto, topo, 0, esquerda 0. E porque ele tem a mesma largura e altura que o botão, vamos adicionar largura 100% e altura 100%. Em seguida, vamos adicionar cor de fundo. Esta cor verde. Lá vamos nós. O fundo verde está agora sentado bem acima do nosso botão. Em seguida, precisamos centralizar este texto horizontal e verticalmente dentro do botão. E vamos fazer isso usando Flexbox. Então eu vou aqui e adicionar exibição. Flexível. Em seguida, justifique o centro de conteúdo para centrá-lo horizontalmente. E alinhe itens no centro, bem como para centralizá-lo verticalmente. Tudo bem, a fim de fazer o efeito que queremos, vamos usar a função girar, que nos permitirá girar o fundo verde em seu eixo x. Então vamos rever o que a função girar x pode fazer por nós. Irei aqui e adicionarei Transformar. Gire X 60 graus. Assim, você pode ver que o fundo verde agora é girado ao longo de seu eixo horizontal em 60 graus. E está fazendo isso a partir de seu ponto central. Porque lembre-se, a origem da transformação é central por padrão, significa que qualquer ação de transformação que você fará no elemento tomará o ponto central como referência. Mas nesta situação, queremos mudar isso. Queremos que o fundo verde gire em seu ponto central superior. Então eu vou até aqui e adicionar transformar origem top. E agora você pode ver que ele está tomando o ponto central superior como uma referência ao girar. Bom. Agora que revisamos como a função girar x funciona, eu girarei o fundo verde em 270 graus, não 60 graus. Então eu vou mudar este 60 para 270. Agora você pode ver que ele não está mais visível já que ele foi girado e fica atrás do botão. Agora estou pairando sobre o link. Vou fazer com que o Girar seja reiniciado para 0 novamente para que ele cubra o botão. Então eu vou aqui mesmo. E ao passar o mouse sobre a tag âncora, vou fazer algumas mudanças acontecerem com o pseudo elemento antes. Vou adicionar Transformar, Girar X 0. Então queremos que isso aconteça sem problemas. Então eu vou subir aqui e adicionar transição, todos os 0,5 segundos. E agora, quando eu passar o mouse sobre o botão, você pode ver o fundo verde gira e cobre o botão da maneira que queremos. Legal. Agora, depois de criar o fundo verde, queríamos, é hora de criar o vermelho. Isto vai ser muito fácil. Nós apenas copiamos todo o pseudo elemento antes. Cole de novo. E vamos apenas mudar a cor de fundo para vermelho. E queremos que ele gire depois do verde. Então, vamos adicionar atraso de transição 0,25 segundos. Então eu vou descer aqui. E eu vou copiar isso e mudar antes para depois. Assim, quando passarmos o mouse sobre o botão, o fundo vermelho aparecerá também. Então, agora, quando eu passar o mouse sobre o botão, você pode ver o fundo verde aparece. E depois disso, o vermelho faz dois, dando-nos o efeito que queremos. E podemos facilmente mudar esse efeito se quisermos. Então, por exemplo, digamos que eu queira que o fundo vermelho gire em seu ponto central inferior, não no topo. O que podemos fazer é simplesmente ir e mudar a origem da transformação aqui no fundo vermelho para baixo em vez de tabulação. E como você pode ver, isso faz com que ele gire em sua borda inferior, dando-nos um efeito diferente. 24. 25 - camiões criativos trocando da esquerda para a direita: Olá a todos. Bem-vindo a esta nova lição no curso onde vamos criar este bom efeito pairando sobre este botão. Então, se olharmos de perto o fundo que desaparece para o ranking aqui, você pode ver quatro coisas estão acontecendo ao mesmo tempo, ele se move para a direita enquanto gira em seu eixo y, sua opacidade está diminuindo e seu tamanho está ficando menor tudo ao mesmo tempo. Enquanto isso, o fundo que entra tem um efeito inverso. A opacidade aumenta em. Ele também fica maior, girando para a direita para tomar o primeiro lugar de fundos. Bem, isso pode parecer confuso, mas prometo que vai achar fácil assim que começarmos a criá-lo. Então, vamos realmente fazer isso. Eu vou direto aqui no meu HTML e eu vou adicionar uma tag âncora e apenas dizer botão. Então eu vou para o meu CSS para estilizar isso. Vou mirar no link. Em seguida, adicionarei preenchimento, 20 pixels de cima e de baixo, e 40 pixels da esquerda e da direita. Então eu vou adicionar transformação de texto. maiúsculas. Decoração de texto. Nenhum. Espaçamento entre letras. Para pixels. Cor. Esta cor amarela. Fronteira. Três pixels, sólido. E a nossa cor amarela. O tamanho da fonte, 30 pixels. E finalmente, posição. -Relativo. Bom. Agora você pode ver que temos nosso botão e está parecendo muito bom. Em seguida, precisamos criar o fundo que desaparece à direita e aquele que toma seu lugar. Vamos começar com o único vantagens e vamos criá-lo usando o pseudo elemento antes. Então eu vou aqui e dizer um cólon antes. E dentro dele, Vou adicionar o botão Conteúdo porque queríamos ter o botão palavra, em seguida, posição absoluta, topo 0, esquerda 0. E porque leva a mesma largura e altura que o botão original, vou adicionar largura 100% e altura 100%. Em seguida, adicionarei uma cor de fundo. Esta cor cinza escuro, em seguida, colorir nossa cor amarela. Incrível. Agora você pode ver que temos o fundo cinza escuro e está definido em cima do botão ocupando toda a largura e altura. Mas você pode ver que o botão de palavra não está centralizado horizontal e verticalmente. Então vamos cuidar disso. Vamos centralizá-lo usando Flexbox. Então eu vou para a direita aqui e adicionar display flex, em seguida, justificar o centro de conteúdo para centrá-lo horizontalmente. E alinhar itens no centro, bem como para centrá-lo verticalmente, é claro. Tudo bem, lá vamos nós. Em seguida, precisamos trabalhar no efeito de pairar. Se você se lembrar, esse plano de fundo deve se mover para a direita, girar em torno do eixo y, ficar menor e ser transparente tudo ao mesmo tempo. Então vamos fazer isso. Eu vou aqui mesmo e vou dizer um salto do cólon. Eu quero fazer algumas mudanças aconteceram com o pseudo elemento antes. Vou adicionar esquerda 100%. E, a fim de fazer essa mudança na posição acontecer sem problemas, eu vou subir aqui dentro do pseudo elemento antes e eu vou adicionar transição, todos os 0.5 segundos. Então, agora, quando passamos o mouse sobre o botão, o fundo cinza escuro deve se mover para a direita, assim. E, a fim de torná-lo menor e girar em seu eixo y, eu vou aqui e adicionar escala de transformação 0 para torná-lo menor até que ele desapareça. E gire y 360 graus para fazê-lo girar em seu eixo y. Então agora, quando eu vou para o navegador e passar o mouse sobre o botão, você pode vê-lo gira em desaparece enquanto se move para a direita, dando-nos este efeito agradável. E para que sua opacidade diminua, bem, podemos ir aqui e adicionar opacidade 0. E lá vamos nós. Aqui está o efeito exato que queremos no primeiro plano de fundo. Em seguida, trabalharemos no segundo plano que vem da esquerda para a direita. Vamos usar o elemento pseudo após neste caso. Então eu vou copiar tudo isso, colá-lo, e mudar antes para depois. Então precisamos que sua posição original fique à esquerda. Então vamos mudar para a esquerda, aqui para menos 100%. Agora você pode ver que ele fica no lado esquerdo do nosso botão. Então queremos torná-lo invisível e vamos torná-lo de modo que quando passarmos sobre ele, ele será visível e movido para a direita e girar. Então, basicamente, vamos reverter o que fizemos no primeiro. Então, a fim de fazer isso, eu vou direto aqui e adicionar transformação, escala 0 e girar y 0 graus também. Nós também adicionaremos opacidade 0. E agora, passando o mouse sobre o link, vamos adicionar algumas alterações para o pseudo elemento após. Vamos adicionar esquerda 0 para posicioná-lo em cima do nosso link. E vamos adicionar transformação, escala um e girar. Por quê? 360 graus para torná-lo maior e girar ao mesmo tempo. Nós também vamos adicionar opacidade um para fazê-lo aparecer e ter este agradável desvanecimento em vigor. Então agora vamos passar o mouse sobre o botão e você pode ver o primeiro plano se move para a direita e o segundo toma seu lugar. Mas queremos tornar o texto invisível. Não queremos que o botão de palavra apareça no botão em si. Então eu vou voltar para o seletor de link e eu vou mudar a cor para transparente em vez desta cor. E agora você pode ver que a cor é invisível mais. E temos o efeito exato que queremos. 25. 26 - três círculos criativos para o botão de fundo: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta lição, vamos criar este belo efeito de pairar o botão. Então você pode ver quando eu passar o mouse sobre o link, três círculos vêm para encobrir o link. Em seguida, um fundo aparece por trás deles e cobre todo o link, completando todo o efeito. Então vamos ver como podemos fazer isso. Vou começar aqui no meu HTML adicionando um link. E dentro dela, vou adicionar uma extensão e deixá-la vazia. Vamos ver por que precisamos deste líder da banda na lição. Então eu vou dizer, paira-me. Agora mesmo. Vou para o meu CSS. Vou direcionar o link e adicionar largura 220 pixels, altura 80 pixels. Ok, agora vou adicionar cor. Esta cor amarela. Cor de fundo, transparente, já que não queremos nenhuma cor de fundo. Tamanho da fonte, 26 pixels, decoração de texto. Nenhum para remover os sublinhados. Transformação de texto. Maiúsculas para fazer todas as letras maiúsculas. Em seguida, para centralizar o texto horizontal e verticalmente, vamos adicionar text-align, center e altura da linha. 80 pixels. Legal. Agora, finalmente, vou adicionar transição. Todos os cinco segundos. E posição. -Relativo. Incrível. Agora vamos trabalhar na criação dos círculos que vêm da esquerda e da direita. Quando passarmos o mouse sobre o link, vamos usar o antes e depois pseudo elementos para torná-los. Então eu vou aqui e vou dizer um cólon antes, depois vírgula e um cólon depois. E dentro disso, vou adicionar conteúdo. Cordas vazias. Posição, absoluta. Top, 50 por cento. Largura, 20 pixels, altura, 20 pixels também. Cor de fundo, nossa cor amarela. E, a fim de torná-los círculos, vou adicionar raio de fronteira, 50 por cento. Certo, agora você pode ver que temos os dois círculos. O da esquerda é o pseudo elemento antes e o da direita é o elemento após pseudo. E porque dissemos que eles são propriedade de topo para 50%, sua borda superior fica a 50% do topo do link. Mas queremos que o ponto central deles esteja a 50% do topo do link, não das bordas superiores. Então o que podemos fazer é traduzi-los em direção ao topo pela metade de sua altura. Isso os mudará um pouco para o topo e os sinterará corretamente. Então eu vou voltar para o meu CSS e dentro do antes e depois pseudo elementos, eu vou adicionar transformar, traduzir Y. a fim de movê-los para o topo, eu vou adicionar menos 50 por cento. E finalmente, vou adicionar uma transição, todos os 0,3 segundos. Então agora você pode ver os círculos antes e depois estão perfeitamente centrados verticalmente dentro do link. Mas você também pode ver que eles estão olhando tão bom que antes pseudo elemento está cobrindo a letra H eo elemento depois está quase tocando a letra E. E isso é porque especificar qualquer posição horizontal para eles. Então eles estão apenas sentados antes e depois do texto do link. Então, vamos definir uma posição horizontal para eles. Vou mirar o pseudo elemento anterior sozinho. E eu vou adicionar esquerda 0. Isso posicionará no, no lado esquerdo do link em si, não no texto dentro do link. Assim. Então eu vou segmentar a tarde e adicionar escrever 0 também. E isso posicionará o círculo após à direita do comprimento desta vez. Tudo bem, agora, se você se lembra, quando pairamos sobre o link, havia três círculos, não tão ruim. Na verdade, existem quatro, mas dois deles sentam-se um em cima do outro e aparecem como um círculo. Vamos ver como fazer isso. fim de fazer os outros dois círculos, vamos usar a propriedade sombra caixa, que nos permite adicionar uma sombra para elementos HTML. Então vamos ver como podemos criar círculos idênticos aos que já temos usando a propriedade box shadow. Primeiro, vou começar com o pseudo elemento antes. Eu vou aqui e adicionar caixa-sombra. E a caixa de sombra aceita quatro valores. O primeiro valor é a distância horizontal entre o elemento e a sombra que estamos adicionando. Então, se adicionarmos 10 pixels, a sombra será de 10 pixels do elemento à direita. Eu quero que a sombra seja de 100 pixels do pseudo elemento antes para a esquerda. Então vou adicionar menos 100 pixels a seguir, o segundo valor da propriedade box-shadow é a distância vertical entre o elemento e a sombra. E queremos que o elemento e a sombra estejam no mesmo plano. Então vamos definir a distância vertical para 0. O terceiro valor da propriedade box shadow é o quão desfocada será a sombra. Mas não queremos que o nosso fique embaçado. Queremos que ele seja tão nítido quanto o pseudo elemento antes, então vamos defini-lo como 0 também. E, finalmente, o último valor da propriedade box-shadow é a cor da sombra. Vamos pô-lo verde por enquanto. Então, agora, quando eu ir e recarregar a página, você pode ver um novo círculo verde apareceu à esquerda do pseudo elemento antes. E a distância horizontal entre eles é de 100 pixels, enquanto a distância vertical é 0. Então eles sentam-se nivelados uns com os outros. E você pode ver que é nítido porque nós definimos o valor de desfoque para ele como 0. Tudo bem, eu vou fazer o mesmo para o pseudo elemento depois, mas desta vez eu vou fazer a sombra sentar à direita. Então vou copiar esta caixa. Propriedade Shadow. Cole dentro do pseudo elemento após e cadeia menos 1 100 pixels a 100 pixels. Então será à direita, não à esquerda. E também mudarei a cor para azul. Legal. Agora temos quatro círculos. Os dois à esquerda estão lá antes do pseudo elemento e sua sombra, enquanto os dois à direita são o depois pseudo elemento e sua sombra. Agora, vamos trabalhar no efeito de pairar. Vou aqui dizer um cólon, pairar o cólon antes. Vou adicionar esquerda 50%. Então isso fará com que o pseudo elemento antes movido para a direita em 50% da largura do comprimento e sua sombra, é claro, mover-se com ele. Então agora se eu passar o mouse sobre o link, você pode ver o pseudo elemento antes se move junto com sua sombra. Mas ao passar o mouse, não queremos que essa sombra mantenha a mesma distância de 100 pixels do lado esquerdo. Queremos que ele se mova para o lado direito por, digamos 30 pixels. Podemos lidar com isso muito facilmente indo para a direita aqui e adicionando sombra de caixa, 30 pixels em vez de menos 100, depois 0, 0, 0 e verde. Então agora, quando eu passar o mouse sobre o link, você pode ver a sombra verde agora se move para a direita dos pseudo elementos antes circulam em 30 pixels. Tudo bem, vamos fazer o mesmo para o pseudo elemento depois. Vou copiar todo este bloco de código, colá-lo e mudar antes para depois. Então vou mudar da esquerda para a direita. Assim, ele se moverá para a esquerda em 50% das larguras do link junto com sua sombra azul. Mas então queremos que a sombra se mova para os elementos do lado esquerdo por 30 pixels. Então vamos mudar 30 pixels aqui para menos 30 pixels, e finalmente, verde para azul. E agora, quando eu passar o mouse sobre o link, você pode ver que o círculo seguinte está se movendo para a esquerda e sua sombra azul está se movendo bem até atingir um ponto à esquerda do elemento em 30 pixels. Incrível. Quase temos o efeito que você quer. Mas sobrou uma coisa. Queremos que os pseudo elementos antes e depois acabem na mesma posição para que eles sejam exibidos um em cima do outro e apareçam como um círculo, deixando-nos com apenas três círculos. Você vê quando eu disse esquerda para 50 por cento aqui, isso significa que o pseudo elemento antes vai se mover até sua borda esquerda é exatamente em 50 por cento. Mas não queremos isso. Queremos que ele esteja centrado exatamente nos 50% das larguras de link. Então o que podemos fazer é traduzi-lo de volta para a esquerda por metade de sua largura. Então eu vou para a direita aqui e adicionar transformação, traduzir x menos 50%. E porque definimos traduzir y acima aqui, para menos 50% é bom, precisamos dizer ao navegador que queremos que ele fique menos 50%. Então eu vou descer novamente e adicionar Traduzir Y menos 50% Então eu vou fazer o mesmo para o depois pseudo elemento. Vou deslocá-lo de volta para a direita por metade de sua largura para que ele fique na mesma posição que a anterior. Então eu vou adicionar transformar traduzir X 50 por cento, que irá mudá-lo para a direita em 50% de sua largura e traduzir y menos 50%. Então, agora, quando eu passar o mouse sobre o link, você pode ver o antes e depois pseudo elementos estão agora sentados um em cima do outro e se tornaram um círculo. Agora, vamos mudar a cor dos círculos de sombra para amarelo também. Tudo bem, agora vamos trabalhar no fundo amarelo. Vou usar o espaço que adicionamos dentro do nosso link para criá-lo. Então eu vou mirar a extensão na posição absoluta, superior , 0, esquerda, 0, largura, 100%, altura, 100% também. E cor de fundo. A nossa cor amarela. E raio da borda, oito pixels. Então agora você pode ver o fundo amarelo fica em cima do link e está cobrindo. Então vamos continuar. Voltarei aqui e adicionarei transformação, escala 0, transição 0.3 segundos. Então eu vou descer aqui. E ao passar o mouse sobre o link, farei algumas mudanças acontecerem no span. Vou adicionar uma escala de transformação para que ela fique maior novamente. E, em seguida, atraso de transição 0,4 segundos. Então vai esperar até que os círculos entrem. Então agora, quando eu passar o mouse sobre o link, você pode ver que o fundo amarelo fica maior depois que os círculos terminaram de se mover. Agora, vamos mudar a cor do link ao passar o mouse. Vou voltar aqui e dizer um sobre pairar. E eu vou adicionar cor. Esta cor cinza escuro e atraso de transição, 0,4 segundos também. Então agora você pode ver quando eu passar o mouse, nada acontece porque o fundo amarelo está cobrindo o texto. Então o que podemos fazer é subir aqui dentro do seletor de span e adicionar z-index minus1 para fazer o texto aparecer na frente do fundo. E também faremos isso para os pseudo elementos antes e depois. Então, agora, quando passamos o mouse, você pode ver o texto agora aparece na frente do fundo amarelo. E, finalmente, uma coisa olho esquerdo vai para a direita aqui dentro do antes e depois de pseudo elementos seletor. E vou adicionar opacidade 0. Então, quando pairar sobre o link, farei sua opacidade ir para um novamente. Então agora eles desapareceram. Mas quando eu passar o mouse sobre o link, eles aparecem novamente. Então o fundo amarelo aparece depois deles, dando-nos exatamente o efeito que queremos. 26. 27 - efeito de paterna criativo: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta lição, nós vamos criar este efeito agradável sobre o botão. Então, se você der uma olhada no botão e você pode ver que há dois fundos aqui, o azul e o vermelho. O azul é deslocado um pouco para o canto superior esquerdo, enquanto o vermelho é deslocado para a taxa inferior. E ao passar o mouse sobre o link, você pode ver tanto um girado em uma perspectiva 3D no eixo x. Então vamos criar isso juntos. Vou começar aqui no meu HTML adicionando uma tag âncora. E eu vou apenas dizer botão efeito hover. Então eu vou para o meu CSS. E eu vou apontar a etiqueta âncora e adicionar largura. 300 pixels. Altura, 60 pixels. Decoração de texto. Nenhum. Transformação de texto. maiúsculas, fundo. Transparente porque vamos usar os pseudo elementos antes e depois para criar nossos fundos. Então, para centralizar o texto dentro do link horizontal e verticalmente, direi alinhar texto, centro e altura da linha. 60 pixels. Ainda mais para fazer isso, vou adicionar o peso da fonte, negrito, espaçamento entre letras para pixels, em seguida, posição, relativo. E finalmente transição ou 0,2 segundos. Legal. Então, agora terminamos de projetar nosso botão. Vamos trabalhar na criação dos dois fundos. Vou aqui dizer um cólon antes. E eu vou adicionar conteúdo. Cordas vazias. Posição absoluta, superior, 0, esquerda 0. E queremos que o fundo tenha a mesma largura e altura que o link. Então eu vou adicionar largura, 100%. Altura. Em seguida, cor de fundo. Esta cor azul claro agradável. Então agora você pode ver que o fundo azul está ocupando toda a largura e altura do link e cobrindo-o. Então vamos voltar e tornar o texto do link visível. Vou fazer isso indo aqui e adicionando o índice z menos 1. Tudo bem, agora, se você se lembra, o fundo azul foi deslocado um pouco para o canto superior esquerdo do nosso link. Vamos fazer isso. Eu vou para a direita aqui e mudar o valor superior para menos três pixels em vez de 0, modo que ele será deslocado um pouco para o topo. E eu mudarei para a esquerda para menos três pixels também. Então, será deslocado para a esquerda. Legal. Agora vamos criar o fundo vermelho. Vou copiar tudo isso. Cole novamente e mude antes para depois. Então queremos que ele seja deslocado para o fundo e para a direita. Então, em vez de esquerda menos três pixels, vou alterá-lo para três pixels e 23 pixels principais também. Então eu mudarei a cor de fundo, é claro, para essa cor vermelha clara. E agora você pode ver que o fundo vermelho está sentado em cima do azul e cobrindo-o. Mas queremos que se misturem um no outro. Podemos fazer isso facilmente, voltando para o seletor antes e adicionando mistura, modo de mistura, multiplicar. E vamos fazer o mesmo para o pseudo elemento após. E vamos realmente mudar a cor do link para branco em vez dessa cor azul feia. Então agora você pode ver que os dois fundos estão misturados e parecem muito mais bonitos. E agora precisamos trabalhar no efeito pairando. Passando o mouse sobre o link. Queremos que os dois fundos girem no eixo x em um ambiente 3D. Então, para fazer isso, eu vou direto aqui e dizer um salto de cólon. Um cólon antes. E primeiro vamos mover o fundo azul para o topo seis pixels e mudar seu valor à esquerda para 0. Então eu vou adicionar top menos seis pixels esquerda 0. Então eu vou adicionar transformar. E porque queremos que a rotação aconteça em um ambiente 3D, adicionarei perspectiva 10000, depois girarei x 75 graus. E para fazer o movimento acontecer sem problemas, eu vou subir dentro do seletor de elemento pseudo antes e eu vou adicionar transição 0, 0,2 segundos. E agora você pode ver quando eu passar o mouse sobre o link, você pode ver que o fundo azul está girando em um ambiente 3D no eixo x, mas este não é o efeito que queremos. Ele está girando em seu ponto central, então ele cobre as etiquetas, mas queremos que ele gire em seu ponto central superior. Então eu vou voltar para o seletor de elemento pseudo antes e eu vou adicionar transformar origem topo. Então, agora, quando eu voltar e passar o mouse, você pode ver o fundo azul está girando no eixo x da maneira que queremos. Agora, vamos fazer a mesma coisa para o fundo vermelho. Vou copiar isso, colá-lo e mudar antes para depois. Em seguida, topo para seis pixels em vez de menos 6 e gire x para menos 75 graus porque queremos que ele gire para o outro lado. E para que o movimento aconteça sem problemas, vou entrar no pseudo-elemento depois e adicionar transição, todos zeros. E, finalmente, a fim de fazer o plano de fundo girar em seu ponto central inferior, vou adicionar a origem de transformação inferior. E agora, quando eu vou para o link e passar o mouse, você pode ver os dois fundos girar no eixo x, dando-nos o efeito que queremos. Agora, resta uma coisa a pairar sobre o link. Queremos mudar sua cor para que possamos vê-lo. Vou voltar para o meu CSS e dizer uma cor de dois pontos, esta cor cinza escuro. E agora você pode ver que finalmente estamos recebendo exatamente o efeito que queremos. E isso é muito bom. 27. 28 - efeito de botão - criativo: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta lição, vamos criar este efeito sobre o botão. Você pode ver quando eu passar o mouse sobre o botão, essas quatro partes com um fundo amarelo vêm dentro e cobrir o botão. Ao mesmo tempo, dando-nos este efeito agradável. Vamos usar o antes e depois pseudo elementos para criar essas quatro partes e vamos adicionar uma posição diferente para cada parte. Então, quando passarmos o mouse sobre o link, as quatro partes se moverão juntas para cobrir o link e nos dar o efeito agradável. Nós também vamos brincar um pouco e mudar as coisas em nosso código para obter alguns efeitos mais legais com a mesma idéia. Então vamos começar a fazer isso. Vou começar aqui no meu HTML adicionando uma tag âncora. Então, dentro dele, vou adicionar uma extensão. E apenas diga “paira-me”. Adicionamos uma extensão aqui dentro da tag âncora porque queremos criar quatro partes do fundo amarelo que cobrirão o botão. Então, vamos criar dois deles usando o elemento pseudo antes e depois da tag âncora em si. E os outros dois serão criados usando os pseudo elementos antes e depois da extensão que acabamos de adicionar. Ok, vamos para o nosso CSS para começar a criar o efeito que queremos. Começarei por apontar a etiqueta âncora em si para que pareça da maneira que queremos. E eu vou adicionar decoração de texto. Nenhum. Transformação de texto. maiúsculas. Tamanho da fonte, 25 pixels. Cor. Esta bela cor amarela. Espaçamento de letras três pixels para obter alguns espaços entre as letras. Em seguida, preencha 25 pixels da parte superior e inferior, e 50 pixels da esquerda e direita, em seguida, borda três pixels, sólido. E a nossa cor amarela. Então você pode ver que nosso botão está parecendo muito mais bonito. Vamos continuar. Vou voltar para dentro do link e adicionar transição 0, 0, 0,5 segundos. E finalmente, posição relativa. Tudo bem, agora vamos trabalhar nas quatro partes do fundo amarelo que vêm dentro e cobrir o link. Quando passarmos o mouse sobre ele, vamos criar os dois primeiros usando os pseudo elementos antes e depois da tag âncora em si. Então eu vou aqui e dizer um cólon antes. Então, vou adicionar vírgula. E diga um cólon depois. E eu vou adicionar conteúdo. Cordas vazias, posição, largura absoluta, 25%. Assim, a largura de cada parte será de 25% da tag âncora. E isso faz sentido porque ao combinar todas as quatro partes, elas terão 100% do comprimento, largura e cobrirão completamente. Então vamos adicionar altura, 100%. Cor de fundo, nossa cor amarela. E para que o texto apareça em cima do fundo, adicionaremos um negativo de índice z. E, finalmente, vamos adicionar transição 0, 0,5 segundos. Então agora você pode ver que temos as duas partes, mas vamos mudar sua posição agora e dar-lhes a posição inicial que eles devem ter antes de pairar. Então vamos fazer isso. Vou mirar apenas o pseudo elemento antes desta vez. Então eu vou adicionar dois pontos antes. E dentro dele, vou adicionar top 0 e esquerda negativo 25 por cento. Então agora você pode ver o pseudo elemento antes movido para a esquerda do nosso link, e esta é a posição em que queremos que ele esteja inicialmente. Vamos também mudar a posição do pseudo elemento após. Vamos voltar para o nosso CSS e segmentado, adicionando dois pontos depois. E vamos dizer top negativo 100% e deixou 25 por cento. Então agora você pode ver o depois pseudo elemento está sentado em cima do botão porque nós movê-lo por 100% da altura do botão para o topo. E agora ele fica a 25 por cento da largura do botão da esquerda também. Agora, quando passarmos o mouse sobre o link, queremos que eles se movam de sua posição para uma posição que os fará cobrir metade do nosso botão até que criemos as outras duas partes. Então eu vou aqui e dizer ao passar o mouse sobre o link, Eu quero fazer algumas mudanças aconteceram com o pseudo elemento antes. Vou adicionar guia 0 e esquerda 0. Então agora você pode ver quando passamos o mouse sobre o link lá antes pseudo-elemento move para cobrir o primeiro quarto do botão. Porque nós dissemos esquerda para 0 e topo já é 0. Certo, vamos trabalhar na segunda parte. Eu vou voltar e dizer quando passarmos o mouse sobre o link, Eu quero fazer algumas alterações acontecer para ser após pseudo elemento, Eu vou mudar para 0 em vez de negativo 100%, modo que ele vai se mover para baixo até que ele cobre o botão. E sair, à esquerda como está, 25 por cento. Então agora, quando eu passar o mouse sobre o botão, você pode ver a segunda parte se move para baixo, cobrindo o próximo trimestre ao lado da primeira parte. E juntos estão cobrindo metade do botão. Tudo bem, agora queremos criar as duas partes restantes, e vamos criá-las usando os pseudo elementos antes e depois também. Mas desta vez eles serão os pseudo elementos antes e depois da extensão que adicionamos dentro da tag âncora. Então eu vou para o meu CSS e vou para aqui. Adicione uma nova vírgula e adicione dois pontos antes de outra vírgula e span dois-pontos depois. Nós os adicionamos aqui, porque eles terão a mesma largura e altura que as outras duas partes. A única coisa que mudará é a posição. Então, agora, quando eu for recarregar, vocês podem ver que temos as duas partes, mas vamos mudar a posição deles. Eu vou voltar para o meu CSS e dizer um span dois-pontos antes. E eu vou adicionar top 100%. Então ele se sentará abaixo do botão e escreverá 25 por cento. Então, ele vai ficar em 25 por cento da largura do botão da direita. Então você pode ver que a terceira parte está sentada na posição que queremos. E ao passar o mouse sobre o link, queremos mudar sua posição para que ele cubra a terceira parte do botão. Então eu vou voltar para o meu CSS e dizer um sobre dois pontos de extensão pairando antes. E eu vou adicionar top 0 para fazê-lo mover-se para cima e escrever 25 por cento como está. Então agora, quando eu passar o mouse sobre o link, você pode ver a terceira parte se move para cima, cobrindo a terceira parte do botão. Legal. Agora vamos trabalhar na quarta parte. Vou aqui no meu CSS e adicionar dois pontos de extensão depois. E eu vou adicionar top 0 e escrever negativo 25 por cento. Então, esta quarta parte será inicialmente vendida à direita do botão, assim. Muito bem, vamos trabalhar no efeito de pairar. Eu vou aqui e dizer um cólon de extensão descobrindo depois. E eu vou adicionar top 0 e escrever 0 também. Então, agora, quando eu passar o mouse sobre o link, você pode ver as quatro partes se movendo de suas posições iniciais para suas novas posições e cobrir o botão juntos. Mas agora precisamos mudar a cor do texto ao passar o mouse. Então eu vou voltar para o meu CSS e dizer um sobre pairar. Quero que a cor mude para esta cor cinza escuro. E também para esconder as partes fora do botão. Vou subir aqui dentro do seletor de etiquetas de âncora. E eu adicionarei transbordamento escondido. Então agora você pode ver quando passamos o mouse sobre o botão, as quatro partes vêm e cobri-lo completamente, e a cor do texto muda para cinza, dando-nos o efeito que queremos. Agora, vamos criar outro efeito legal com pequenas mudanças em nosso código. Primeiro, eu vou subir aqui novamente dentro do seletor de tags âncora e remover o overflow escondido por enquanto para que possamos ver o que estamos fazendo. Então eu vou para a primeira parte das quatro partes, que é o pseudo elemento antes da tag âncora. E eu vou mudar a propriedade superior para 100% em vez de 0 e a esquerda para 0 em vez de 25 por cento negativos. Então agora você pode ver aqui ele tem uma nova posição abaixo do botão. Então eu vou para a quarta parte, representada pelo pseudo elemento após do span. E eu mudarei para negativo 100% em vez de 0 e direito para 0 em vez de negativo 25 por cento. E aqui tem uma nova posição acima do botão. Então eu vou entrar novamente dentro do seletor de tag âncora e adicionar overflow oculto. E agora, quando eu passar o mouse sobre o link, você pode ver que temos um efeito ligeiramente diferente quando tivemos antes. E parece tanques também. Eu também quero acrescentar algo. Eu acho que será bom se nós adicionarmos alguns atrasos de transição para as quatro partes para que eles apareçam uma após a outra. Portanto, queremos que a primeira parte apareça imediatamente. Eu vou aqui e adicionar atraso de transição 0,1 segundos. Em seguida, para a terceira parte, vou adicionar atraso de transição 0,2 segundos. E dois, a quarta parte, vou adicionar atraso de transição 0,3 segundos. E finalmente, vamos subir aqui e mudar a duração da transição para 0,2 segundos para que seja um pouco mais rápido. Então agora você pode ver quando eu passar o mouse sobre o link, as quatro partes aparecem uma após a outra, dando-nos este efeito realmente legal. 28. 29 - efeito de troca de fronteira criativo: Olá a todos, bem-vindos a esta nova lição no curso de animações, transições e transformações CSS . Nesta lição, vamos criar este efeito agradável sobre o botão. Você pode ver que o nosso botão tem para longas fronteiras em torno dele. Eles não têm a mesma altura ou largura que o botão. Em vez disso, as bordas à esquerda e à direita têm alturas maiores e as bordas na parte superior e inferior têm larguras maiores. Vamos aprender a fazer isso. Outra coisa é que as bordas na parte superior e esquerda têm uma cor vermelha, enquanto as bordas na parte inferior e escrever têm uma cor amarela, como você pode ver. E quando passarmos o mouse sobre o botão, você pode ver as fronteiras trocam lugares. A borda vermelha superior se move para a parte inferior e a amarela inferior se move para o topo, tomando seu lugar. Enquanto a borda esquerda vermelha se move para a direita. E a borda direita amarela se move para a esquerda. Então eles só estão mudando de posição. Então vamos ver como podemos criar esse efeito. Primeiro de tudo, vou para o meu HTML e adicionar uma tag âncora. E apenas diga “paira-me”. Então eu vou para o meu CSS para estilizá-lo. Vou direcionar a tag âncora, e vou começar adicionando decoração de texto, nenhum para remover os sublinhados. Em seguida, vou adicionar texto transformar em maiúsculas para fazer todas as letras maiúsculas. Em seguida, tamanho da fonte, 22 pixels para tornar o texto um pouco maior para que possamos vê-lo. E família de fontes. Espaçamento entre letras Verdana, três pixels para ter algum espaçamento entre as letras. Ok, Agora vou adicionar altura, 80 pixels, largura 200 pixels. E para centralizar o texto horizontal e verticalmente, adicionaremos altura da linha, 60 pixels para centralizá-lo verticalmente. E o texto alinhe o centro para centralizá-lo horizontalmente. E vamos mudar a cor do texto. Vamos aqui e adicionar cor, esta cor amarela agradável. Então, finalmente, vou adicionar posição relativa. Legal. Agora, para ver o que estamos fazendo, vamos adicionar uma borda temporária ao nosso botão. Eu irei aqui e adicionarei fronteira. Dois pixels, azul sólido. Certo, agora queremos trabalhar nas longas fronteiras que vimos em nossa demonstração e descobrir como criá-las. Trabalharemos passo a passo juntos, a fim de entender como eles são criados. Primeiro de tudo, para criar as bordas esquerda e direita, usarei o pseudo elemento antes. Vou aqui dizer um cólon antes. E eu vou adicionar conteúdo. String vazio, posição, altura absoluta, 60 pixels, largura, 200 pixels, topo 0 e esquerda 0 também. Observe que esses são a mesma largura e altura do nosso link. Então, até agora, o pseudo elemento anterior tem exatamente o mesmo tamanho que o link e ele está sentado em cima dele. Ok, Nós dissemos que vamos usar os pseudo elementos antes para criar as bordas esquerda e direita. Então eu vou adicionar borda, esquerda, dois pixels, sólido, vermelho. E fronteira direita. Dois pixels sólidos. A nossa cor amarela. Então agora você pode ver que temos uma nova borda vermelha esquerda e, em seguida, uma nova borda amarela direita. E nós mal podemos vê-los porque eles estão sentados em cima da borda azul original que rodeia o botão. E isso ocorre porque o pseudo elemento antes tem a mesma altura e largura que o botão. Então, a fim de tornar essas duas novas bordas mais longas, Vamos mudar a altura do pseudo elemento antes. Vamos alterá-lo para 90 pixels, por exemplo. E agora você pode ver as bordas esquerda e direita agora são mais longas e estendendo-se além da altura do botão porque eles estão cercando o pseudo elemento anterior, que tem uma altura de 90 pixels, enquanto o botão tem uma altura de apenas 60 pixels. Portanto, há 30 pixels a mais do que a altura do botão. Ok? Mas agora queremos mudar essas duas fronteiras para o topo. Nós não queremos que eles fiquem mais tempo na parte inferior, mas também no topo com espaços iguais. Podemos fazer isso facilmente, sem problemas indo aqui e mudando de cima para 15 pixels negativos. Então isso irá mudar o pseudo elemento antes para o topo por 15 pixels. E as fronteiras também serão deslocadas. Ok, agora vamos criar as bordas superior e inferior. Vamos usar o depois pseudo elemento para criá-los. Então eu vou dizer um cólon depois. E eu vou adicionar conteúdo. Vazio também. Posição. Absoluto, altura, 60 pixels, o mesmo que o botão. E largura. 230 pixels, desta vez, não 200 pixels como o link, porque as bordas superior e inferior dos pseudo elementos posteriores serão maiores do que a largura do botão por 15 pixels à esquerda e 15 pixels à direita. Em seguida, vamos adicionar a 0 e deixou 0 por enquanto. Em seguida, topo da borda. Dois pixels, vermelho sólido e fundo da borda. Dois pixels, amarelo sólido. Agora você pode ver que temos as bordas superior e inferior e elas são mais longas do que a largura do botão em 30 pixels. Então agora queremos mudar as fronteiras de volta para a esquerda. Então eu vou para aqui e mudar para a esquerda para 15 pixels negativos em vez de 0. Incrível. Agora não precisamos mais da borda azul, então eu vou aqui e removê-la. Legal. Agora precisamos trabalhar no efeito de pairar. Lembre-se, quando passarmos o mouse sobre o link, queremos que as fronteiras mudem de lugar. O vermelho superior estará na parte inferior e o vermelho esquerdo estará à direita. Isso pode ser feito muito facilmente. Eu vou apenas ir aqui no meu CSS e adicionar a. E quando passar o mouse sobre ele, eu vou fazer algumas mudanças acontecer com o pseudo elemento antes, que representa as bordas esquerda e direita. Eu vou adicionar Transform, Girar Y. Então isso vai torná-los antes do pseudo elemento girar no eixo y em 180 graus, que significa que ele vai fazê-lo virar sobre o eixo y. E um ordenado para esta mudança para acontecer sem problemas, Eu vou subir aqui dentro do pseudo elemento antes e eu vou adicionar transição ou 1 segundo. Então, agora, quando eu passar o mouse sobre o link, você pode ver que antes do pseudo-elemento gira no eixo y em 180 graus, fazendo as bordas trocarem sua posição exatamente da maneira que queremos. Legal. Agora, vamos fazer isso para as Bordas de cima e de baixo. Vou copiar esse bloco de código, colá-lo novamente, e mudar antes para depois. E girar y para girar x. seguida, subir aqui no depois pseudo elemento e adicionar transição. Oh, um segundo. E aqui vamos nós. As fronteiras de cima e de baixo também estão mudando seus lugares, dando-nos este efeito realmente agradável. E podemos torná-lo ainda mais agradável, adicionando algum atraso para ser após pseudo elemento, por exemplo. Então, se eu for aqui e adicionar atraso de transmissão 0,2 segundos, você pode ver as bordas superior e inferior pesam 0,2 segundos e então começar a se mover. Também podemos obter outro efeito agradável. Podemos fazer as bordas superior e inferior se moverem somente após a esquerda e a direita quando terminar de se mover. Então eu vou aqui dentro do pseudo elemento antes e mudar a duração da transição para apenas 0,4 segundos em vez de 1 segundo. E eu vou fazer o mesmo para o pseudo elemento depois. E também vamos alterar o atraso de transição para 0,40 segundos em vez de 0,2. Assim, fazendo isso, as bordas superior e inferior começarão a se mover somente depois que as da esquerda e da direita terminarem de se mover, dando-nos esse novo efeito legal. 29. 30 - efeito de botão de crescimento de fronteira criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar outro efeito legal sobre o botão. Você pode ver que este botão tem essas bordas no canto superior esquerdo e no canto inferior direito. E quando eu passar o mouse sobre o link, você pode ver a largura e a altura das bordas aumentam. E eles nos dão esse efeito agradável. Então vamos começar a criar isso. Vou começar aqui no HTML e vou adicionar um botão e dizer Enviar. Então eu vou para o meu CSS e segmentar este botão. Em seguida, adicione borda, nenhum. Preenchimento, 12 pixels da parte superior e inferior e 40 pixels da esquerda e da direita. Em seguida, vou adicionar cor de fundo. Esta bela cor laranja. Em seguida, cor branca. E linha de banco da família de fontes. Tudo bem, eu também vou adicionar o tamanho da fonte. 22 pixels. Transformar, maiúsculas, cursor, ponteiro e, finalmente, posição relativa. Agora vamos criar as fronteiras. Vamos criar as bordas que se sentam no canto superior esquerdo, primeiro usando o elemento pseudo antes. Então vamos criar os que estão no canto inferior direito. Então eu vou segmentar o elemento pseudo antes do botão. E eu vou adicionar conteúdo. Cordas vazias. Em seguida, posicione a largura absoluta 24 pixels. Altura 24 pixels também. Em seguida, topo 0, esquerda 0. E vamos adicionar um fundo vermelho temporário. Então agora você pode ver o pseudo elemento antes é este fundo vermelho que fica no canto superior esquerdo do botão. Porque dissemos que ambas as suas propriedades superior e esquerda para 0. E tem uma largura e uma altura de 24 pixels. Mas se você se lembra, nossas fronteiras estavam fora do botão. Eles foram deslocados um pouco para a esquerda e para o topo lá não estamos sentados perfeitamente no canto superior esquerdo. Então vamos voltar e fazer isso. Vou mudar a propriedade esquerda aqui de 0 para cinco negativos, modo que o pseudo elemento antes será deslocado para a esquerda por cinco pixels. Então eu também vou fazer o mesmo para a propriedade superior que ele será deslocado para o topo por cinco pixels negativos também. E agora você pode ver que o fundo vermelho é deslocado por cinco pixels e vai para fora do botão. Tudo bem, agora vamos adicionar as bordas superior e esquerda a ele. Voltarei aqui e adicionarei fronteira. Dois pixels sólidos. Nossa cor laranja. E fronteira esquerda. Dois pixels sólidos. A cor laranja também. E agora você pode ver que temos as fronteiras adicionadas. Próximo. Queremos animar essas fronteiras. Queremos fazê-los crescer, como vimos em nosso exemplo. Isso será fácil de fazer. Vamos apenas aumentar a largura e altura do pseudo elemento antes e as bordas aumentarão com ele. Então eu vou aqui e quando passarmos o mouse sobre o botão, eu quero fazer algumas mudanças acontecerem com o pseudo elemento antes. Vou fazer sua altura 100% e sua largura 100% também. E para que esta mudança aconteça sem problemas aqui dentro do pseudo elemento antes e adicione transição ou 0 a cinco segundos. Tudo bem, agora, quando eu passar o mouse sobre o botão, você pode ver o pseudo elemento antes fica maior, ele se torna a mesma largura e altura que o botão e as bordas ficam maiores com ele. Então, a única coisa a fazer é remover este fundo vermelho. Então eu vou voltar aqui e fazer isso. E quando eu passar o mouse sobre o botão novamente, você pode ver que as fronteiras estão ficando maiores e eles estão nos dando esse efeito agradável. E é o mesmo efeito que queríamos. Muito bem, vamos criar rapidamente as fronteiras. No canto inferior direito, vamos usar o depois pseudo elemento para criá-los. Vou copiar o pseudo elemento antes. Cole novamente, mude antes para depois. Então vou fazer algumas mudanças. Vou mudar de cima para baixo e da esquerda para a direita. Eu também vou mudar borda superior dois borda inferior. E a fronteira da esquerda para a direita. E agora você pode ver que temos essas duas bordas sentadas bem aqui no canto inferior direito. Vamos voltar e animá-los também. Eu vou apenas ir aqui e adicionar uma vírgula, em seguida, apontar o depois pseudo elemento também. E agora, quando eu voltar e passar o mouse sobre o botão, você pode ver que as bordas no canto inferior direito estão ficando maiores também. E agora temos o mesmo efeito que queremos. 30. 31 - efeito de botão de rotativo criativo: Bem-vindo a esta nova lição no curso. Nesta lição vamos criar outro efeito sobre o botão. Então você pode ver quando eu passar o mouse sobre este botão, este efeito legal acontece onde temos um fundo preto que desaparece e gira um pouco para a direita. Além disso, a primeira letra B fica maior enquanto gira e nos dá esse efeito pouco legal. Então vamos criar isso. Vou começar aqui no meu HTML adicionando uma tag âncora. Então, dentro dele, adicionarei uma extensão. E dentro do espaço, vou adicionar apenas a letra b para que possamos animá-la separadamente. Então, fora do espaço, vou adicionar o resto do mundo. Em seguida, irei para o meu CSS e direcionarei a tag âncora. Em seguida, adicione decoração de texto. Nenhum. Largura, 160 pixels, altura, 60 pixels. Cor, preto, borda dois pixels. Sólido. - Preto. Em seguida, para centralizar o texto horizontal e verticalmente, adicionarei alinhamento de texto, centro e altura da linha, 60 pixels. Quando tamanho da fonte 25 pixels, posição relativa. E finalmente transição ou 0,2 segundos. Tudo bem, agora vamos criar o fundo preto que se desvanece e gira. Quando passarmos o mouse sobre o link, vamos usar o elemento pseudo antes para criar isso. Então eu vou segmentar e adicionar conteúdo. Cordas vazias. Posição, absoluta, superior, 0, esquerda 0 também. Em seguida, largura 100%. E altura 100%. Cor de fundo, preto. E para que o texto apareça acima dele, adicionaremos o índice z, negativo. E agora você pode ver que temos um fundo preto que tem a mesma largura e altura que o link, e ele está sentado acima dele. Então, se você se lembrar, deve ser invisível, então, quando passarmos o mouse sobre o link, ele deve desaparecer e girar. Então vamos fazer isso. Vou voltar e adicionar opacidade 0, em seguida, transição, ou 0,8 segundos. Então, abaixo disso, vou adicionar dois pontos, pairar o cólon antes da opacidade. Uma de novo e transforme. Gire 15 graus. E agora, quando eu passar o mouse sobre o link, você pode ver o fundo preto desaparece enquanto gira e nos dá o efeito que queremos. Mas vamos mudar a cor do texto ao passar o mouse para branco para que possamos vê-lo. Vou adicionar um cursor do cólon. Então vou mudar a cor para branco. E agora você pode ver a cor do texto muda para branco quando eu passar o mouse sobre o link. Muito bem, vamos trabalhar para animar a primeira letra. Você se lembra que nós incluímos dentro de um espaço. Então vamos segmentar e adicionar cor. Transparente. Em seguida, posição relativa. E agora você pode ver que a primeira letra é invisível porque nós definimos sua cor como transparente. Em seguida, vamos segmentar o elemento pseudo antes deste período. Adicione conteúdo, a letra B para que ele apareça acima da letra cuja cor definimos como transparente. Em seguida, posicione cor absoluta, preto e transição, ou 0,2 segundos. E agora você pode ver a primeira letra aparece novamente. Muito bem, vamos trabalhar no efeito de pairar. Ao passar o mouse sobre o link. Eu quero fazer algumas mudanças acontecerem com o pseudo elemento antes do span. Primeiro, eu quero fazer sua cor branca. Então eu quero aumentar seu tamanho. Então vou adicionar o tamanho da fonte, 18 pixels. E finalmente, eu quero girá-lo. Então eu vou adicionar transformar, girar 360 graus. E agora você pode ver quando eu passar o mouse sobre o botão, a primeira letra fica maior enquanto gira ao mesmo tempo, mas ela cobre as outras letras. Então precisamos movê-lo um pouco para que não esconda as outras letras atrás dele. Eu vou voltar aqui e adicionar traduzir negativo 65 por cento no eixo x para deslocá-lo de volta para a esquerda, e 10% negativo no eixo y para deslocá-lo para o topo um pouco também. E agora, quando eu passar o mouse sobre o botão, você pode ver que a primeira letra está agora sentada em uma nova posição e não esconde mais as outras letras. E é isso pessoal. Este é o efeito que queríamos. 31. 32 - efeito de botões de crescimento: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este efeito agradável sobre o botão. Você pode ver quando eu passar o mouse sobre o botão, essas quatro bordas estão chegando e fazendo este efeito legal. Então a água da torneira vem da esquerda para a direita. A linha inferior vem da direita para a esquerda. A borda esquerda vem de baixo para cima. E a borda direita vem do fundo da torta. E tudo isso está acontecendo ao mesmo tempo, nos dando esse efeito legal. Então vamos começar a criá-lo. Eu vou aqui no meu HTML e adicionar um botão. Então, dentro dele, vou dizer botão. Então eu também adicionarei uma extensão dentro do botão. Então eu vou para o meu CSS, segmentar o botão e adicionar cor de fundo. Vermelho, por enquanto. Fronteira. Nenhum. Posição. -Relativo. Largura, 400 pixels, altura, 120 pixels. Em seguida, o texto transforme maiúsculas. E para centralizar o texto dentro do botão verticalmente e horizontalmente, adicionarei altura da linha, 120 pixels. E texto alinhe o centro. Então vou adicionar cor, branco, tamanho da fonte, 45 pixels. E finalmente, espaçamento de letras, 15 pixels. Certo, vamos criar a borda que vem da esquerda para a direita. Vamos usar o pseudo elemento antes para criar isso. Então eu vou segmentar e adicionar conteúdo. Cordas vazias. Posição absoluta, superior, 0, esquerda 0 também. Por agora. Em seguida, largura, 100% da largura e altura do botão, apenas quatro pixels. Então, finalmente, cor de fundo. Branco. E agora vocês podem ver que temos esta linha aqui no topo, e está ocupando toda a largura do botão. Então vamos voltar e movê-lo para a esquerda. Ao lado do botão. Eu vou aqui e mudar para a esquerda para 100% negativo em vez de 0. E agora a linha é deslocada para a esquerda. Tudo bem, eu vou aqui novamente e adicionar transição 0, 0, 5 segundos. Então, ao passar o mouse sobre o botão, queremos que a borda volte para sua posição original. Então eu vou dizer botão do cólon pairar. Vou fazer algumas mudanças acontecerem com o pseudo elemento antes. Vou definir a esquerda de volta para 0. E agora, quando eu passar o mouse sobre o botão, você pode ver que a linha superior volta para ele está posicionado logo acima do botão. Tudo bem, vamos criar a linha na parte inferior. Vou voltar para o editor de código e copiar o pseudo elemento antes. Em seguida, cole-o novamente e mude antes para depois. Em seguida, mude de cima para baixo para que ele fique na parte inferior do botão. Então também mudarei da esquerda para a direita. Assim, será deslocado para a direita desta vez, não para a esquerda. E agora você pode ver que a segunda linha está sentada na parte inferior, extremidade é deslocada para a direita. Então eu estou pairando sobre o botão. Queremos mudá-lo de volta à sua posição original. Voltarei ao meu CSS e farei isso. Vou copiar este código, colá-lo novamente e mudar antes para depois. E também mudar da esquerda para a direita. Para que a posição da segunda linha seja 0 à direita. E isso o traz de volta ao seu lugar original. E ao passar o mouse sobre o botão, você pode ver como esperado, a linha na parte inferior se move da direita para a esquerda, voltando para sua posição. Nossa direita, depois de criar as linhas superior e inferior, criaremos as dos lados esquerdo e direito. Vamos usar o antes e depois pseudo elementos do span que criamos dentro do botão. Então eu vou apenas copiar o elemento pseudo antes do botão. Novamente. Cole, Alterar botão para abranger, para direcionar o pseudo elemento antes da extensão, não o botão. Então, dentro disso, eu mudarei a largura para quatro pixels em vez de 100% e altura para 100% em vez de quatro pixels, modo que ele terá a mesma altura que o botão e uma largura de quatro pixels. Esta será a linha à direita. Então eu vou mudar isso para negativo 100% em vez de 0 porque ele vai estar sentado acima do botão e mudar da esquerda para a direita e torná-lo 0, não negativo 100%. E agora você pode ver a linha à direita está sentado acima do botão porque dissemos que é propriedade superior para negativo 100% e é propriedade direita para 0. Ao pairar, queríamos voltar à sua posição original também. Então eu vou voltar. E ao passar o mouse sobre o botão, eu quero fazer algumas alterações acontecerem com o pseudo elemento antes do span. Vou definir sua propriedade superior de volta para 0 novamente. E agora, ao passar o mouse sobre o botão, você pode ver a linha à direita se move de cima para baixo, de volta à sua posição. Agora, vamos criar rapidamente a linha final à esquerda. Vou copiar todo o código para a parte certa. Cole novamente, segmente os pseudo elementos após, desta vez, quando mudar de cima para baixo e direita para a esquerda. E eu também vou mudar antes para depois aqui e de cima para baixo. E agora, quando eu voltar e recarregar, você pode ver que temos uma linha no lado esquerdo também. E ao passar o mouse sobre o botão, todas as quatro linhas voltam para suas posições. Vamos voltar e remover este fundo vermelho. Vamos também adicionar overflow oculto para que as linhas fiquem escondidas fora do botão. E agora, quando eu voltar para o botão e passar o mouse sobre ele, você pode ver que temos esse efeito agradável em que todas as linhas entram ao mesmo tempo. 32. 33- efeito de botão ondulado criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito agradável sobre o botão usando animações CSS. Você pode ver ao passar o mouse sobre o botão, este efeito ondulado agradável acontece, que é como uma onda está chegando e se move até que ele cobre o botão. Este é um efeito muito interessante. Então vamos criá-lo. Vou começar no meu HTML adicionando uma tag âncora. Então dentro que eu vou dizer botão. Então eu também vou adicionar um div e dar-lhe uma onda de classe. Em seguida, irei para o meu CSS e direcionarei a tag âncora. E vou adicionar decoração de texto. Nenhum. Preenchimento, 15 pixels da parte superior e inferior e 30 pixels da esquerda e da direita. Então vou adicionar cor. Esta cor azul claro. E tamanho da fonte, 18 pixels. Em seguida, espaçamento de letras, borda, dois pixels, sólido, azul claro. Transformação de texto, maiúsculas. E finalmente, posição, parente. E agora você pode ver que o botão parece legal. Agora, como vamos criar esse efeito ondulado? Vamos dar passo a passo. Vou mirar a div com a classe de onda. E dentro disso, vou adicionar posição absoluta, que possamos posicioná-lo em relação ao botão. Eu também vou definir sua largura para 100% e é altura para 100% bem. Então eu vou adicionar esquerda, 0, top 100%. Em seguida, cor de fundo, vermelho por enquanto. E agora você pode ver que temos um fundo vermelho que tem a mesma largura e altura que nosso botão fica abaixo dele, porque dissemos que é propriedade superior a 100%. Muito bem, vamos continuar a trabalhar. Vamos criar esta pequena onda usando o elemento antes pseudo de div onda R. Então eu vou mirá-lo. E dentro disso vou adicionar conteúdo. Cordas vazias. Posição absoluta, superior, 0, esquerda 0 também. Em seguida, largura 100% E altura apenas 22 pixels. E saberemos por que em um segundo. E, finalmente, vou adicionar fundo URL onda ponto PNG. Então esta é a pequena imagem que vamos usar para o efeito de onda. E essa altura da imagem é de 22 pixels. É por isso que definimos a altura do pseudo elemento antes para 22 pixels para que ele possa caber na imagem. E queremos movê-lo para o topo para fazê-lo sentar-se acima do fundo vermelho. Então podemos fazer isso voltando e alterando sua propriedade superior para 22 pixels negativos em vez de 0. E agora você pode ver a imagem de fundo é deslocada para o topo e sentada acima do fundo vermelho. Mas agora está cobrindo uma pequena parte do botão de baixo. E nós não queremos isso. Queremos que o ponto superior da imagem esteja logo abaixo do botão. Então podemos fazer isso movendo a imagem e o fundo vermelho para o fundo em 22 pixels, que é a altura da imagem. Então, para fazer isso, eu vou voltar para a onda div. E em vez de 100% aqui no topo, quero movê-lo em 100% mais 22 pixels. Então podemos usar a propriedade count para fazer isso. Vou adicionar 100% mais 22 pixels. E agora você pode ver o fundo vermelho e a imagem apenas movido para o fundo por mais 22 pixels. E observe que a imagem se moveu com o fundo vermelho porque é um pseudo elemento antes dela, então ela é anexada a ela. Tudo bem, vamos passar para animar esta imagem e fazer este efeito ondulado. Vou criar uma nova animação. Nome ondulado. E dentro dele a 0%. Vou adicionar posição de fundo x 0. Em seguida, em 100%, vou adicionar posição de fundo x 118 pixels. E este 118 pixels é a largura da imagem. Assim, a posição da imagem mudará de 0 para sua largura total, e nos dará o efeito que queremos. Agora, vou subir aqui e adicionar esta animação. Então eu vou adicionar animação ondulada 0,5 segundos, linear e infinito. Eu também mudarei a cor de fundo vermelho para a cor azul-claro da nossa imagem. E agora você pode ver que a imagem está se movendo no topo do fundo azul claro. E está nos dando esse efeito muito legal. E parece que é apenas parte do fundo azul porque eles têm a mesma cor. Para terminar nosso efeito, teremos que mover este fundo azul para cima e fazê-lo preencher o botão ao passar o mouse sobre ele. Então vamos em frente e fazer isso. Eu direi ao passar o mouse sobre a etiqueta âncora, farei algumas mudanças acontecerem com a div com a classe de onda, que é a div azul claro. Vou adicionar top 0, então ele volta para cima e cobre o botão. E para que isso aconteça sem problemas, eu irei aqui dentro da onda div e adicionarei transição. Ou 1 segundo. Eu também vou subir aqui dentro da etiqueta âncora e adicionar transbordamento. E agora, quando eu passar o mouse sobre o link, você pode ver o fundo azul se move para cima até que ele cobre o botão completamente e a imagem é animada e nos dá este efeito ondulado realmente legal. Temos uma coisa à esquerda, que é mudar a cor do texto dentro do botão ao passar o mouse para que possamos vê-lo. Farei isso rapidamente. Então, ao passar o mouse sobre o link, farei a mudança de cor para branco. Então, para fazer essa mudança acontecer sem problemas, vamos subir aqui e adicionar transição 0, 0, cinco segundos. E também vou entrar na onda div e adicionar índice Z negativo para que o texto apareça na frente dele. E agora, quando eu voltar e passar o mouse sobre o botão, você pode ver a cor do texto muda para branco enquanto o efeito ondulado está acontecendo. E é isso para esta lição, pessoal, e verei vocês na próxima. 33. 34 - efeito de botão criativo 2 cortes: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós estamos indo para criar este efeito agradável sobre o botão. Você pode ver que temos este botão e ele tem este corte nas bordas superior e inferior. E quando eu passar o mouse sobre ele, esse efeito acontece onde um fundo preto aparece e cresce, cobrindo o botão. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando uma tag âncora. E eu vou dizer botão. Então, abaixo disso, vou adicionar uma extensão. Então eu vou para o meu CSS e direcionar o link. E vou adicionar decoração de texto. Nenhum. Largura, 160 pixels, altura, 60 pixels, cor preta. Então, a fim de definir para o texto horizontal e verticalmente, adicionarei a altura da linha, 60 pixels. Em seguida, alinhar texto, centralizar. Então eu vou adicionar transformação de texto. Capitalizar. Tamanho da fonte, 25 pixels, posição, relativo. E finalmente, transição, todos os 0,2 segundos. E agora você pode ver que temos nosso link sentado no centro da nossa página. Tudo bem, vamos continuar. Vou mirar a extensão dentro da ligação. E vou adicionar posição, largura absoluta, 100%, altura, 100% também. Em seguida, topo 0, esquerda 0. Em seguida, vou adicionar cor de fundo, vermelho e borda. Dois pixels, preto sólido. E agora você pode ver que temos um fundo vermelho que tem a mesma largura e altura que o botão. E é arredondado com uma borda preta de dois pixels. Queremos apenas as fronteiras. Não queremos este fundo vermelho. Então eu vou voltar e mudar a cor do fundo de vermelho para transparente. Certo, agora queremos criar as estacas que existem nas bordas superior e inferior. Vamos usar o elemento pseudo antes do span para criar isso. Então eu vou mirá-lo. Em seguida, adicione conteúdo. Cordas vazias, posição, largura absoluta, apenas 8%, altura, 500 por cento. Em seguida, cor de fundo, vermelho por enquanto. E agora vocês podem ver que temos esse fundo vermelho que tem uma largura de 8% da extensão e uma altura de 500 por cento. E está sentado bem aqui. Então vamos voltar e centralizado dentro do botão. Vou adicionar top 50%, esquerda. 50 por cento. Então transforme. Traduzir, 50 por cento negativos e 50 por cento negativos. E agora você pode ver que o fundo vermelho agora está centrado dentro do botão, mas você não pode ver que ele está cobrindo o texto dentro do botão. Quero fazer com que o texto apareça na frente dele. Então eu vou voltar para dentro do seletor de span e adicionar z index negativo. Eu também vou aqui dentro do elemento pseudo antes e eu vou adicionar girar negativo 60 graus. E agora você pode ver que o texto está aparecendo na frente do fundo vermelho, que agora é girado em 60 graus no sentido anti-horário. Tudo bem, agora, vamos trabalhar no efeito pairando. Ao passar o mouse sobre o link, eu quero que este fundo vermelho tenha uma largura de 100% em vez de 8%. Então, ele vai cobrir o link completamente. Então eu vou voltar aqui. E ao passar o mouse sobre o link, vou mirar que antes do pseudo-elemento do span. E eu vou definir sua largura para 100%. Eu também vou definir sua cor de fundo para preto em vez de vermelho. Então, para que essa mudança aconteça sem problemas, eu vou subir aqui dentro do pseudo elemento antes e adicionar transição ou 0,2 segundos. E agora, quando eu passar o mouse sobre o link, você pode ver a largura do fundo vermelho fica mais larga até que ele cobre o link e a cor muda para preto também. É por isso que não podemos mais ver o texto. Então eu vou voltar para o meu CSS e quando passar o mouse sobre o link, eu vou ter sua cor mudar para branco para que possamos vê-lo. E agora, quando eu passar o mouse sobre o botão, você pode ver que somos capazes de vê-lo porque a cor é branca agora. Tudo bem. Agora estou pairando. Eu quero fazer o fundo vermelho girar também, não apenas ter seu aumento de largura, eu queria girar em 60 graus, por exemplo. Então eu vou aqui e copiar esta linha de código e colá-lo no efeito de pairar e apenas mudar negativo 60 graus para 60 graus. E agora você pode ver quando eu passar o mouse sobre o link, o fundo vermelho gira em 60 graus enquanto sua largura está aumentando. Tudo bem, agora, a única coisa que resta é mudar a cor do fundo vermelho e torná-lo branco como o corpo, para que tenhamos esses dois cortes. Então eu vou voltar e mudar esta cor vermelha para branco. Eu também vou subir aqui dentro do seletor de link. E eu adicionarei transbordamento escondido. E agora você pode ver que temos essas estacas nas bordas superior e inferior porque a cor do fundo agora é branca, como a cor do corpo, não vermelha. E quando eu passar o mouse sobre o botão, você pode ver esse efeito acontece onde o fundo branco muda para preto e sua largura aumenta enquanto gira de 60 graus negativos para 60 positivos, dando-nos o efeito que queremos. 34. 35 - efeito de botões de distorção: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este efeito agradável sobre o botão. Você pode ver que temos essas duas partes são parte vermelha à esquerda e a parte azul à direita. E as duas partes estão inclinadas ao longo do eixo x. E você também pode ver a parte vermelha é deslocada um pouco para o topo, enquanto a parte azul é deslocada para o fundo. E quando passamos o mouse sobre o botão, esse efeito acontece. Você pode ver que as duas partes mudam suas posições. A parte azul se move para o lado esquerdo e a vermelha se move para o lado direito. E o grau distorcido de ambos se torna 0 novamente. Então vamos criar esse efeito. Vou começar aqui no meu HTML, adicionando uma tag âncora e dizer botão. Em seguida, eu vou para o meu CSS e segmentar a tag âncora e adicionar transformação de texto. Maiúsculas, texto, decoração. Nenhum. Peso da fonte, 700, posição, relativo. Em seguida, espaçamento de letras, sete pixels. Preenchimento, 18 pixels da parte superior e inferior e 30 pixels da esquerda e da direita. Então vou adicionar fundo, transparente, tamanho da fonte, 28 pixels. E finalmente, cor branca. Agora você pode ver o link parece da maneira que queremos, e ele tem um fundo transparente porque vamos usar os pseudo elementos antes e depois para criar os fundos vermelhos e azuis. Então vamos voltar e fazer isso. Vou direcionar o pseudo elemento antes da tag âncora e adicionar conteúdo. Cordas vazias. Posição, absoluta, depois altura. 100%, pois tem a mesma altura que a marca âncora, a largura de 50 por cento, porque tem metade da largura do link. Então eu vou adicionar esquerda negativo 1 por cento. Em seguida, cinco pixels negativos superiores. Então esta será a parte vermelha que fica no lado esquerdo e é deslocada um pouco para o topo. Então, finalmente, vou adicionar cor de fundo, esta curva vermelha. E agora você pode ver que a parte vermelha está sentada bem aqui e ocupando 50% das larguras do link. Vamos voltar aqui. E para inclinar o fundo vermelho, adicionarei Transform Skew 30 graus. Também adicionarei um negativo de índice z para que o texto apareça na frente da parte vermelha. Então, finalmente, vou adicionar transição ou 0,3 segundos. E este valor cúbico de Bezier. E agora você pode ver que a parte vermelha está distorcida e o texto está aparecendo na frente dela. Muito bem, vamos voltar e trabalhar no efeito de pairar. Ao passar o mouse sobre o link, queremos que o fundo vermelho se mova para o lado direito e volte para um grau de inclinação 0. Então eu vou aqui e dizer ao passar o mouse sobre a tag âncora, eu vou fazer algumas alterações no elemento pseudo antes. Vou adicionar Transform Skew volta a 0 graus, em seguida, esquerda 50 por cento. Então, ele se moverá para o lado direito. E, finalmente, top 0. E agora, quando eu passar o mouse sobre o link, você pode ver a parte vermelha se move para cobrir o lado direito e é distorcido grau torna-se 0. Certo, vamos voltar e trabalhar na parte azul. Vou aqui copiar este código, colá-lo novamente, e mudar antes para depois. Em seguida, eu vou mudar Top 25 pixels, para que ele será deslocado cinco pixels para o fundo. Eu também vou mudar para a esquerda, 251%, então ele vai sentar no lado direito, não na esquerda. Eu também mudarei a cor de fundo para esta cor azul. E agora você pode ver que a parte azul está sentada do lado direito. Vamos trabalhar no efeito de pairar. Voltarei aqui e trocarei antes para depois. E eu vou mudar para a esquerda para 0 em vez de 50 por cento para que o fundo azul se mova para cobrir o lado esquerdo. E agora você pode ver caras, quando eu passar o mouse sobre o link, a parte azul se move para cobrir o lado esquerdo junto com o fundo vermelho. E este é o efeito exato que queremos, o que parece muito legal. 35. 36 - efeito de botão de pulsing criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este efeito agradável sobre o botão. Você pode ver quando eu passar o mouse sobre o botão, este efeito acontece quando temos um fundo branco que fica maior, bem desaparecendo. E o link em si se move um pouco para o topo e alguma sombra de caixa aparece abaixo dele. E ao clicar no link, ele se move um pouco para a parte inferior e o valor da sombra muda. Então vamos ver como podemos criar esse efeito. Vou aqui adicionar uma etiqueta de âncora. E eu vou dizer, paira-me. E eu vou para o meu CSS para segmentar a tag âncora e adicionar posição. Absoluto. Decoração de texto. Nenhum. Transformação de texto. maiúsculas. Preenchimento, 25 pixels da parte superior e inferior e 50 pixels da esquerda e da direita. Cor de fundo. Cor branca. Esta cor cinza. Em seguida, o raio da borda, 100 pixels. Tamanho da fonte 24 pixels. E finalmente transitou ou 0,2 segundos. E agora você pode ver que o link está exatamente do jeito que queremos. Vamos voltar e trabalhar no efeito de pairar. Vamos criar o fundo branco que fica maior usando o elemento pseudo antes. Então eu vou aqui e selecionar o pseudo elemento antes da tag âncora. E vou adicionar conteúdo, cadeias vazias, posição absoluta, topo 0 e esquerda 0 também. Então queremos que ele ocupe toda a largura e altura do link. Então vou adicionar largura 100% e altura 100% também. E então adicionarei cor de fundo, branco e raio de borda 100 pixels. Então, finalmente, a transição 0, 0. E agora você pode ver que temos um fundo branco que fica na frente do link e está cobrindo. E é por isso que o texto não é visível. Então vamos voltar aqui e adicionar índice Z negativo 1. E agora você pode ver que o texto está visível novamente. Tudo bem? Eu direi ao passar o mouse sobre a tag âncora, selecionarei o pseudo elemento antes. E queremos que o fundo branco fique maior. Então eu vou adicionar a escala de transformação x 1.4 e escala por que 1.6. Então, abaixo disso, adicionarei opacidade 0. E agora você pode ver quando eu passar o mouse sobre o link, este efeito acontece com o fundo branco fica maior enquanto sua opacidade diminui, dando-nos este efeito legal. Tudo bem, estou pairando. Nós também queremos ligar para mover um pouco para o topo e ter alguma sombra abaixo dele. Então eu vou voltar aqui e dizer, ao passar o mouse sobre a tag âncora, vou adicionar transformar, traduzir y negativo 3 pixels. Assim, o link moverá três pixels para o topo e a caixa de sombra, 0 ao longo do eixo x, depois 10 pixels ao longo do eixo y, depois um valor de desfoque de 20 pixels. E, finalmente, a cor da sombra será RGBA, 0.2000. E agora você pode ver quando eu voltar e passar o mouse sobre o link, ele se move um pouco para o topo e nós temos uma sombra que aparece abaixo dele. Nós única coisa que resta é quando clicar no link, nós queríamos mover um pouco para o fundo novamente e a caixa-sombra para ser menor. Então eu vou voltar aqui e dizer um cólon ativo. Então, isso significa que ao clicar no link, em seguida, dentro que eu vou adicionar transformar, traduzir Y negativo um pixel. E vou copiar a propriedade da sombra da caixa. Cole novamente e altere 10 pixels para cinco pixels, 20 pixels para 10 pixels. E agora, quando eu vou e clique no link, você pode ver que ele se move um pouco para o fundo e a caixa de sombra diminui, dando-nos o efeito exato que queremos. 36. 37 - efeito de botão de dedo diagonal usando bordas: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este efeito agradável sobre o botão. Você pode ver quando eu passar o mouse sobre o link, esse efeito legal acontece. Vamos criar esse efeito usando a propriedade border e você vai ver como. Então. Vamos para o nosso arquivo HTML, em seguida, adicionar uma tag âncora. Então, dentro dessa etiqueta âncora, diremos botão. Em seguida, irei para o meu CSS e direcionarei a tag âncora. Em seguida, adicione decoração de texto. Nenhum. Posição, parente. Dois 150 pixels e altura 80 pixels. Em seguida, para centralizar o texto dentro do link, vamos adicionar alinhar texto, centro e altura da linha, 80 pixels. Então vou adicionar cor. Esta cor roxa agradável e borda. Para pixels. Sólido. Nossa cor roxa. Em seguida, para aumentar o tamanho da fonte, adicionarei o tamanho da fonte 24 pixels. Em seguida, espaçamento entre letras, três pixels para obter algum espaçamento entre as letras. Em seguida, transformação de texto, maiúsculas e, finalmente, transição ou 0,5 segundos. Então agora você pode ver que o link está olhando exatamente do jeito que queremos. Muito bem, vamos trabalhar no nosso efeito de pairar. Irá criar isso usando os pseudo elementos antes e depois. Mas vamos começar com o pseudo elemento antes primeiro e entender como o efeito está acontecendo. Em seguida, vamos usar o depois pseudo elemento para criá-lo. Então eu vou direcionar o pseudo elemento antes da tag âncora. E eu vou adicionar conteúdo strings vazias, posição absoluta 0, esquerda 0, inferior 0, e escrever 0 também. Em seguida, adicionarei uma cor de fundo verde temporária. Então agora você pode ver que temos este fundo verde que cobre o link completamente porque dissemos as propriedades superior, esquerda, inferior e direita para 0. Muito bem, vamos voltar e remover este fundo verde. E, em vez de planos de fundo, vamos contornar os 40 pixels, vermelho sólido por enquanto. Então, como você pode ver, agora temos essa borda vermelha que tem uma largura de 40 pixels. E escolhemos 40 pixels especificamente porque a altura do link é de 80 pixels. A borda agora está cobrindo metade da altura do link, como você pode ver. Tudo bem, eu vou voltar aqui e adicionar borda inferior, 40 pixels, sólido, verde. E agora, como você pode ver, temos uma borda inferior verde que tem uma largura de 40 pixels e está cobrindo a metade inferior do link. Tudo bem, finalmente, eu vou voltar e adicionar fronteira, certo? 40 pixels, amarelo sólido. E agora você pode ver que temos essa borda amarela direita que tem uma largura de 40 pixels também. E eu acho que esta é praticamente a bandeira da África do Sul ou algo assim. Tudo bem, e se eu voltar aqui e mudar a cor da borda direita para transparente em vez de amarelo? Você pode ver agora que esta borda direita é transparente e está mostrando o link por trás dela. Tudo bem, eu vou voltar novamente e adicionar transição ou 0,5 segundos. Em seguida, a fim de tornar o texto visível atrás do fundo, eu vou adicionar z index negativo. Então eu vou finalmente adicionar transformar traduzir x negativo 100%. E agora você pode ver o pseudo elemento antes agora é deslocado para a esquerda e as bordas são deslocadas com ele. Porque nós dissemos que eles são função Traduzir para negativo 100. Tudo bem, ao passar o mouse sobre o link, queremos fazer o pseudo elemento antes voltar para sua posição original para encobrir o link. Então eu vou aqui e eu vou dizer quando passarmos o mouse sobre a tag âncora, eu quero fazer algumas mudanças acontecerem com o pseudo elemento antes. Vou adicionar transformar, traduzir X de volta para 0% novamente. E agora você pode ver quando eu passar o mouse sobre o link que antes pseudo elemento volta para a sua posição original. Tudo bem, a única coisa que resta é mudar a cor das bordas para a nossa cor roxa. Vou mudar a cor da borda superior para roxo. E farei o mesmo para a fronteira inferior também. Incrível. Agora vamos criar o depois pseudo elemento para completar o nosso efeito, eu vou aqui e copiar o elemento pseudo antes, colá-lo novamente e mudar antes para depois. Então eu vou mudar de fronteira para borda esquerda para que a parte transparente vai estar sentado no lado esquerdo, não o direito. Então eu também mudarei o valor da função de tradução para 100% em vez de 100% negativo para que o elemento após pseudo se mova para a direita, não para a esquerda. Eu também copiarei o efeito pairando. Cole e mude antes para depois. E agora você pode ver o pseudo elemento depois está localizado no lado direito do link e tem a parte transparente à esquerda. Ao passar o mouse sobre o link, as duas partes vêm para encobrir o link, dando-nos este efeito legal. Finalmente, vamos mudar a cor do texto do link para branco. Quando passarmos por cima dele. Eu direi ao passar o mouse sobre a etiqueta âncora, mudarei a cor para branco. Eu também vou subir aqui dentro do link e adicionar overflow escondido para fazer as duas partes escondidas fora da etiqueta âncora. E agora você pode ver quando eu voltar e passar o mouse sobre o link, os dois pseudo elementos se juntam para encobrir a etiqueta âncora e eles nos dão o nosso efeito realmente legal. 37. 39 - efeito de imagem criativa 1: Olá a todos. Nesta nova lição do curso, estaremos criando este efeito de fade de aparência legal no pairar para esta imagem. Então, quando eu passar o mouse sobre a imagem, você pode ver que ela está ampliando e girando um pouco para a direita. E a legenda está desvanecendo com um título de fundo preto semitransparente e um parágrafo. Então vamos ver como podemos fazer isso. Vou para o meu HTML e dentro do corpo, vou adicionar uma div e dar-lhe uma classe de recipiente. Esta div irá conter tanto a imagem como a legenda, que significa que será o recipiente externo para eles. Então, dentro dela, primeiro adicionarei nossa imagem. Então eu vou dizer fonte de imagem, e vamos adicionar nossa imagem. Ótima. Agora precisamos adicionar nossa legenda. Vou abaixo da imagem e adicionar uma div com uma classe de legenda. E, em seguida, dentro dele, vamos adicionar um H1 e vamos apenas dizer legenda incrível. Em seguida, vou adicionar uma tag de parágrafo. E dentro dela, eu vou dizer que você pode escrever o que quiser aqui. Agora, quando visualizamos isso no navegador, você pode ver que isso não parece tão bom. Precisamos adicionar alguns estilos para torná-lo melhor. Então, de volta ao nosso CSS. Você pode ver que eu já adicionei alguns estilos ao corpo para apenas centralizar qualquer coisa nele vertical e horizontalmente usando Flexbox. Além disso, eu adicionei esta família de fontes Leto, que eu tenho de fontes do Google também. Agora, vamos começar por segmentar a div com a classe de contêiner. Vou adicionar largura, 500 pixels, altura 500 pixels também. Posição relativa. E agora você pode ver que a imagem é realmente muito grande para o recipiente. Podemos corrigir isso simplesmente voltando ao nosso CSS e direcionando a imagem e adicionando 100% de largura. Então ele redimensiona para ocupar toda a largura de seu recipiente. E você pode ver que agora está parecendo melhor. E temos uma legenda aqui embaixo. Agora, vamos continuar. Vou direcionar a div com a classe de legenda, que contém o H1 e o parágrafo. Em seguida, vou adicionar posição absoluta, topo 0, esquerda 0, em seguida, altura 100% para ocupar a altura total do recipiente. E largura 100% para ocupar a largura total do recipiente também. E agora você pode ver que a legenda está sentada em cima de nossa imagem tomando toda a sua largura e altura. Então, por exemplo, se eu for aqui e adicionar cor de fundo, preto para a legenda. Você pode ver que está ocupando toda a largura e altura. Bom. Vamos voltar e remover este fundo preto e continuar a trabalhar. Agora, precisamos enviar para o conteúdo dentro da legenda, ou seja, o H1 e o parágrafo. Faremos isso usando o Flexbox. Então eu vou para a direita aqui e adicionar display, flex, em seguida, coluna de direção flex, modo que o H1 e o parágrafo tipo de empilhar um acima do outro. Em seguida, vou adicionar justificar centro de conteúdo. Alinhe os itens no centro também, para que o conteúdo seja centralizado verticalmente e horizontalmente dentro da legenda. E então eu vou adicionar cor branca. Agora, vamos adicionar alguns estilos ao H1 e ao parágrafo. Vou mirar o H1 dentro da legenda. E eu vou adicionar texto transformar, maiúsculas e a margem 0, modo que ele parece muito mais agradável e mais apertado. Em seguida, vou direcionar o parágrafo dentro da legenda e adicionar tamanho da fonte 18 pixels. Em seguida, transforme texto. Capitalizar. Ótima. Agora temos tudo exatamente como queremos e precisamos nos concentrar no efeito fade in hover. Então, se dermos uma olhada em nossa demonstração, você pode ver que a legenda é invisível e, ao passar o mouse sobre ela, a fase de captura com um fundo em branco que tem alguma transparência. Então vamos realmente fazer isso. Primeiro de tudo, precisamos tornar a legenda invisível. Então eu vou direto aqui dentro do seletor de legendas e eu vou adicionar opacidade 0. E agora você pode ver o H1 e o parágrafo não são mais visíveis. E eu quero que eles sejam visíveis novamente quando eu passar o mouse sobre o div. Então eu vou aqui mesmo. E quando eu passar o mouse sobre o recipiente, Eu quero fazer algumas alterações aconteceu com a div legenda e queria fazer opacidade um novamente. E para ver a mudança sem problemas, vou subir aqui dentro da legenda e adicionar transição. Todos os zeros. Cinco segundos. Bom. Agora, quando eu passar o mouse sobre a div, você pode ver a captura desaparece lindamente. E agora queremos adicionar o fundo também. Então vou entrar na div com a classe de legenda e adicionar fundo RGB, 0, 0, 0, 0, 0. Portanto, esta será uma cor preta com uma opacidade de 0, que significa que será transparente. Vou copiar isso e descer aqui, colá-lo de novo. E mudarei a opacidade para 0,5, para que não seja mais visível. E agora, quando eu voltar e passar o mouse sobre a div, você pode ver o fundo se desvanece com a legenda. Bom. Agora queremos fazer com que a imagem amplie e gire ao passar o mouse. Então eu vou descer aqui e copiar isso. Eu quero fazer mudanças aconteceu com a imagem desta vez. Então eu vou adicionar escala de transformação em 1.3. Assim, a imagem aumentará 1,3 vezes, dando-nos o Zoom em vigor. Então eu adicionarei girar em 15 graus. Agora, quando eu voltar e passar o mouse sobre a div, você pode ver que a imagem aumenta e gira, mas está transbordando indo para fora do contêiner. E podemos corrigir isso facilmente, voltando para o contêiner e adicionando overflow oculto para que a imagem permaneça dentro dos limites do contêiner. Agora, vamos tentar. Incrível. Agora temos o fade em vigor com o zoom e rotação. E parece ótimo. 38. 40 - efeito de imagem criativa 2: Olá a todos. Nesta lição, estaremos criando este interessante efeito de passar o mouse. Então, quando eu passar o mouse sobre a imagem, a legenda desliza da esquerda para a direita com um fundo preto semitransparente. E a imagem amplia e gira, assim como na lição anterior. Então vamos ver como podemos fazer isso. Continuaremos trabalhando com a mesma imagem e legenda que criamos na lição anterior. Para isso e algumas lições futuras, só mudamos será no próprio efeito. Então aqui no meu CSS, eu tenho os mesmos estilos que adicionamos antes, mas eu acabei de remover os estilos responsáveis pelo efeito de pairar. Então você pode dizer que estes serão os estilos iniciais para as próximas lições, e nós vamos inseri-los para criar um efeito diferente e cada lição. Então, se dermos uma olhada nisso no navegador, você pode ver que temos tudo no lugar. A imagem está ocupando toda a largura do contêiner na legenda que fica em cima dela. Bom. Agora vamos começar a trabalhar. Eu vou aqui dentro do seletor de legenda e eu vou adicionar cor de fundo R, G, B um 0.500, modo que ele vai levar uma cor de fundo semitransparente. Agora, se dermos uma olhada em nossa demonstração, você pode ver que a legenda está traduzindo do lado esquerdo do contêiner para o contêiner novamente. Assim, a posição inicial está à esquerda do recipiente. Então eu vou voltar para o meu CSS e dentro da div legenda, eu vou adicionar transformar traduzir X menos 100 para que ele se move para a esquerda em 100% de sua largura. Então eu vou descer aqui. E quando eu passar o mouse sobre o recipiente, Eu quero fazer algumas alterações aconteceu com a legenda. Quero que volte à sua posição original. Então eu vou adicionar transformar, traduzir X 0. E agora, quando eu voltar e passar o mouse sobre o contêiner, você pode ver as legendas brancas suavemente da esquerda para a direita. Agora, resta uma coisa, fazer a imagem ampliar e girar. Fizemos isso na lição anterior. Então vamos fazer a mesma coisa aqui. Aqui no meu CSS. Quando passarmos o mouse sobre o recipiente, Eu quero fazer algumas alterações aconteceram com a imagem. Vou adicionar escala de transformação em 1.3 e vou girar em menos 15 graus desta vez. Então, quando eu passar o mouse sobre o contêiner, você pode ver o efeito de furto está acontecendo com o Zoom In e a rotação da imagem ocorrendo ao mesmo tempo. Agora que entendemos o conceito por trás deste efeito de furto, podemos facilmente fazer o furto acontecer da direita para a esquerda ou de cima para baixo. Então vamos dizer que queremos fazê-lo deslizar de cima para baixo. A posição inicial deve estar no topo da imagem. Então vamos mudar isso. Então eu vou para o meu CSS e ir para a legenda div e mudar isso, traduzir x para y. e eu vou descer aqui e mudar este x para y também. E fazendo isso, a legenda se sentará acima da imagem e nos moveremos verticalmente para cobrir a imagem quando eu passar o mouse sobre o contêiner. Então eu quero que você tente e faça a legenda deslizar da direita para a esquerda e, em seguida, de baixo para cima. E você pode me dizer se você é capaz de fazê-lo no Q e uma seção. 39. 41 - efeito de imagem criativa 3: Olá a todos. Nesta lição, vamos criar este efeito de limpeza. Então, quando eu passar o mouse sobre a div, você pode ver a imagem se move de sua posição para a direita e a legenda vem da esquerda para tomar seu lugar. Isso é muito semelhante à lição anterior, mas há algumas diferenças. Primeiro, a cor de fundo aqui é um preto sólido. Não é mais semitransparente. E o comportamento da imagem é diferente. Eu acho que você se lembra na lição anterior a imagem com zoom in e gire. Mas nesta lição, a imagem realmente traduz em, tipo de dá seu lugar para a legenda. Então vamos ver como podemos fazer isso. Aqui. Eu tenho o meu arquivo CSS inicial e aqui está o que obtemos dele. Então, primeiro de tudo, eu vou para a legenda aqui e adicionar cor de fundo preto. Então, a fim de fazê-lo tomar sua posição inicial no lado esquerdo da div, vamos adicionar transformar traduzir X menos 100% para que ele se mova para a esquerda. Bom. Então agora você pode ver a legenda movida para a esquerda e não está mais acima da imagem. Agora, queríamos voltar à sua posição. Quando pairarmos sobre a div, eu desço aqui. E quando passarmos o mouse sobre o recipiente, vou adicionar transformar traduzir X 0, modo que ele retorna à sua posição. E quero que a imagem se mova para a direita, deixando o lugar aberto para a legenda. Então eu vou aqui e adicionar transformação, traduzir X 100% desta vez. E agora, quando eu passar o mouse sobre a div, você pode ver a imagem se move para a direita, deixando seu lugar para uma legenda que vem da esquerda. E é exatamente assim que queremos que pareça. Também podemos fazer isso acontecer de cima para baixo. Tudo o que precisamos mudar é todo o Translate X em nosso código para traduzir y. então eu vou voltar para o meu CSS e fazer isso. E agora você pode ver que está acontecendo de cima para baixo. Agora, eu quero que você tente fazer isso acontecer da direita para a esquerda e de baixo para cima. E deixe-me saber na seção de perguntas e respostas, se você é capaz de fazê-lo. 40. 42 - efeito de imagem criativa 4: Olá a todos. Nesta aula, nós vamos aprender como criar este efeito de pairar imagem. Então, se você olhar para ele, você pode ver que a legenda está se movendo de baixo e não está ocupando a altura total da div, ele só ocupa a largura total. Você também pode ver que a imagem está se movendo para cima na mesma distância que a legenda se move para cima. Então vamos ver como podemos fazer isso. Então aqui no meu co-editor, eu tenho os arquivos iniciais para todos os nossos efeitos de imagem. E aqui está o que parece no navegador. Então vamos começar a trabalhar neste exemplo específico. Primeiro de tudo, eu vou para a direita aqui na legenda dar, e eu vou adicionar cor de fundo. Preto. Lembre-se, nós legenda não está ocupando a altura total. Então eu vou subir aqui e mudar a altura para apenas 30% da altura do contêiner. Agora você pode ver que a legenda está ocupando apenas 30 por cento da altura da div. Mas há um problema. O cartão está aparecendo na parte superior da div e queremos que ele apareça na parte inferior. Não é um grande problema. Podemos corrigi-lo facilmente indo aqui e mudando de cima para baixo. Agora você pode ver que a legenda está na parte inferior da div. Bom. Agora queremos que ele se mova para baixo para que ele volte à sua posição quando eu passar o mouse sobre a div. Então eu vou para a legenda e adicionar transformar, traduzir y 100%. Então, o que se moverá para baixo em 100% de sua altura, que é na verdade 30% da altura do contêiner. Agora você pode ver que ele não é mais visível como ele se moveu atrás da div. Agora, quando passarmos sobre a div, queremos que ela volte ao seu lugar original. Então eu vou aqui e adicionar transformar, traduzir Y 0. E agora ele volta. Também queremos mover a imagem para cima pela mesma distância. Então eu vou aqui e adicionar transformar, traduzir y menos 30 para que ele se mova para cima, deixando um espaço para a legenda. E agora você pode ver a imagem se move para cima, dando-nos este efeito agradável. 41. 43- efeito de imagem criativa 5: Olá a todos. Bem-vindo a esta nova lição do curso. Nesta aula, nós vamos aprender como criar este efeito interessante sobre a imagem. Então, quando eu passar o mouse sobre a imagem, você pode ver que um fundo semitransparente aparece de baixo e se move para cima até o topo e a legenda aparece acima dela. Mas se observarmos de perto, podemos ver a captura e aparece um pouco mais tarde do que o fundo. E quando passarmos o mouse, a legenda desaparece primeiro antes do fundo azul. Por isso, vamos usar alguns atrasos de transição para fazer isso. Tudo bem, então, como de costume, vamos começar escrevendo a marcação do nosso HTML. Vou começar aqui adicionando um div e dando-lhe uma classe de figo. Em seguida, dentro dele, vou adicionar uma tag de imagem, e vamos adicionar nossa imagem. Então precisamos adicionar a legenda. Então, abaixo da imagem, vou adicionar outra div e dar-lhe uma classe de legenda. E dentro desta div, vou adicionar um H3, dizer legenda incrível. E abaixo disso, vou adicionar H5 e dizer que você pode escrever qualquer coisa aqui. Então, quando visualizamos isso no navegador, você pode ver que isso está parecendo feio. Então vamos para o nosso CSS e torná-lo um pouco mais agradável. Primeiro, vou mirar a div com a classe de figo. E eu vou adicionar largura 500 pixels. Em seguida, cor, branco, família de fontes, estrada de ferro, raio de fronteira 10 pixels. Posição relativa. Certo, vamos continuar andando. Vou mirar a imagem dentro da div da figa. E eu vou definir sua largura para 100%. Então ele vai ocupar toda a largura de sua div pai, que é 500 pixels. Neste momento, parece muito melhor. Temos a nossa imagem e a legenda fica abaixo dela. Golpe. Agora vamos trabalhar no fundo semitransparente que desliza de baixo para cobrir a imagem. Vamos criá-lo usando o elemento pseudo antes. Então eu vou para o meu CSS e seguro cólon vago antes. E eu vou adicionar conteúdo, posição vazia, absoluto, topo, 0, esquerda 0. E queremos que ele ocupe toda a largura e altura do figo. Então vamos dizer largura 100% e altura 100% também. Em seguida, cor de fundo, esta cor esverdeada. E porque é semitransparente, vamos adicionar opacidade 0,5. Lá vamos nós. Você pode ver que o fundo está agora ocupando toda a largura e altura do figo para que ele até cobre a legenda. Agora vamos trabalhar na legenda e centralizá-la horizontalmente e verticalmente dentro da figo. Então eu vou voltar para o meu CSS e segmentar a div com a classe de legenda dentro do figo. Então vou adicionar posição, absoluto, superior, 0, largura 100%, e altura 100% também. Em seguida, enviaremos para o H3 e H5 dentro dele usando flexbox. Então, vamos adicionar display flex, em seguida, flex coluna direção para fazer o H3 e H5 sentar-se um abaixo do outro. Você vê que ele está definido como linha por padrão, o que irá exibi-los lado a lado em uma linha. Mas queremos que eles estejam em uma coluna. Então, a fim de centrá-los, vamos adicionar um centro de itens de linha. E, finalmente, justifique o centro de conteúdo também. E agora você pode ver que a legenda está centrada horizontalmente e verticalmente dentro da div figo. Mas o conteúdo dentro da legenda, que é o H3 e H5 bem aqui. E com bom aspecto. Então vamos atacá-los e fazê-los parecer melhor. Vou para o meu CSS e adicionar fig H3 vírgula e, em seguida, fig. H5. E vou adicionar margem 0, em seguida, espaçamento entre letras. Um pixel. Então, abaixo disso, vou mirar o H3 individualmente. Em seguida, vou adicionar texto transformar, maiúsculas e font-weight 400. Então precisamos de um pouco de espaçamento abaixo dele. Então vamos adicionar margem inferior, apenas cinco pixels. E abaixo disso, vou mirar o H5 desta vez. E queremos adicionar um pouco de fundo a ele. Então vou adicionar cor de fundo, esta cor acastanhada. E também adicionarei um preenchimento de três pixels da parte superior e inferior e cinco pixels da esquerda e da direita. Incrível. Então aqui está como o figo parece. Você pode ver o fundo semitransparente está cobrindo e a legenda desde ali mesmo no centro. Agora precisamos trabalhar no efeito pairando. Então, se dermos uma olhada rápida em nossa demonstração, você pode ver que o fundo está se movendo de baixo para cima. E podemos fazer isso. Sem problema. Eu só vou voltar para o meu CSS e ir para dentro do pseudo elemento antes. E queremos posicionar o fundo abaixo do figo para que, quando passarmos o mouse, ele retorne à sua posição original. Então eu vou adicionar transformar, traduzir e por quê? 100%? Então agora você pode vê-lo movido para baixo em 100% de sua altura. E como sua altura é igual a 100% da altura do figo, ele moveu uma distância igual à altura do figo. Então, agora está posicionado logo abaixo do figo. Certo, em seguida, vamos torná-lo invisível. Fora do figo. Irei ao eleitorado de figos, e adicionarei transbordamento oculto. E agora você pode ver que não é mais visível. Agora estou pairando sobre o figo. Queremos que o fundo deslize novamente para a sua posição original. Então vamos fazer isso. No meu CSS, eu vou aqui. E quando pairando sobre o figo, eu quero fazer algumas mudanças aconteceram no fundo, que é o pseudo elemento antes. Quero fazê-la voltar à sua posição original. Então eu vou adicionar transformar, traduzir Y 0. E é claro que queremos que isso aconteça sem problemas. Então eu vou subir aqui dentro do seletor de elementos pseudo antes, e eu vou adicionar transição todos os 0.25 segundos para que o movimento ascendente vai acontecer sem problemas. E agora, quando eu passar o mouse sobre o figo, você pode ver que o fundo está se movendo de baixo para cima cobrindo o figo. E quando eu passar o mouse para longe, ele retorna e senta-se abaixo da figura novamente. Mas se olharmos para a nossa demo de novo, podem ver que estou pairando. O plano de fundo se move imediatamente para cobrir o figo. Mas quando pairar em espera um tempo muito curto até que a legenda desapareça e depois disso, ela desaparece também. Você está vendo isso? Tudo bem. Podemos fazer isso usando a função de atraso de transição. Então, de volta ao nosso CSS. Vou entrar no pseudo elemento antes novamente, e vou adicionar atraso de transição, apenas 0.25 segundos. E agora, quando eu passar o mouse sobre o figo, você pode ver os pesos de fundo por um tempo muito curto, 0,25 segundos para ser exato, então aparece. E quando pairar em peso 0,25 segundos, em seguida, desaparece. Mas queremos que espere apenas antes de desaparecer. Não queremos que espere quando pairarmos sobre o figo. Em outras palavras, queremos que ele apareça imediatamente, mas aguarde os 0,25 segundos antes de desaparecer. Então o que devemos fazer é ir até aqui. E eu estou pairando sobre o figo, vamos adicionar atraso de transição 0 segundos para o nosso fundo. Então agora o que vai acontecer aqui é quando eu passar o mouse sobre o figo, o fundo vai começar a se mover imediatamente porque eu disse o atraso de transição para 0 bem aqui. Quando eu pairar longe, ele vai esperar e 0,25 segundos e então ele vai desaparecer. Vamos dar uma olhada. Legal. Agora, precisamos trabalhar na legenda. Se dermos uma última olhada em nossa demonstração, você pode ver que quando passarmos o mouse, a legenda espera até que o fundo cubra o figo e então ele aparece. Então, vamos usar o atraso de transição para fazê-lo esperar 0,25 segundos antes de aparecer. Você também pode ver que ele está desvanecendo do topo a uma distância de cerca de 20 pixels ou mais. E finalmente, quando pairamos para longe, ele desaparece imediatamente. Agora. Tudo bem, então vamos para o nosso CSS e ir para o seletor de legendas. Em seguida, adicione transformação, traduza y menos 20 pixels, para que ele se mova para cima em 20 pixels. Então queremos que seja transparente. Então vamos adicionar opacidade 0 e finalmente, fazer a transição dos nossos 0,25 segundos. Tudo bem, agora, quando pairava sobre o figo, eu queria fazer algumas mudanças na legenda. Quero que a legenda desapareça novamente. Então eu vou adicionar opacidade um, e eu quero que ele volte para sua posição. Então eu vou adicionar transformar traduzir Y 0. E eu queria esperar antes que aparecesse. Ele deve aparecer após o plano de fundo aparecer. Então eu vou dar-lhe um atraso de transição 0.3 segundos. E agora, quando eu passar o mouse sobre o figo, você pode ver a legenda se desvanece bem de cima para baixo. 42. 44- efeito de imagem criativa 6: Olá a todos. Nesta lição, vamos criar este zoom agradável em efeito, ao passar o mouse sobre uma imagem. Você pode vê-lo ampliando e gira um pouco. E podemos fazer isso usando a função de escala e a função de rotação. Então, primeiro de tudo, eu vou direto aqui no meu HTML e adicionar uma div. E dentro dela, adicionarei minha imagem. Você pode ver que o tamanho da imagem é tão grande que está ocupando toda a tela. Então vamos para o nosso CSS. Vou direcionar a div que contém a imagem. Então eu vou definir sua largura para 300 pixels e sua altura para 400 pixels. Então eu vou adicionar borda, 50 pixels, branco sólido. Então eu vou direcionar a imagem e definir sua largura para 100, modo que ela obtenha 100% de seu recipiente, que é 300 pixels, então eu vou definir sua altura para 100% também. Sim, agora está muito mais bonito. Então eu vou adicionar transição transformar 1 segundo. E em seguida, quando eu passar o mouse sobre a imagem, eu queria ficar maior em tamanho e girar um pouco no sentido horário, como em nossa demonstração. Então eu vou dizer imagem na escala de transformação de pairar, Digamos 1.2. Assim, a largura e a altura aumentarão por essa proporção. Então eu vou adicionar um espaço e adicionar girar apenas nove graus. Agora, quando eu passar o mouse sobre a imagem, você pode ver que ela está ficando maior e sai da div contêiner, não se preocupe, podemos corrigir isso facilmente indo bem aqui dentro do contêiner e adicionando overflow escondido para que a imagem não sair mais do contêiner. E agora, quando eu passar o mouse sobre a imagem, você pode ver que estamos recebendo o zoom agradável nos efeitos de rotação. Nós queríamos. 43. 45 - efeito de imagem criativa 7: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este efeito agradável sobre a imagem. Você pode ver quando eu passar o mouse sobre a imagem, este efeito acontece onde temos um fundo cinza que vem do canto inferior direito até que ele cobre a imagem. Em seguida, este texto aparece. Temos um cabeçalho que vem do lado superior direito, um parágrafo que vem do lado inferior esquerdo, e um link que vem de baixo. Aprenderemos como criar tudo isso. Então, vamos primeiro começar criando o layout deste exemplo. Vou começar no meu HTML e eu vou adicionar um div, dar-lhe uma classe de recipiente. Então, dentro dele, adicionarei uma imagem. Então esta será a nossa imagem. Então, abaixo dele, vou adicionar outra div, dar-lhe uma classe de legenda. Então esta seria a div que contém todos os outros elementos. E dentro dele, vou adicionar um h2 e dizer imagem hover. Então, abaixo disso, adicionarei um parágrafo e adicionarei algum texto de demonstração. Então, finalmente, vou adicionar uma tag âncora e dizer Leia mais. Tudo bem, vamos ao nosso CSS para fazer com que esses elementos pareçam da maneira que queremos. Vou mirar o div com a classe de recipiente que tem todos os elementos dentro dele. E eu vou adicionar largura, 450 pixels, altura 300 pixels. Em seguida, posição relativa. Então eu vou direcionar a imagem e adicionar largura 100%. E agora você pode ver que o contêiner agora tem uma largura de 450 pixels e uma altura de 300 pixels, e a imagem está contida nele. Muito bem, vamos continuar a trabalhar. Vamos criar o fundo de sobreposição usando o elemento pseudo antes do recipiente. Então eu vou segmentar isso e adicionar conteúdo. Cordas vazias. Posição absoluta, superior, 0, esquerda 0, largura 101%, 100%. Cor de fundo. Esta cor cinza. Opacidade, 0,8. E finalmente transição ou 0,25 segundos. E agora você pode ver que o fundo cinza agora tem a mesma largura e altura que o recipiente e está cobrindo-o. Mas se você se lembrar, esse fundo cinza não aparece até que passemos o mouse sobre a imagem e apareça no canto inferior direito. E também foi girado em 45 graus. Então vamos mudar sua posição e girá-la. Voltarei aqui e adicionarei transformação. Traduza 550 pixels no eixo x e 300 pixels no eixo y. Então agora você pode ver que o fundo cinza está sentado nesta nova posição. Muito bem, vamos também girá-lo em 45 graus. Voltarei aqui e adicionarei girar 45 graus. Agora está girado. E, finalmente, ao pairar, queremos que ela se mova sobre a imagem e a cubra completamente. Então eu vou voltar aqui e eu estou pairando sobre o div com a classe de contêiner. Eu vou fazer mudanças aconteceu com o elemento pseudo antes, que é o fundo cinza. Vou adicionar transformar, traduzir, negativos 50 pixels no eixo x e negativos 150 pixels no eixo y. Então queremos mantê-la girada. Então eu também vou adicionar girar 45 graus. E agora, quando eu voltar e passar o mouse sobre a div do contêiner, você pode ver o fundo cinza se move em direção à imagem, mas não a encobre completamente. Abrange apenas uma pequena parte dela. Então, precisamos aumentar sua largura e sua altura para que ele o cubra completamente. Então eu vou voltar e mudar a largura para 120% e a altura para 205%. E agora o fundo cinza é muito maior. E quando eu passar o mouse sobre a imagem, você pode ver que o fundo cinza entra e encobre completamente, dando-nos o efeito que queremos. Certo, agora vamos trabalhar na legenda e estilizá-la. Vou mirar a div com a classe de legenda. Então eu vou adicionar posição, absoluto, topo, 0, esquerda 0 também. Em seguida, largura 100%, e altura 100% também. Em seguida, adicionarei uma cor de fundo temporária vermelha. E agora você pode ver a legenda está sentado em cima da div recipiente, porque dissemos que é propriedade posição para absoluto. Então, ele é posicionado em relação à div recipiente que tem uma propriedade de posição relativa. E também tem a mesma largura e altura que a div recipiente porque definimos sua largura e altura para 100%. Tudo bem. Agora queremos dar a captura o layout da nossa demo. Queremos o H2 no topo, depois o parágrafo no centro, e o link na parte inferior. E todos eles para serem centrados e ter o espaçamento adequado entre eles. Podemos fazer isso usando Flexbox. Então vamos aqui e adicionar display flex. Em seguida, para alinhar os elementos acima uns dos outros verticalmente, vamos adicionar coluna de direção flexível. Em seguida, para separá-los, vamos adicionar espaço de conteúdo justificar ao redor. Em seguida, a cor, o branco e o texto transformam maiúsculas. Então agora você pode ver que os elementos na Catherine Deneuve estão sentados um acima do outro e têm algum espaço entre eles. Vamos continuar. Vou mirar no H2. Em seguida, para centralizá-lo, vou adicionar texto align, center. Em seguida, tamanho da fonte, 17 pixels , preenchimento, 20 pixels, margem superior 20 pixels. E, finalmente, cor de fundo, RGB, 0.8000. E agora você pode ver que o H2 está sentado nesta posição no topo da div recipiente. Tudo bem? Se você se lembrar, ao passar o mouse sobre a imagem, o H2 se moveria do canto superior direito e comentaria nesta posição. Então vamos voltar e fazer isso. Eu vou aqui e adicionar transformar, traduzir 200 pixels no eixo x. Então, ele se move para 100 pixels para a direita e 200 pixels negativos no eixo y. Então ele se move 200 pixels em direção ao topo. Então eu adicionarei a transição 0, 0, 0,25 segundos. Então, ao passar o mouse sobre a div do contêiner, queremos que o H2 volte para sua posição original. Então eu vou dizer recipiente hover H2. E eu vou adicionar transformar, traduzir 0 e 0. E agora você pode ver que o elemento H2 está sentado em cima da div recipiente em seu canto superior direito. E quando passamos o mouse sobre o contêiner, ele retorna à sua posição original. Tudo bem, vamos trabalhar no parágrafo que eu vou apontar para ele. Em seguida, adicione o tamanho da fonte 16 pixels, largura, 80% da largura do contêiner. E para alinhá-lo no centro, eu vou. Alinhar auto, centralizar, depois alinhar texto, centralizar para centralizar o texto. E, finalmente, transição 0, 0. E agora você pode ver que o texto está centrado dentro da div recipiente e está ocupando 80 por cento de sua largura. E em nosso efeito, o texto vem do canto inferior esquerdo. Então vamos voltar e fazer isso. Vou voltar e adicionar transformar, traduzir negativo 200 pixels no eixo x. Assim, ele será deslocado para a esquerda em 200 pixels e 200 pixels no eixo y. Assim, ele será deslocado 200 pixels para a parte inferior. Então eu vou descer aqui. E ao passar o mouse sobre o recipiente, farei algumas mudanças acontecerem no parágrafo. Vou adicionar transformar, traduzir 00. E agora o parágrafo está sentado no lado inferior esquerdo. E quando passamos o mouse sobre o recipiente, ele volta à sua posição original. Tudo bem, agora o que resta é o botão ou o link. Então vamos discar. Eu vou mirá-lo. Em seguida, adicione texto, decoração. Nenhum. Cor de fundo, cor preta. Branco. Largura 100 pixels. Em seguida, preenchimento, 15 pixels. Margem, 20 pixels abaixo. Então novamente para centralizá-lo horizontalmente, vou adicionar align self, center. Então, finalmente, transição ou 0,25 segundos. E agora você pode ver que o botão parece exatamente do jeito que queremos, e ele está sentado no fundo. Tudo bem. Sabemos que o botão vem de baixo ao passar o mouse sobre a div recipiente. Então vamos posicioná-lo na parte inferior. Vou voltar aqui e adicionar transformar, traduzir y 100 pixels. Então, ao passar o mouse sobre o contêiner, farei algumas alterações acontecerem no link. Vou adicionar transformar, traduzir Y 0 novamente, então ele retorna à sua posição. E agora, quando eu voltar, você pode ver que o botão está sentado 100 pixels abaixo da div recipiente. E quando eu passar o mouse sobre ele, o botão retorna à sua posição original. Agora nos resta uma coisa, que é esconder todos esses elementos. Então, eles aparecem apenas ao pairar. Eu vou voltar para dentro do div recipiente e eu vou adicionar overflow escondido. E agora você pode ver todos eles desaparecerem. E quando pairando sobre o nosso recipiente div, eles aparecem novamente e nosso efeito acontece. Mas você pode ver ao pairar, todos eles aparecem imediatamente. Ao mesmo tempo. Seria bom se tivéssemos alguns atrasos de transição. Portanto, queremos que o plano de fundo de sobreposição apareça imediatamente sem demora. Depois disso, queremos que o H2 apareça. Em seguida, o parágrafo e, finalmente, o link na parte inferior. Então vamos voltar e adicionar isso. Irei aqui e adicionarei atraso de transição 0,3 segundos. Então isso significa que quando eu passar o mouse sobre o contêiner, vamos esperar 0,3 segundos. Então, ele aparecerá depois que o fundo estiver completamente visível. Então eu vou aqui e adicionar atraso de transição 0,4 segundos desta vez para que o parágrafo apareça ligeiramente após o H2. Em seguida, finalmente aqui e adicionar atraso de transição 0,5 segundos. Assim, o link aparecerá após 0,5 segundos de pairar sobre a div do contêiner. E agora, quando eu voltar e passar o mouse sobre a imagem, você pode ver o fundo aparece imediatamente. E depois disso, todos os três elementos aparecem, um após o outro com uma ligeira diferença de tempo. E quando pairando, todos desaparecem imediatamente ao mesmo tempo. Eles não aguardam porque a propriedade de atraso de transição é aplicada somente ao passar o mouse. Então o atraso acontece quando nós pairamos, e não acontece quando nós pairamos longe. É por isso que todos os elementos desaparecem imediatamente. E fazendo isso, terminamos esse efeito, e nas próximas lições veremos mais efeitos como esses neste exemplo. Vejo-te na próxima lição. 44. 46 - efeito de imagem criativa 8: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar outra imagem, efeito pairar. Você pode ver quando eu passar o mouse sobre a imagem, este efeito acontece quando temos o fundo de sobreposição vêm da direita para uma posição e você pode ver que ele foi girado enquanto era uma maneira. Então, quando ele volta, seu grau de rotação torna-se 0. Então não é mais girado. Então temos o link vir do topo para esta posição. Em seguida, o parágrafo vem da direita para a sua posição e também girado enquanto era um caminho. Então, finalmente, o H2 vem do topo para sua posição. Então vamos começar a criar esse efeito. Você pode ver que temos nossos estilos da lição anterior. Então tudo está em seu lugar e só vamos adicionar os estilos responsáveis por nosso efeito aqui. Então vamos começar com o fundo de sobreposição. Vou mirar o pseudo elemento antes do recipiente. E eu vou adicionar transformar, traduzir 650 pixels. Assim, ele será traduzido 650 pixels para a direita ao longo do eixo x, em seguida, 100 pixels negativos. Assim, ele será deslocado 100 pixels para o topo. No eixo y. Eu também adicionarei girar 180 graus. Então, ele será girado em 180 graus quando estiver fora. E, finalmente, vou adicionar transição 0, 0. Então, abaixo disso. E quando pairando sobre o div recipiente, vou fazer algumas mudanças aconteceram com eles antes pseudo elemento. Vou adicionar transformar, traduzir 0 e 0. Então, ele retornará à sua posição original, depois girará 0 graus. Então ele vai girar de volta para 0, dando-nos o efeito que queremos. E agora você pode ver que o fundo está sentado nesta posição, 650 pixels para a direita e 100 pixels para o topo. E também é girado em 180 graus. E quando eu passar o mouse sobre a imagem, você pode ver o fundo retorna à sua posição original enquanto gira de volta para 0 graus, dando-nos este efeito agradável. Muito bem, vamos trabalhar no H2. Vou direcioná-lo e adicionar transformar, traduzir y negativo 150 pixels. Assim, o h2 será deslocado para o topo em 150 pixels. Então eu vou adicionar a transição todos os 0.2 segundos. Em seguida, ao passar o mouse sobre a div recipiente, eu vou mirar o H2. E adicione transformar traduzir Y 0 pixels para que ele retorne à sua posição. Eu também adicionarei o atraso de transição 0,5 segundos para que ele apareça após o plano de fundo aparecer. E agora você pode ver que o H2 está sentado em cima da imagem. E quando eu passar o mouse sobre a imagem, ela pesa 0,5 segundos e depois se move para sua posição novamente. E observe que quando eu passar o mouse para longe, ele imediatamente se mudou para o topo novamente. Ele não acorda 0,5 segundos ao pairar porque adicionamos o atraso de transição apenas ao pairar. Tudo bem, vamos passar para o parágrafo. Ele foi deslocado para a direita e girá-lo. Então eu vou mirá-lo. Em seguida, adicione transformação, traduza X 300 pixels e gire 90 graus. Então vou adicionar transição ou 0,2 segundos. Em seguida, ao passar o mouse sobre o div recipiente, vou direcionar o parágrafo. Em seguida, vou adicionar transformação, traduzir X de volta para 0 novamente e girar de volta para 0 também. Então, abaixo disso, adicionarei atraso de transição 0,4 segundos. E agora você pode ver que o parágrafo foi movido para a direita 300 pixels e é girado em 90 graus. E ao passar o mouse sobre a imagem, ela pesa 0,4 segundos. Em seguida, ele gira de volta para 0 graus enquanto se move de volta para sua posição original. E quando eu passar o mouse para longe, ele retorna imediatamente para a taxa e gira. Finalmente, vamos trabalhar no link. Voltarei atrás e o alvo. Então eu vou adicionar transformar, traduzir y negativo 300 pixels. Então, ele será deslocado para o topo em 300 pixels, em seguida, transição 0, 0, 0,2 segundos. E novamente, ao passar o mouse sobre a div contêiner, vou direcionar a tag âncora e adicionar transformação, traduzir Y 0 pixels, modo que ele retorna à sua posição. Então vou adicionar atraso de transição 0.3 segundos. E agora você pode ver o link está sentado em cima da imagem. E quando eu passar o mouse sobre ele, o link pesa 0,3 segundos e, em seguida, move-se para baixo para sua posição original. Agora mesmo, vou voltar e direcionar a div do contêiner e adicionar overflow escondido. E agora você pode ver que todos os elementos são invisíveis. E quando passamos o mouse sobre a imagem, elas aparecem novamente. E o efeito que queremos acontece perfeitamente. 45. 47 - efeito de imagem criativa 9: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos continuar com efeitos de imagem e vamos criar este efeito de pairar agradável. Você pode ver quando eu passar o mouse sobre a imagem, ela escala para baixo para 0 até que ela desapareça. E as habilidades de fundo para cima enquanto gira e todos os elementos desaparecem bem. Então vamos criar esse efeito. Você pode ver que temos todos os estilos das lições anteriores que são responsáveis por localizar os elementos em suas posições assim. Tudo bem, vamos começar a adicionar os estilos para esta lição aqui mesmo. E vamos mirar a div com a classe de contêiner. Em seguida, vou adicionar cor de fundo. Esta cor cinzenta. Em seguida, borda 10 pixels, sólido e branco. Quando eu vou voltar e mirar a imagem dentro do recipiente div. E eu vou adicionar transição 0, 0, 5 segundos. Então, abaixo disso. E ao passar o mouse sobre o contêiner, eu direcionarei a imagem e adicionarei a escala de transformação 0. E agora, quando eu passar o mouse sobre a imagem, você pode ver que ela diminui para 0 e desaparece. E ao pairar, ele volta ao seu tamanho original. Tudo bem, vamos continuar. Vou segmentar o elemento pseudo antes do recipiente, que é este fundo cinza. E eu vou mudar esta cor de fundo para esta cor verde. Vimos que ele se expande enquanto gira. Então adicione transformação, escala 0, gire 180 graus negativos e, finalmente, faça a transição 0, 0, 5 segundos. Então, abaixo disso, vou dizer ao passar o mouse sobre o recipiente, vou fazer algumas mudanças acontecerem com o pseudo elemento antes. Vou adicionar transformação, escala um e girar 0 graus para que ele escale de 0 para um enquanto gira de volta de 180 graus para 0 graus, dando-nos o efeito que queremos. E agora, quando eu passar o mouse sobre a imagem, você pode ver enquanto a imagem está diminuindo, o fundo verde está aumentando e girando, dando-nos este efeito agradável. Mas seria melhor se o fundo verde aumentasse somente depois que a imagem diminuísse para 0. Então, vamos adicionar alguns atrasos de transição ao fundo verde. Ao pairar sobre ele. Voltarei aqui e adicionarei um atraso de transição 0,5 segundos. E adicionamos esse valor especificamente porque a duração da transição da imagem é de 0,5 segundos, o que significa que a imagem será reduzida para 0,50 segundos. Assim, o fundo verde aparecerá depois que a imagem desaparecer completamente. E agora, quando eu passar o mouse sobre o contêiner, você pode ver a imagem escala até 0 primeiro, depois o plano de fundo verde aumenta enquanto gira. Depois disso. Agora temos de fazer com que o texto desapareça também. Então eu vou voltar e apontar o elemento H2. Então vou adicionar opacidade 0 e transição ou 0,5 segundos. Então, ao passar o mouse sobre o contêiner, eu direcionarei o H2 e adicionarei opacidade novamente. Por isso, vai desaparecer bem. E eu quero fazer o mesmo para os outros dois elementos também. Então eu vou aqui ao lado do elemento h2 e adicionar o parágrafo, bem como o link. E eu farei o mesmo para o efeito pairando. E agora você pode ver que os três elementos estão agora escondidos porque sua opacidade é 0. E quando eu passar o mouse sobre a imagem, eles aparecem novamente. Mas como você pode ver, eles aparecem imediatamente. Queremos que eles apareçam somente depois que o fundo verde aparecer. Então, vamos adicionar alguns atrasos de transição a eles. Então eu vou voltar e sob efeito pairando, vou adicionar atraso de transição 1 segundo. Ao passar o mouse sobre a imagem, esses elementos aguardarão 1 segundo e, em seguida, eles aparecem. E eu escolhi 1 segundo porque a imagem leva 0,5 segundos, então o fundo verde leva mais 0,5 segundos. Então, ambos combinados ocupam 1 segundo antes de aparecerem. É por isso que usei 1 segundo como um valor de atraso de transição para os nossos três elementos. E agora, quando eu passar o mouse sobre a div do contêiner, você pode ver a imagem escala para baixo primeiro, então o fundo verde aumenta enquanto gira. E, finalmente, os três elementos desaparecem muito bem. Mas ao pairar, você pode ver todos os elementos desaparecerem imediatamente, completamente. Melhor se o fundo verde e os três elementos desaparecerem primeiro, então, depois disso, a imagem entra e aparece novamente. Então, ao passar o mouse, queremos fazer a imagem esperar até que o fundo verde e os três elementos desapareçam completamente. Então, depois disso, a imagem deve aumentar novamente. Para fazer isso, vamos entrar aqui dentro do seletor de imagem e adicionar atraso de transição 0,5 segundos. E agora, quando eu passar o mouse sobre a div recipiente, então passe o mouse para longe. Você pode ver o fundo verde e os três elementos desaparecem primeiro. Em seguida, a imagem aumenta novamente. Então a imagem está apenas esperando 0,5 segundos, em seguida, aumenta a escala, mas há um problema. A imagem também pesa 0,5 segundos ao passar o mouse sobre o contêiner. Mas queremos que apareça imediatamente. Portanto, queremos que ele espere 0,5 segundos apenas ao pairar longe do contêiner, nem um pairando sobre ele. Podemos fazer isso voltando aqui e adicionar atraso de transmissão 0. Então, isso significa que quando passarmos o mouse sobre a div recipiente, o atraso de transmissão da imagem será 0. Então ele aparecerá imediatamente porque nós adicionamos o atraso de transição 0.5 aqui para a imagem. Só funcionará quando pairarmos, e é exatamente isso que queremos. Então, quando eu passar o mouse sobre a div do contêiner, a imagem escala para baixo imediatamente, então o fundo verde aumenta enquanto gira. E, finalmente, os três elementos desaparecem. E ao pairar, o fundo verde e os elementos desaparecem imediatamente e a imagem aparece depois disso, dando-nos o efeito que queremos. Então, espero que você esteja mais familiarizado com a propriedade de atraso de transição e como ela é usada em diferentes situações. Se você quer que ele para fazer o seu peso elemento sobre pairar apenas ou sobre pairar apenas, ou em ambos os casos. Então, se você quiser aplicá-lo apenas ao passar o mouse, você pode fazer isso facilmente, adicionando-o no bloco de código que paira sobre o mouse. E se você quiser aplicá-lo somente ao passar o mouse, você pode aplicá-lo no código do elemento. Em seguida, no código que passa o mouse, você pode defini-lo como 0. Então, será 0 quando pairar apenas. Portanto, será 0 somente ao passar o mouse, e ao passar o mouse, ele terá o valor que você aplicá-lo no código do elemento. E, finalmente, se você quiser aplicá-lo em ambos os casos, passar o mouse e ao passar o mouse, basta adicioná-lo no código do elemento. 46. 48 - efeito de imagem criativo 10: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar outro efeito sobre imagem. Você pode ver quando eu passar o mouse sobre a imagem, o fundo verde desaparece n e o H2 e o parágrafo desaparecem também. Você pode ver que eles eram maiores do que quando pairavam. Nós ficamos menores e retornamos ao seu tamanho original e o link se move de baixo para sua posição. Então isso vai ser um bom efeito. Vamos ver como podemos criá-lo. Então aqui você pode ver que temos nossos estilos das lições anteriores e vamos apenas adicionar os estilos responsáveis pelo nosso efeito. Então, primeiro de tudo, vamos criar o desvanecimento de fundo. Na verdade, vou direcionar o pseudo elemento antes do recipiente. E vou adicionar opacidade 0, depois transição ou 0,3 segundos, depois abaixo disso. E ao passar o mouse sobre a div recipiente, vou mirar o elemento pseudo antes. Em seguida, adicione opacidade. Uma outra vez. E agora você pode ver que o fundo verde desapareceu. E quando eu passar o mouse sobre a imagem, ela se desvanece muito bem. Muito bem, vamos trabalhar no H2 e no parágrafo. Vamos atacar os dois. Então eu adicionarei a escala de transformação 10, modo que haverá 10 vezes maior. Então, abaixo disso, adicionarei opacidade 0. Então, finalmente, a transição. Todos os três segundos. Então, abaixo disso, ao passar o mouse sobre a div do contêiner, eu direcionarei a tag H2, e farei o mesmo para o parágrafo. Então adicionarei opacidade um, depois Transformar Escala outra vez. E agora você pode ver o H2 e o parágrafo agora estão escondidos. E ao passar o mouse sobre a imagem, eles aparecem novamente. Você pode ver que eles ficam menores até que eles voltem para o tamanho original. Finalmente, queremos trabalhar no link. Queremos que ele se mova de baixo para cima quando passarmos o mouse sobre a imagem. Então voltarei aqui e visarei o link. Então vou adicionar transformar, traduzir y, 150 pixels. Assim, o link será deslocado para o fundo em 150 pixels. Então vou adicionar transição ou 0,3 segundos. E abaixo disso, ao passar o mouse sobre a div do contêiner, eu direcionarei a tag âncora e adicionarei transformação. Traduzir Y 0 novamente, modo que ele retorna ao seu lugar original. E agora, quando eu voltar, você pode ver que o link desaparece também. Na verdade, ele está sentado atrás da imagem, mas não está aparecendo porque tínhamos propriedade overflow definida como oculta na div recipiente. E quando eu passar o mouse sobre a imagem, você pode ver o link vem de baixo para cima, dando-nos este efeito agradável. E todos os elementos agora têm o efeito de pairar que queremos. Mas vamos adicionar algum atraso aos nossos elementos ao pairar para que eles apareçam ligeiramente após o fundo verde. Acrescentarei um atraso de 0,2 para cada um deles. Então eu vou aqui e adicionar atraso de transição, 0,2 segundos. Então, abaixo aqui, adicionarei atraso de transição 0,2 segundos também. E agora, quando eu passar o mouse sobre a div recipiente, você pode ver os elementos aparecem ligeiramente após o fundo verde. E quando pairando, todos eles desaparecem imediatamente juntos. O atraso não se aplica neste caso porque o definimos apenas para passar o mouse. 47. 49- efeito de imagem criativo 11: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar outro efeito sobre a imagem. Você pode ver quando eu passar o mouse sobre a imagem, ela escala para baixo para 0 durante a rotação e sua opacidade diminui para 0 também. Em seguida, um fundo verde desaparece. Em seguida, os três elementos se movem do topo para sua posição original, um após o outro. O link aparece primeiro, depois o parágrafo, depois o cabeçalho. Usaremos a propriedade delay de transição para fazer com que o fundo verde apareça depois que a imagem desaparece. Nós também o usaremos para fazer nossos elementos aparecerem um após o outro. Então vamos ver como podemos criar isso. Você pode ver que temos os estilos das lições anteriores. Por isso, temos os nossos elementos sentados nas suas posições. Vamos agora voltar e criar os estilos para esta lição. Primeiro de tudo, vou mirar a div com a classe de contêiner. E vou adicionar cor de fundo. Esta cor cinza escuro, modo que ele aparecerá quando a imagem escala para baixo e borda 10 pixels, branco sólido. Então agora você pode ver que temos esta borda branca ao redor da div recipiente, e nós também temos um fundo cinza. Tudo bem, eu vou voltar e mirar a imagem dentro do contêiner. E eu vou adicionar transição 0, 0, 5 segundos. Então, abaixo disso, ao passar o mouse sobre o contêiner, eu direcionarei a imagem. E queremos fazer com que a imagem diminua enquanto gira. Então eu vou adicionar transformar, girar 720 graus, em seguida, escala 0. Nós também queremos que ele desapareça enquanto o efeito está acontecendo. Então eu vou adicionar opacidade 0. E agora você pode ver quando eu passar o mouse sobre o contêiner, a imagem escala para baixo enquanto gira e sua opacidade diminui até que ele desapareça. Muito bem, vamos trabalhar no fundo verde. Vou mirar o pseudo elemento antes do recipiente. E vou adicionar uma cor de fundo. Esta cor verde, depois opacidade 0 e transição 0, 0. Então, abaixo disso. E ao passar o mouse sobre o recipiente, vou fazer alterações acontecerem com o pseudo elemento antes. Farei com que seja opacidade. Uma outra vez. Então ele terá esse efeito de desvanecimento agradável, e eu quero que isso aconteça depois que a imagem desaparecer. Então, enquanto vamos adicionar um atraso de transmissão 0,5 segundos. E agora você pode ver o fundo de sobreposição simplesmente desapareceu porque nós definimos sua opacidade como 0. E, ao passar o mouse sobre o contêiner, ele aparece novamente acima do fundo cinza do contêiner após a imagem desaparecer completamente. Muito bem, vamos voltar e criar o efeito dos nossos três elementos. Começarei com o link. Eu vou apontar para ele. E queremos que ele se mova do topo para sua posição original. Então eu vou adicionar transformar, traduzir y negativo 300 pixels, em seguida, transição ou 0,2 segundos. E abaixo que vai pairar sobre o recipiente. Vou direcionar a tag âncora e adicionar transformação. Traduzir Y 0 novamente, modo que ele retorna à sua posição original. Eu também adicionarei atraso de transição 0,5 segundos. E agora você pode ver que o link está sentado em cima do recipiente. E quando eu passar o mouse sobre o recipiente, o link pesa 0,5 segundos e depois volta para sua posição. Vamos rapidamente fazer o mesmo efeito com um parágrafo e o título. Voltarei e copiarei este código. Em seguida, cole-o novamente duas vezes. Então eu vou apontar o parágrafo. Desta vez. Eu também vou direcionar o parágrafo aqui no efeito pairando. E eu vou mudar o atraso de transição para 0,7 segundos. Então, ele aparecerá ligeiramente após o link. Então, abaixo disso, vou direcionar o título desta vez e mudar o atraso de transição para 0,9 segundos. Então, ele aparecerá após o parágrafo. Então eu vou subir aqui dentro do div recipiente e adicionar overflow escondido para que os elementos serão escondidos fora do recipiente. E agora você pode ver tudo fora do recipiente div está escondido. E quando eu passar o mouse sobre ele, os três elementos aparecem um após o outro. Então o que nós fizemos caras é simples. Acabamos de fazer a imagem diminuir enquanto girava. Depois fizemos o fundo verde desaparecer. E finalmente, fizemos nossos elementos aparecerem um após o outro. E isso nos dá o efeito que queremos. 48. 51 - efeito de menus de bordas criativas: Olá a todos. Nesta lição, vamos criar este efeito sobre o menu. Quando eu passar o mouse sobre qualquer link no menu, você pode ver duas linhas estão sendo dimensionadas. O topo quando escalamos a partir da esquerda e o fundo um bigode da direita. A idéia por trás desse efeito é simples. Vamos apenas usar os pseudo elementos antes para criar a linha superior, que será a largura total do link. Em seguida, vamos adicionar escala x 0 para ele, que ele desapareça. Quando passarmos o mouse sobre o link, faremos com que a escala x seja um. Então, aparece de novo. Mas vamos fazer a origem da transformação esquerda. Então crescerá da esquerda para a direita. Legal, mas vamos construir em grande estilo nosso menu primeiro, vou para o meu HTML e adicionar um UL LI e uma marca âncora dentro dele. E eu vou dizer para casa. Então eu vou copiar isso e colá-lo novamente muitas vezes. E eu vou mudar o texto. Agora você pode ver nosso menu e ele está centrado horizontal e verticalmente dentro do corpo, graças a alguns estilos Flexbox que são adicionados ao corpo aqui. Bom. Agora vamos trabalhar no menu em si. Vou direcionar a UL, em seguida, adicionar preenchimento 0 e margem 0, e, em seguida, exibir flex para fazer o item da lista sentar um ao lado do outro. E, finalmente, envoltório flexível. Quebrar para que os itens da lista caiam para a próxima linha quando não tiverem espaço disponível. Em seguida, vou segmentar os itens da lista dentro da lista não ordenada. E eu vou adicionar nenhum estilo de lista para me livrar da bala que aparece ao lado dos itens da lista. Então eu vou mirar os links. E eu vou adicionar decoração de texto, nenhum para remover os sublinhados. Em seguida, colorir esta cor cinza escuro agradável e tamanho da fonte. 22 pixels. Em seguida, exiba o preenchimento de blocos, dez pixels da parte superior e inferior e 15 pixels da esquerda e da direita. Então, finalmente, posição relativa. E olha para isso. Incrível. Agora nosso menu parece exatamente do jeito que queremos e estamos prontos para trabalhar no efeito de pairar. Então eu vou aqui e adicionar um cólon. Antes. Em seguida, vou adicionar conteúdo, string vazia, em seguida, posição absoluta, superior , 0, esquerda, 0, largura, 100%. Altura. Só dois pixels. Cor de fundo. Nossa agradável cor cinza escuro. Agora você pode ver que a linha está aparecendo no topo e tem a largura total. E é uma pequena altura de dois pixels. Vamos continuar a trabalhar. Vou aqui e adicionar escala de transformação x 0 para que sua largura seja 0. E eu vou adicionar transição 0, 0, 5 segundos. Então, quando passarmos o mouse sobre o link, quero que a linha apareça novamente. Então eu vou aqui e adicionar um cólon, pairar o cólon antes. E eu adicionarei a escala de transformação x um novamente. E agora, quando eu passar o mouse sobre qualquer link, você pode ver que a linha está crescendo novamente. Mas está crescendo a partir de seu centro porque a origem da transformação é definida como centro por padrão. Mas queremos que a escala ou cresça a partir do lado esquerdo. Então eu vou voltar para o antes de um elemento pseudo adicionar origem transformada esquerda. E agora, quando eu passar o mouse sobre qualquer link novamente, você pode ver que a linha agora está crescendo do ponto final esquerdo, dando-nos o efeito exato que queremos. Finalmente, precisamos criar a linha de fundo é, bem, não se preocupe, será muito fácil. O que eu vou fazer é copiar todo o elemento antes pseudo, colá-lo novamente, e eu vou apenas fazer algumas mudanças. Então, em primeiro lugar, vou mudar a palavra antes para depois. Então eu vou mudar isso de cima para baixo. Então, a linha estará na parte inferior do link. Então mudarei a origem da transformação para escrever para que ela cresça do lado direito, não do lado esquerdo. E, claro, eu vou aqui e incluído no efeito de pairar. Então, quando eu passar o mouse sobre o link, o pseudo elemento depois deve crescer também. E é isso. Se eu passar o mouse sobre qualquer link, você pode ver que o efeito é exatamente o que estávamos procurando. 49. 52- efeito de menu de fundo e fronteiras: Olá a todos. Bem-vindo a esta nova lição no curso onde vamos criar este efeito de pairar quando passar o mouse sobre itens de menu são links. Então você pode ver que temos um fundo que se desvanece junto com essas duas bordas dos cantos superior direito e inferior esquerdo. Peguei-o. Então vamos ver como podemos criar esse efeito. Eu vou aqui no meu HTML e eu vou adicionar um UL LI dentro dele e uma tag âncora dentro do LI. E eu vou dizer para casa. Então eu vou copiar isso, colá-lo quatro vezes. E eu vou dizer sobre serviços de portfólio e contato. Em seguida, vamos para o nosso CSS para adicionar alguns estilos. Primeiro, vou direcionar a UL, adicionar margem 0 , preenchimento 0 e exibir flex para exibir todos os itens da lista lado a lado. E, finalmente, para se livrar das balas, vamos adicionar list-style-type. Nenhum. Tudo bem, vamos continuar andando. Vou direcionar a etiqueta âncora e vou definir sua cor para esta cor cinza escuro. Então queremos fazer o tamanho da fonte um pouco maior. Então eu vou adicionar o tamanho da fonte 20 pixels. Depois, decoração de texto. Nenhum para remover os sublinhados. Transformação de texto. Maiúsculas para fazer todas as letras maiúsculas. Preenchimento, cinco pixels da parte superior e inferior, e dez pixels da esquerda e da direita. E queremos adicionar alguns espaços entre os links. Então, vamos adicionar margem 0 pixels da parte superior e inferior, e dez pixels da esquerda e da direita. Ok, agora vamos adicionar posição, relativa e transição. 0, 0, 5 segundos. Bom. Agora nossos links estão sentados lado a lado com alguns espaços entre eles e eles parecem bonitos. Em seguida, vamos trabalhar no efeito de pairar. Vamos criar as bordas que aparecem no canto superior direito e no canto inferior esquerdo usando os pseudo elementos antes e depois. Então eu vou aqui e dizer um cólon antes. Então, dentro dele, vou adicionar conteúdo. Cordas vazias, posição absoluta. E esta será a borda que aparece no canto inferior esquerdo. Então vamos dizer inferior 0 e esquerda 0. Em seguida, vamos fazer isso antes pseudo elemento ou quadrado e adicionar bordas a ele. Então vou adicionar largura, 12 pixels, altura 12 pixels. Então, para ver o que temos agora, vamos adicionar uma cor de fundo temporária. Então, vou adicionar cor de fundo, azul, por exemplo. Então aqui você pode ver os pseudo elementos antes fica bem aqui no canto inferior esquerdo, e tem uma largura e altura de 12 pixels e uma cor de fundo azul. Agora queremos adicionar uma borda ao redor apenas do lado esquerdo e do lado inferior. Então vamos fazer isso. Eu vou voltar para o elemento pseudo antes, e eu vou adicionar borda, três pixels sólido. E eu vou adicionar esta bela cor vermelha. Agora, esta linha de código que acabamos de adicionar colocará uma borda em torno de todos os lados do fundo azul. Então, se dermos uma olhada, você pode ver que agora temos uma borda vermelha em torno do fundo azul aqui, mas nós só queremos que a borda seja em torno dos lados inferior e esquerdo. Para fazer isso, podemos usar a propriedade border width. Então eu vou voltar aqui dentro do elemento pseudo antes, e eu vou adicionar largura da borda. E a propriedade border width aceita quatro valores. O primeiro valor indica o lado superior, depois o lado direito, o lado inferior depois disso, e finalmente o lado esquerdo. Então, em cima, direita, em baixo, esquerda. E como queremos apenas bordas nos lados esquerdo e inferior, adicionaremos 0 para o lado superior, depois 0 para o direito, depois três pixels e três pixels para os lados inferior e esquerdo. E aí está ele. Agora você pode ver que temos a fronteira que queremos, o que significa que não precisamos mais deste fundo azul. Então eu vou aqui e removê-lo. Agora. Agora queremos criar a borda no canto superior direito. Isto vai ser muito fácil. Nós apenas copiar isso antes pseudo elemento, colá-lo e mudar antes para depois. Então, em vez de baixo e esquerdo, vamos adicionar topo e direita. E sabemos que queremos uma fronteira nos cantos superior e direito. Então vamos corrigir esta largura da borda aqui e torná-la três pixels. Três pixels, 00, em vez de 003 pixels, três pixels. Lá vamos nós. Agora temos as duas bordas, e elas são configuradas no canto superior direito, no canto inferior esquerdo. Em seguida, queremos trabalhar no efeito de pairar. Então queremos mudar as bordas um pouco para dentro, em seguida, definir a opacidade para 0, a fim de torná-las invisíveis. E pairando, faremos com que eles voltem para fora e faremos a opacidade uma novamente. Tudo isso fará sentido uma vez que o fizermos. Então vamos a isso. Eu vou aqui dentro do pseudo elemento antes, que é o canto inferior direito aqui. E eu mudarei para a esquerda e para baixo para 12 pixels em vez de 0. Então agora você pode ver que isso empurra a borda para dentro em direção ao próprio link. E eu vou adicionar opacidade 0 para tornar isso invisível. Certo? Agora, estou pairando sobre o link. Queremos fazer com que a fronteira se mova para fora novamente e apareça para nós. Então eu vou dizer um e eu estou pairando sobre o link. Eu quero fazer algumas mudanças acontecerem com o pseudo elemento antes. Vou adicionar opacidade, um. Depois, em baixo. Queremos que seja para fora. Então, digamos menos oito pixels e à esquerda menos oito pixels também. Agora queremos que essa mudança aconteça sem problemas. Então vamos subir aqui dentro do pseudo elemento antes, e vamos adicionar transição todos os zeros. Então, agora, quando eu passar o mouse sobre o link, você pode ver o canto inferior esquerdo aparece em movimentos para fora, dando-nos o efeito que estávamos mirando. Agora. Muito bem, vamos fazer isso rapidamente para o canto superior direito. Eu vou aqui e mudar o topo e a direita para 12 pixels e 12 pixels em vez de 00. Então eu vou adicionar opacidade 0, em seguida, fazer a transição de nossos 0.3 segundos. E depois disso, vamos copiar isto. Cole novamente, mude antes para depois, baixo para cima, da esquerda para a direita. E agora, quando eu passar o mouse sobre o link, você pode ver que as fronteiras estão se movendo para fora, dando-nos este efeito agradável. Agora, resta uma coisa, que é mudar o fundo do link quando passarmos o mouse. Vamos fazer isso rápido. Vou aqui dizer, estou pairando. Vou adicionar cor de fundo, a mesma cor vermelha que a borda, e cor branca para tornar a cor do texto branca, é claro. E agora, quando eu passar o mouse sobre qualquer link, você pode ver que temos o efeito que queremos, que é, como sempre, muito bom. 50. 53 - efeito de menu de fundo triagem criativo: Olá a todos. Bem-vindo a esta nova lição no curso onde nós vamos criar este agradável menu efeito pairar. Então você pode ver que quando nós pairamos, nós temos essa ação realmente agradável acontecendo. O fundo se divide em quatro partes e eles se movem de cima para baixo, uma após a outra, dando-nos esse resultado. Então, a fim de criar este efeito, vamos primeiro criar as quatro partes do plano de fundo, em seguida, escalá-las de cima para baixo usando a função de escala y. E, finalmente, use a propriedade delay de transição para fazer o atraso para cada um deles e fazê-los aparecer um após o outro. Então vamos a isso. Vou começar aqui no meu HTML adicionando uma tag âncora UL LI. E eu vou dizer para casa. Então, a fim de criar as quatro partes, vamos usar vãos. Então vou adicionar quatro vãos dentro da etiqueta âncora. E cada extensão será uma parte do fundo cinza que aparece quando passarmos o mouse. Então eu vou copiar todo o LI, colá-lo quatro vezes. E eu vou mudar o texto toda vez. Então eu vou dizer sobre serviços, equipe e contato. Então aqui temos nossa URL, mas vamos fazer com que pareça melhor. Vou para o meu destino CSS, o URL. E eu vou adicionar margem 0, preenchimento 0. E, a fim de fazer o item da lista ficar lado a lado, vamos adicionar display flex para a URL. Então queremos nos livrar das balas. Então vamos adicionar list-style-type, nenhum. Tudo bem, agora vamos estilizar os próprios links. Vou segmentar as tags âncora, e eu vou adicionar bloco de exibição para que possamos adicionar largura e altura para eles. E é isso que farei a seguir. Então eu vou adicionar com 120 pixels, altura, 40 pixels. Em seguida, para centralizar o texto verticalmente e horizontalmente, vamos adicionar a altura da linha, 40 pixels e alinhar o texto. Centro. Legal. Agora vamos adicionar cor vermelha por enquanto. Em seguida, a transformação de texto capitalize. E para remover os sublinhados, adicionaremos decoração de texto. Nenhum. Em seguida, posição relativa. E finalmente transição ou 0,5 segundos. Muito bem, agora temos a configuração de ligação lado a lado e com bom aspecto. Em seguida, vamos trabalhar nos vãos para criar o plano de fundo. Então eu vou mirar os vãos dentro das tags âncora. E eu vou adicionar posição, absoluta. E como temos quatro vãos, vamos definir a largura para 25% para cada um deles. Então usaremos a propriedade esquerda para controlar seu posicionamento. Então eu vou adicionar largura, 25 por cento, depois altura, 100% claro, porque eles ocupam a altura total. Em seguida, cor de fundo, esta cor cinza escuro. E nós não queremos que eles encobrir o texto no link. Então vamos adicionar z-index minus1, em seguida, esquerda 00. E o que isso fará é fazer com que os quatro vãos ocupem 25% da largura do link da esquerda. Então, todos eles serão empilhados um em cima do outro. Vamos direcioná-los individualmente para mudar a posição de cada um. Então, quando eu vou e recarrego a página, você pode ver para o primeiro link, por exemplo, há um fundo cinza escuro tomando um 25% do link com e esses são na verdade os vãos da floresta, mas eles estão todos sentados em cima um do outro. Tudo bem. Vamos mudar suas posições para cobrir toda a largura do link. Vamos visar cada espaço individualmente. Eu irei aqui e direi “span enth child” também. E eu vou adicionar esquerda 25 por cento. Assim, ele começará em 25 por cento da largura do link a partir da esquerda. Então agora você pode ver que agora está deslocado para a esquerda e estamos cobrindo 50% do link, não 25% mais. Então eu vou copiar isso, colá-lo novamente duas vezes. E eu vou mirar no terceiro período. Mude para a esquerda para 50%. Em seguida, o quarto período e mudar para a esquerda para 75 por cento. Então agora você pode ver que os quatro vãos estão localizados lado a lado. Cada um deles tem 25% das larguras do link. E juntos eles são 100% e cobrindo o link. Agora precisamos trabalhar no efeito de pairar. Vou entrar aqui dentro do seletor de span geral e vou adicionar escala de transformação y 0 para que os vãos desapareçam. Então, abaixo disso, direi que quando passarmos o mouse sobre os links, faremos algumas mudanças acontecerem nos vãos. Vamos adicionar a escala de transformação y, um para devolvê-los ao seu tamanho original novamente. E para que o efeito aconteça sem problemas, vamos subir aqui e adicionar transição ou 0,5 segundos. Agora, certo? Agora, quando eu passar o mouse sobre os links, você pode ver que os vãos estão se expandindo para sua posição original. Mas isso está acontecendo do ponto central. E queremos que aconteça a partir do topo do centro. Então, vamos para o seletor de span e vamos adicionar a guia de origem de transformação. E agora, quando pairamos de novo, eles estão escalando do topo, não do centro mais. Mas agora todos os vãos estão em escala ao mesmo tempo. Então parece que é tudo um fundo escuro, não quatro separados. Queremos que eles escalem um após o outro, e podemos lidar com isso sem nenhum problema usando a propriedade delay de transição. Então eu vou aqui dentro do segundo período. E eu vou adicionar atraso de transmissão ponto zero 15 segundos. Em seguida, dentro do terceiro, vou adicionar atraso de transição 0.3 segundos. Em seguida, para o quarto, vou adicionar atraso de transição zero ponto por cinco segundos. E agora, quando eu passar o mouse sobre o link, você pode ver que eles estão escalando um após o outro, nos aproximando de nosso efeito completo. Agora, resta uma coisa, que é mudar esta cor vermelha no texto do link. Então eu vou para o seletor de tags âncora, mudar esta cor vermelha para cinza escuro. E abaixo disso, direi que quando passarmos o mouse sobre o link, a cor mudará para branco. Então aí está, um efeito de pairar muito bom. E o mais legal sobre isso é que você pode facilmente controlá-lo do jeito que quiser. Por exemplo, você pode adicionar mais de quatro vãos em alterar a largura. E você pode até mudar a cor de cada extensão. Então vamos brincar um pouco e mudar alguns valores e ver o que conseguimos. Em vez de fazer a largura 25 por cento e a altura 100%, vamos reverter isso. Vou mudar a largura para 100% e a altura para 25%. E agora cada extensão terá a largura total e uma altura igual a 25% da altura do link. Neste caso, queremos que eles se sentem um abaixo do outro. Então vamos para aqui e mudar essas esquerdas para o topo. E assim, agora temos um efeito totalmente diferente em que o espaço fica abaixo um do outro, ocupando a largura total e 25% da altura. Vamos também mudar a escala y para a escala x e ver o que vamos conseguir. Então agora os vãos serão dimensionados ao longo do eixo x, não o eixo y. Então, se eu passar o mouse, você pode ver que nos dá um efeito totalmente diferente, que ainda parece muito bom. E talvez possamos mudar a origem da transformação para a esquerda em vez de tabulação para que os vãos vão escalar a partir da esquerda e não a partir do topo. E assim, usando as transformações CSS, podemos obter uma grande variedade de efeitos com pequenas mudanças em nosso código. 51. 54 - efeito de bordas de baixo para movimento: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta lição, nós vamos criar este efeito agradável sobre o menu. Então você pode ver quando eu passar o mouse sobre o menu, esses dois sublinhados aparecem bem e nos dão esse efeito. Assim, o azul sublinhado aparece da esquerda e se move para a direita, enquanto o rosa aparece da direita e se move para a esquerda. Este é um efeito fácil, mas agradável. Então vamos criá-lo juntos. Vou começar aqui no meu HTML adicionando um UL. Em seguida, dentro dele, vou adicionar um L, em seguida, ancoragem tag dentro disso. E vou copiar isto e colá-lo quatro vezes. Então eu vou dizer casa sobre serviços, contato portfólio. Ok, agora eu vou para o meu CSS para estilizar este menu. Vou direcionar a UL e adicionar preenchimento 0. Em seguida, exiba o flex para fazer o item da lista ficar ao lado do outro. Então, abaixo disso, eu direcionarei o LI dentro do URL, e adicionarei list-style-type, nenhum para remover os marcadores que aparecem além dos itens da lista. Em seguida, adicionarei preenchimento, 10 pixels de cima e de baixo, e 20 pixels da esquerda e da direita. Legal. Agora vamos direcionar as próprias marcas de âncora e adicionar decoração de texto. Nenhum para remover os sublinhados. Em seguida, transforme texto. maiúsculas. Tamanho da fonte 20 pixels. Cor. Esta cor cinza escuro. E finalmente, posição. Relativo. Incrível. Então agora você pode ver que nosso menu está olhando exatamente do jeito que queremos. Agora, vamos trabalhar nos sublinhados que aparecem e se movem. Quando passamos o mouse sobre qualquer item de menu, vamos usar o antes e depois pseudo elementos para criar aqueles sublinhados. Vamos começar criando o primeiro usando V antes pseudo elemento. Eu vou aqui dentro do meu CSS e eu vou dizer UL LI um cólon antes. E vou adicionar conteúdo. String vazio, largura, digamos 15 pixels por enquanto. E altura, cinco pixels. Cor de fundo. Esta bela cor azul. Posição. Absoluto. Topo, 120% Esquerda 0. Então agora você pode ver que temos nossa linha azul com a largura de 15 pixels e uma altura de 50 pixels. E ele está sentado abaixo de nossos links porque dissemos que é propriedade de topo para 120%. Ok, agora vamos adicionar a outra linha rosa. Vou apenas copiar o pseudo elemento antes. Cole novamente e mude antes para depois. E vou mudar a cor de fundo para esta cor rosa. E em vez de esquerda, vou mudá-lo para avaliar. E assim, agora temos o cor-de-rosa do lado direito dos nossos links. Legal. Agora, vamos trabalhar no efeito de pairar. Ao passar o mouse sobre qualquer um desses links, queremos que o sublinhado azul cresça até que ele se torne 50% das larguras do link e se mova para a direita ao mesmo tempo. E também queremos que o rosa cresça até 50% das larguras do link e se mova para a esquerda. Então vamos fazer isso. Primeiro de tudo, eu vou subir aqui dentro do pseudo elemento antes e mudar a largura para 0 em vez de 15 pixels para que ele desapareça. Então eu vou fazer o mesmo para a linha rosa. Então eu vou descer aqui e dizer UL LI, um cólon, pairar cólon antes. E eu vou adicionar largura 50 por cento e transformar traduzir X 100%. E para que este efeito aconteça sem problemas, vou subir aqui dentro do pseudo elemento antes e adicionarei transição ou 0,5 segundos. Então agora, quando eu passar o mouse sobre qualquer link, você pode ver a linha azul se move da esquerda para a direita e sua largura se torna 50% das larguras do link ao mesmo tempo. Legal. Agora, vamos fazer o mesmo com a linha rosa. Vou copiar este bloco de código. Cole novamente, mude antes para depois para direcionar a linha rosa. E basta mudar a função Translate X para 100% negativo em vez de 100% porque queríamos mover para a esquerda, não para a direita. E finalmente, eu vou subir aqui dentro do pseudo elemento depois e adicionar transição 0, 0, 5 segundos. E agora, quando eu passar o mouse sobre qualquer link, você pode ver a linha azul se move para a esquerda e a rosa se move para a direita, dando-nos este efeito legal. 52. 55 - efeito do menu criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito agradável sobre o menu. Como você pode ver, quando eu passar o mouse sobre qualquer link em nosso menu, ele fica maior e tem um fundo laranja. Mas o legal é que os outros links ficam embaçados. Então o link em que estamos pairando entra em foco e os outros links ficam embaçados. Muito bem, vamos criar este efeito. Vou aqui no meu HTML e adicionar uma URL. Então, dentro dele, adicionarei um LI, depois uma tag âncora. E dentro disso vou dizer “casa”. Então vou copiar isso de novo quatro vezes. E dizer sobre serviços, portfólio e contato. Então aqui você pode ver todos os itens da lista estão lá. Tudo bem, eu vou para o meu CSS e visar a UL. Em seguida, adicionarei margem 0, preenchimento 0 também. Em seguida, a fim de exibir os itens lado a lado, eu vou adicionar display flex. Então eu direcionarei os itens da lista dentro da UL e adicionarei nenhum estilo de lista. Margem, 0 pixels da parte superior e inferior e 20 pixels da esquerda e da direita. Então eu adicionarei a transição 0,5 segundos. Tudo bem, agora eu vou apontar as tags âncora dentro dos itens da lista e adicionar bloco de exibição para que possamos controlar seu tamanho e torná-lo maior. Então, depois disso, vou adicionar posição. -Relativo. Decoração de texto. Nenhum. Acolchoamento. Cinco pixels. Tamanho da fonte, 22 pixels, cor branca. Em seguida, transformação de texto, em maiúsculas. E finalmente transição 0, 0, 0,3 segundos. Como você pode ver, o menu agora está exatamente do jeito que queremos. Muito bem, vamos trabalhar no efeito de pairar. Queremos que os links fiquem maiores e tenham um fundo laranja quando passarmos o mouse sobre eles. Então eu vou ir aqui e dizer quando passarmos o mouse sobre o link, eu vou adicionar a escala de transformação 1.5 para que ele vai ficar maior em 1,5 vezes o seu tamanho original. E agora você pode ver quando eu passar o mouse sobre qualquer link, ele fica maior. Tudo bem, vamos voltar para criar o fundo laranja. Vamos criá-lo usando o elemento pseudo antes. Então eu vou dizer um cólon antes. E dentro disso, vou adicionar conteúdo. Cordas vazias, posição absoluta , topo, 0, esquerda 0 também. Então queremos que ele ocupe o tamanho total da etiqueta âncora. Então vamos adicionar uma largura, 100%, e altura 100% também. Em seguida, vamos adicionar cor de fundo, nossa cor laranja. Então, finalmente, transição ponto zero três segundos. E agora você pode ver que temos esse fundo laranja e está cobrindo todos os links, mas só queremos que ele apareça quando passarmos o mouse sobre os links. Então eu vou voltar aqui e adicionar a escala de transformação 0. Então, abaixo disso, vou dizer quando passarmos o mouse sobre o link, Nosso fazer algumas mudanças aconteceu com o elemento pseudo antes. Acrescentarei transformação. Escala de volta para um novamente. Então agora você pode ver que o fundo laranja está agora escondido. E quando pairamos sobre ele, ele se torna maior novamente. O problema é que está cobrindo o texto. Então vamos voltar aqui dentro do fundo laranja e adicionar índice z negativo. Então agora você pode ver o texto aparece na frente do fundo laranja. Agora nós temos apenas uma coisa esquerda, e que é desfocando os outros links quando passamos o mouse sobre qualquer link. Então vamos voltar e fazer isso. Voltarei aqui e adicionarei desfoque de filtro, cinco pixels. Então isso significa apenas que quando passarmos o mouse sobre o poço, vamos aplicar este filtro de desfoque para as tags âncora. Queremos também que as ligações sejam um pouco transparentes. Então eu vou adicionar opacidade 0.2. E agora você pode ver quando eu passar o mouse sobre os links, todos eles ficam embaçados e tornam-se semitransparentes porque nós definimos a opacidade para 0,2. Mas queremos que isso aconteça com os links que não estavam pairando. Portanto, queremos que o link sobre o qual passamos o mouse apareça claramente. Então eu vou voltar aqui e adicionar opacidade um para que ele se torne visível novamente quando Filtro desfoque 0. Então isso significa que o comprimento que estamos pairando sobre, teremos uma opacidade de um e o filtro de desfoque será 0, que significa que será claramente visível novamente. E agora, quando eu voltar e passar o mouse sobre qualquer link, você pode ver que ele fica maior e tem um fundo laranja enquanto os outros links ficam embaçados. E este é o efeito exato que estamos procurando. 53. 56 - efeito do menu criativo usando a propriedade de atraso de transição: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito agradável sobre o menu. Você pode ver quando eu passar o mouse sobre os itens do menu, o link se move para cima e outro link vem de baixo e toma seu lugar. Em seguida, um fundo verde cresce da esquerda para a direita. Então, ao passar o mouse, o fundo verde encolhe da direita para a esquerda. E isso desenhou ele desaparece. O link se move para a parte inferior e o outro vem de cima. Então vamos começar a criar esse efeito. Vou começar aqui no meu HTML adicionando um UL. Em seguida, dentro dele, vou adicionar um LLI, em seguida, uma etiqueta âncora dentro dele. E dentro da etiqueta âncora, vou adicionar uma extensão e dizer casa. Quando eu vou adicionar outro espaço e dizer casa também. Então a primeira banda é aquela que vamos passar para o topo e a segunda extensão vai se mover de baixo para tomar o seu lugar. Tudo bem. Vou copiar, colar quatro vezes. E como podem ver, acabei de mudar o texto. Então temos sobre serviços, portfólio e contato. Muito bem, vamos ao nosso CSS e começar a estilizar o nosso menu. Vou mirar na UL. Em seguida, adicione display, flex. Então queremos que todos os itens da lista se sentem um acima do outro. Então eu vou adicionar coluna de direção flexível. Em seguida, justifique o centro de conteúdo e alinhe o centro de itens também. Tudo bem, vou apontar os itens da lista dentro da UL. Em seguida, vou adicionar posição, relativo, estilo de lista, nenhum, e margem, cinco pixels. Agora vou direcionar a tag âncora dentro dos itens da lista. Em seguida, adicione a posição, relativa. Exibição, bloco, altura, 40 pixels. Decoração de texto. Nenhum. Ao estofar. Cinco pixels de cima e de baixo, e dez pixels da esquerda e da direita. Quando eu vou adicionar o peso da fonte de 300, espaçamento de letras para pixels. E, finalmente, transbordar. Escondido. Muito bem, vamos trabalhar nos vãos dentro das etiquetas de âncora. Vou direcioná-los quando adicionar posição, largura relativa. 100% Altura 100%. Então eles ocupam toda a largura e altura da etiqueta de âncora. Em seguida, a fim de fazer o segundo span ir para a parte inferior do primeiro span, vamos adicionar display flex. Então o que isso fará é fazer com que o segundo espaço fique lado a lado com o primeiro se houver um espaço. Mas desde que definimos a largura dos nossos vãos 2 100%, o segundo espaço não terá espaço para sentar ao lado do primeiro. Então, ele se moverá para o fundo e se sentará abaixo dele. Em seguida, vou adicionar o centro de itens de alinhamento e justificar o centro de conteúdo. Então, como você pode ver, os segundos vãos são deslocados e sentar-se abaixo dos primeiros porque eles não têm espaço suficiente e nós não podemos vê-los porque nós dissemos estouro na etiqueta âncora aqui para escondido. Então, se removermos isso, você pode ver que os segundos vãos estão aparecendo abaixo dos primeiros. Tudo bem, eu vou adicionar overflow escondido novamente para que os segundos vãos desapareçam novamente. Vamos continuar estilizando os vãos. Irei aqui e adicionarei a transição 0,5 segundos. Em seguida, cor branca, tamanho da fonte 20 pixels. E, finalmente, o texto se transforma. Capitalizar. Agora os vãos estão parecendo muito melhor. Agora, ao passar o mouse sobre a etiqueta âncora, queremos que a primeira extensão se mova de sua posição para cima para o topo, e a segunda extensão para se mover de baixo e tomar seu lugar. Então eu vou dizer ao passar o mouse sobre a tag âncora, eu quero fazer algumas alterações no primeiro período. Então eu vou dizer span enth filho um. E eu vou adicionar transformar, traduzir Y negativo 100%. Então, agora, quando eu passar o mouse sobre a primeira banda, você pode ver que ela se move para o topo e desaparece. Agora queremos que o segundo período se mova de baixo e tome seu lugar. Então vamos voltar e fazer isso. Vou copiar este bloco de código colado e segmentar a segunda extensão em vez do primeiro. E eu não vou mudar nada. Então, quando eu vou e pairar, agora você pode ver quando o primeiro vão se move para cima, o segundo vão vem de baixo e toma o lugar dele. E este é o efeito exato que queremos. Muito bem, vamos trabalhar no fundo verde. Vou aqui dizer um cólon antes. E então eu adicionarei conteúdo. Cordas vazias, posição, absoluto. Top 0, esquerda 0. E queríamos ocupar toda a largura e altura da etiqueta âncora. Então vamos adicionar largura, 100%, altura, 100% também. Em seguida, cor de fundo, nossa cor verde. E agora você pode ver que temos um fundo verde que tem a mesma largura e altura que a etiqueta âncora. Queremos que o fundo verde só apareça quando passar o mouse sobre a etiqueta âncora. Então eu vou voltar aqui e adicionar escala de transformação x 0. E queríamos crescer da esquerda para a direita. Então vamos adicionar origem transformada à esquerda. Então, finalmente, a transição de 0,5 segundos. E ao pairar sobre o link, queríamos crescer novamente e aparecer. Então eu vou dizer ao passar o mouse sobre o link, vou fazer algumas alterações no elemento pseudo antes. Vou adicionar a escala de transformação x um novamente. E agora você pode ver que o fundo verde é invisível. E ao passar o mouse sobre o link, ele cresce novamente da esquerda para a direita porque definimos sua propriedade de origem transformada para a esquerda. E ao pairar, ele também encolhe do lado esquerdo, mas queríamos encolher do lado direito. Então o que podemos fazer é voltar aqui e adicionar origem de transformação, certo? E agora você pode ver quando eu passar o mouse sobre o link, o fundo verde cresce da esquerda para a direita. E ao pairar para longe , encolhe para o lado direito. Certo, agora precisamos adicionar alguns atrasos de transição para misturar o fundo verde, esperar até que a primeira banda se mova para o topo. Então eu vou aqui e adicionar atraso de transição 0,5 segundos. E agora, quando eu voltar e passar o mouse sobre o link, você pode ver o link se move primeiro. Depois disso, o fundo verde aparece nos dando o efeito que queremos. O problema é que quando passarmos o mouse, queremos que o fundo verde encolha primeiro. Depois disso, queremos que o movimento do span aconteça. Portanto, queremos aplicar algum atraso de transição para o span ao passar o mouse para longe. Então eu vou voltar aqui dentro do seletor de span e adicionar atraso de transição 0,5 segundos. Mas isso fará com que o movimento do span seja adiado ao passar o mouse também. Então, para evitar isso e fazer a marca âncora aparecer imediatamente ao pairar, podemos ir aqui e dizer atraso de transição 0. Então eu também vou fazer o mesmo aqui no segundo período. Então o que isso vai fazer é fazer com que os dois vãos se animem imediatamente ao pairar. E não terá atrasos. Mas ao pairar, ele vai esperar 0,5 segundos porque nós definimos o atraso de transição para 0,5 segundos aqui. Então, ao pairar, eles se animam imediatamente. Quando pairarmos, vamos esperar. E agora, quando eu passar o mouse sobre os links, os vãos se movem imediatamente e o fundo verde aparece. E ao pairar, o fundo verde encolhe, então o movimento do span acontece depois disso. E este é o efeito exato que queremos. 54. 5- 2 bordas e efeito no menu de fundo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar outra imagem, efeito pairar. Você pode ver quando eu passar o mouse sobre a imagem, este efeito acontece quando temos o fundo de sobreposição vêm da direita para uma posição e você pode ver que ele foi girado enquanto era uma maneira. Então, quando ele volta, seu grau de rotação torna-se 0. Então não é mais girado. Então temos o link vir do topo para esta posição. Em seguida, o parágrafo vem da direita para a sua posição e também girado enquanto era um caminho. Então, finalmente, o H2 vem do topo para sua posição. Então vamos começar a criar esse efeito. Você pode ver que temos nossos estilos da lição anterior. Então tudo está em seu lugar e só vamos adicionar os estilos responsáveis por nosso efeito aqui. Então vamos começar com o fundo de sobreposição. Vou mirar o pseudo elemento antes do recipiente. E eu vou adicionar transformar, traduzir 650 pixels. Assim, ele será traduzido 650 pixels para a direita ao longo do eixo x, em seguida, 100 pixels negativos. Assim, ele será deslocado 100 pixels para o topo. No eixo y. Eu também adicionarei girar 180 graus. Então, ele será girado em 180 graus quando estiver fora. E, finalmente, vou adicionar transição 0, 0. Então, abaixo disso. E quando pairando sobre o div recipiente, vou fazer algumas mudanças aconteceram com eles antes pseudo elemento. Vou adicionar transformar, traduzir 0 e 0. Então, ele retornará à sua posição original, depois girará 0 graus. Então ele vai girar de volta para 0, dando-nos o efeito que queremos. E agora você pode ver que o fundo está sentado nesta posição, 650 pixels para a direita e 100 pixels para o topo. E também é girado em 180 graus. E quando eu passar o mouse sobre a imagem, você pode ver o fundo retorna à sua posição original enquanto gira de volta para 0 graus, dando-nos este efeito agradável. Certo, vamos trabalhar no H2. Vou direcioná-lo e adicionar transformar, traduzir y negativo 150 pixels. Assim, o h2 será deslocado para o topo em 150 pixels. Então eu vou adicionar a transição todos os 0.2 segundos. Em seguida, ao passar o mouse sobre a div recipiente, eu vou mirar o H2. E adicione transformar traduzir Y 0 pixels para que ele retorne à sua posição. Eu também adicionarei atraso de transição 0,5 segundos para que ele apareça após o plano de fundo aparecer. E agora você pode ver que o H2 está sentado em cima da imagem. E quando eu passar o mouse sobre a imagem, ela pesa 0,5 segundos e depois se move para sua posição novamente. E observe que quando eu passar o mouse, ele imediatamente se mudou para o topo novamente. Ele não acorda 0,5 segundos ao pairar porque adicionamos o atraso de transição apenas ao pairar. Certo, vamos para o parágrafo. Foi deslocado para a direita e girá-lo. Então eu vou mirá-lo. Em seguida, adicione transformação, traduza X 300 pixels e gire 90 graus. Então vou adicionar transição ou 0,2 segundos. Em seguida, ao passar o mouse sobre o div recipiente, vou direcionar o parágrafo. Em seguida, vou adicionar transformação, traduzir X de volta para 0 novamente e girar de volta para 0 também. Então, abaixo disso, adicionarei atraso de transição 0,4 segundos. E agora você pode ver que o parágrafo foi movido para a direita 300 pixels e é girado em 90 graus. E ao passar o mouse sobre a imagem, ela pesa 0,4 segundos. Em seguida, ele gira de volta para 0 graus enquanto se move de volta para sua posição original. E quando eu passar o mouse para longe, ele retorna imediatamente para a taxa e gira. Finalmente, vamos trabalhar no link. Voltarei atrás e o alvo. Então eu vou adicionar transformar, traduzir y negativo 300 pixels. Então, ele será deslocado para o topo em 300 pixels, em seguida, transição 0, 0, 0,2 segundos. E novamente, ao passar o mouse sobre a div contêiner, vou direcionar a tag âncora e adicionar transformação, traduzir Y 0 pixels, modo que ele retorna à sua posição. Então vou adicionar atraso de transição 0.3 segundos. E agora você pode ver o link está sentado em cima da imagem. E quando eu passar o mouse sobre ele, o link pesa 0,3 segundos e, em seguida, move-se para baixo para sua posição original. Agora mesmo, vou voltar e direcionar a div do contêiner e adicionar overflow escondido. E agora você pode ver que todos os elementos são invisíveis. E quando passamos o mouse sobre a imagem, elas aparecem novamente. E o efeito que queremos acontece perfeitamente. 55. 58 - efeito de menus de from: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito agradável sobre o menu. Você pode ver quando passamos o mouse sobre qualquer link neste menu, este efeito legal acontece onde temos essas quatro pequenas bordas amarelas que aparecem. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando um UL. Então, dentro disso, um LI, depois uma etiqueta âncora. E eu vou dizer para casa. Em seguida, adicionarei dois vãos dentro da marca âncora ao lado do texto. Então vamos usar esses vãos grau a quatro fronteira em torno das ligações, e vamos ver como. Em seguida, vou copiar este item da lista, colá-lo novamente quatro vezes. E eu vou dizer sobre os serviços. Contacto. Aqui estão os itens do menu. Vamos ao nosso CSS e estilizá-los. Vou mirar na UL. Quando eu vou adicionar preenchimento 0. Em seguida, a fim de fazer o item da lista sentar lado a lado, eu vou adicionar display flex. Em seguida, vou segmentar os itens da lista e adicionar nenhum estilo de lista. Em seguida, preenchendo 10 pixels da parte superior e inferior e 40 pixels da esquerda e da direita. Em seguida, vou direcionar a etiqueta âncora e adicionar decoração de texto. Nenhum. Quando o texto se transforma. maiúsculas. Tamanho da fonte 24 pixels, onde em cor, branco, posição, relativo. E finalmente, preenchimento, cinco pixels. E agora você pode ver que o menu está parecendo muito melhor. Agora, eu quero que a cor dos links mude para amarelo ao passar o mouse sobre eles. Então eu vou dizer onde pairando sobre o link. Vou mudar a cor para esta cor amarela. Tudo bem, vamos continuar. Vamos criar as quatro pequenas fronteiras que cercam os links. Vamos fazer isso usando os pseudo elementos antes e depois dos dois vãos que adicionamos dentro do link. Então eu vou dizer “span”. Primeiro filho, cólon antes. Então este seletor aqui alvos que antes do pseudo-elemento do primeiro span. E dentro disso vou adicionar conteúdo, cordas vazias, posição absoluta. E esta será a borda que fica no canto superior esquerdo. Então vamos adicionar top 0 e esquerda 0 também. Em seguida, largura oito pixels e altura oito pixels. Então vou adicionar cor de fundo. Transparente porque não queremos que o plano de fundo apareça. Só queremos as fronteiras. Agora adicionamos borda, dois pixels, amarelo sólido. E fronteira esquerda. Dois pixels sólidos. Nossa cor amarela também. E finalmente, adicionarei a transição 0,2 segundos. Então agora você pode ver que temos essas duas pequenas bordas no canto superior esquerdo, e elas são as bordas esquerda e superior. Certo, vamos criar as bordas no canto superior direito. Então eu vou voltar e copiar este bloco de código, colá-lo novamente, e mudar antes para depois. Então, vamos segmentar o depois pseudo elemento do primeiro período. Quando dentro que eu vou mudar da esquerda para a direita para posicioná-lo à direita. Então eu também vou mudar a fronteira esquerda aqui para taxa de fronteira. Então vocês podem ver que agora temos essas bordas no canto superior direito. Certo, vamos criar a borda que fica no canto inferior esquerdo. Vou colá-los antes do pseudo-elemento código novamente. Então eu vou mirar o pseudo elemento anterior do último filho, não o primeiro. Então dentro disso eu vou mudar de cima para baixo porque queremos que essas bordas apareçam no canto inferior esquerdo. Então também mudarei a fronteira para o fundo da fronteira. E como podem ver, temos a fronteira sentada no canto inferior esquerdo. Vamos criar a última borda que fica no canto inferior direito. Vou copiar este código. Em seguida, cole-o novamente e direcione o último filho do pseudo elemento após. Então mude da esquerda para a direita. E também mudar a borda esquerda para fronteira direita. E agora, como podem ver, temos a última borda que fica no canto inferior direito. Ok? Finalmente, queremos criar o nosso efeito de pairar. Ao passar o mouse sobre os links. Queremos que as fronteiras mudem a sua posição para nos dar o efeito que queremos. Então vamos fazer isso. Eu vou dizer ao passar o mouse sobre o link, eu vou direcionar o pseudo elemento antes do primeiro span. E se você se lembra, esta é a borda que fica no canto superior esquerdo. Quando dentro que eu vou mudar de topo para negativo 10 pixels e esquerda para negativo 10 pixels também. E agora, quando eu passar o mouse sobre o link, você pode ver a borda no canto superior esquerdo se move e muda sua posição para esta nova posição. Certo, vamos também fazer o mesmo com as outras fronteiras. Voltarei ao meu CSS e copiarei este código. E novamente e meta os pseudo elementos depois desta vez. E se você se lembrar, esta é a borda que fica no canto superior direito, então eu vou mudar da esquerda para a direita. Quando eu vou colar o código novamente. E Target D antes de um pseudo elemento do último filho com o tempo, em seguida, mude de cima para baixo. Então esta é a borda que fica no canto inferior esquerdo. E vou colar o código mais uma vez e visar os pseudo elementos do último filho. E vou mudar de cima para baixo e da esquerda para a direita. E agora, quando eu passar o mouse sobre qualquer link, você pode ver que as quatro fronteiras estão mudando sua posição, dando-nos o efeito que queremos. A única coisa que nos resta é tornar as fronteiras invisíveis. Em seguida, faça-os aparecer apenas quando pairarmos. Então vamos voltar e fazer isso. Vou definir a opacidade para todas as bordas como 0. E quando pairar, vou ajustar a opacidade de volta a um. E agora você pode ver que as bordas são invisíveis. E ao passar o mouse sobre qualquer link, eles aparecem novamente e se movem de sua posição para esta nova posição, dando-nos o nosso efeito legal. 56. 59- efeito de rotação de fronteira criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito agradável sobre o menu. Você pode ver quando eu passar o mouse sobre qualquer link no menu, este efeito acontece onde nós temos as bordas superior e esquerda girar 360 graus e eles encolhem ao mesmo tempo até que eles se tornam menores. O mesmo efeito acontece com as bordas direita e inferior também. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando um UL. Em seguida, dentro disso, vou adicionar um LI, em seguida, uma etiqueta âncora dentro disso. E eu vou dizer para casa. Em seguida, vou copiar o URL, colá-lo novamente quatro vezes, e dizer sobre serviços, equipe e contatos. Quando eu vou para o meu destino CSS, o UL, e eu vou adicionar margem 0, preenchimento 0 também. Então, a fim de fazer o link ficar lado a lado, vou adicionar display flex. Tudo bem, agora eu vou mirar o LI dentro da UL e adicionar nenhum estilo de lista. Em seguida, vou direcionar a tag âncora e adicionar posição relativa. Em seguida, exiba bloco, preenchimento, 15 pixels da parte superior e inferior e 30 pixels da esquerda e da direita. Em seguida, adicionarei margem, 0 de cima e de baixo, e 15 pixels da esquerda e da direita. Então vou adicionar decoração de texto. Nenhum. Transformação de texto, maiúsculas. E finalmente, cor, esta cor amarela. Tudo bem, você pode ver que os links estão agora parecendo muito melhor. Vamos voltar e criar as fronteiras. Começaremos pelas fronteiras que ficam nos lados superior e esquerdo dos links. E vamos usar o pseudo elemento antes para fazer isso. Eu vou aqui e selecionar o pseudo elemento antes do link. Então vou adicionar conteúdo. Cordas. Posição absoluta, topo 0, esquerda 0 também. Quando largura 100%, e altura 100% também. Vamos adicionar as bordas. Vou adicionar borda superior dois pixels. Sólido. Esta cor amarela. Quando a borda esquerda, dois pixels, amarelo sólido também. Então eu adicionarei a transição 0,5 segundos. E, finalmente, caixa de tamanho de borda caixa. E como podem ver, agora temos as bordas nos lados superior e esquerdo. Muito bem, vamos começar a criar o nosso efeito. Eu vou voltar aqui e eu vou dizer quando pairar sobre a tag âncora, eu vou fazer algumas alterações no elemento pseudo antes. Vou definir sua largura para 15 pixels e sua altura para 15 pixels também, modo que o pseudo elemento antes irá encolher e as bordas irão encolher com ele. Então, agora, quando eu passar o mouse sobre os links, você pode ver a borda diminuir e ficar menor até que eles tenham uma largura e uma altura de apenas 15 pixels. Agora, vamos girar as bordas enquanto as encolhemos também. Eu vou aqui no efeito pairar e adicionar transformar, girar 360 graus. Então eu quero que ele gire ao longo do lado esquerdo. Então eu vou subir aqui dentro do elemento pseudo antes e adicionar origem transformada esquerda. E agora você pode ver quando eu passar o mouse sobre os links, nós giramos enquanto encolhemos, dando-nos este efeito legal. Tudo bem, vamos criar as bordas direita e inferior. Vou usar o pseudo elemento depois para criá-los. Então eu vou apenas copiar o elemento pseudo antes, colá-lo e mudar antes para depois. Eu também mudarei de cima para baixo e da esquerda para a direita. Eu também mudarei borda superior dois borda inferior e borda esquerda para taxa de fronteira. Então queremos girá-lo ao longo do lado direito. Então eu vou mudar a propriedade de origem transformada para direita em vez de esquerda. Então agora você pode ver que criamos as bordas direita e inferior usando o elemento após pseudo. Vamos criar o efeito de pairar. Eu vou voltar e copiar o efeito pairando sobre o pseudo elemento antes. Cole e mude antes para depois. E agora, quando eu voltar e passar o mouse sobre os links, você pode ver as bordas direita e inferior também estão diminuindo enquanto giro em torno do lado direito. E agora temos o efeito exato. Nós queremos. 57. 60 - efeito de menus colorido colorido criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito agradável sobre o menu. Você pode ver que tínhamos esses links e sua cor é transparente e temos um traçado de texto em torno deles. E quando eu passar o mouse sobre qualquer link, esse efeito acontece onde temos três camadas dos links. A camada branca original cuja cor muda para branco, e uma camada vermelha em cima disso, então uma camada azul clara em cima de ambos. Este é um efeito muito legal. Então vamos começar a criá-lo. Vou aqui no meu HTML, adicionar um UL. Então, dentro disso, vou adicionar um LI, depois uma etiqueta âncora, e dizer “casa”. Então vou adicionar texto de dados, em casa também. Em seguida, vou copiar este item da lista, colá-lo novamente quatro vezes, e dizer sobre Serviços, Equipe e contato. Então eu vou para o meu CSS, direcionar a UL e adicionar margem 0, preenchimento 0 também. Então eu direcionarei os itens da lista dentro da UL e adicionarei nenhum estilo de lista. Em seguida, vou direcionar os links e adicionar posição relativa bloco de exibição. E nós só queremos um traço em torno dele, então vamos adicionar cor, transparente. E então vamos adicionar webkit. Traçado de texto, um pixel branco. Vou adicionar tamanho da fonte, 80 pixels, peso da fonte, 900. E finalmente, decoração de texto, nenhuma. E agora você pode ver os links parecem exatamente do jeito que queremos. Eles têm uma cor transparente e um golpe branco em torno deles. Certo, vamos criar a camada vermelha que fica em cima do link. E vamos criá-lo usando o pseudo elemento antes. Então eu irei aqui e direcionarei isso e adicionarei conteúdo. UM TTR. Texto de dados para pegar o texto dentro do atributo de texto de dados de cada link. Em seguida, vou adicionar posição, absoluto, em seguida, topo 0, esquerda 0, e transição 0,5 segundos. Tudo bem? Ao passar o mouse sobre o link, queremos que o pseudo elemento antes apareça e pegue o fundo vermelho. Então eu vou dizer ao passar o mouse sobre a tag âncora, vou selecionar o pseudo elemento antes e adicionar cor. Esta cor vermelha. Em seguida, índice Z um, depois texto webkit traçado um pixel preto. Então teremos um traço preto em torno do fundo vermelho. Então, finalmente, vou adicionar transformar, traduzir 10 pixels ao longo do eixo x para a direita e 10 pixels negativos ao longo do eixo y em direção ao topo. E agora você pode ver quando eu passar o mouse sobre os links, este fundo vermelho aparece e se move para o lado superior direito por dez pixels, dando-nos este efeito agradável. Muito bem, vamos trabalhar na camada azul clara. Vamos criá-lo usando o elemento após pseudo. Então eu vou aqui e adicionar dois pontos depois, ao lado do elemento pseudo antes. Então eu vou copiar o efeito pairando. Cole novamente e selecione o pseudo elemento após em vez do anterior. E eu vou mudar a cor para esta cor azul claro. Então eu mudarei o índice z para dois em vez de um. Em seguida, modificarei a propriedade transform para 20 pixels e 20 pixels negativos. Então, será deslocado mais para o topo e para a direita. Agora você pode ver quando eu passar o mouse sobre os links, a camada azul claro aparece e se move para o canto superior direito da camada vermelha, dando-nos este efeito legal. A única coisa que resta agora é mudar a cor da primeira camada para branco em vez de transparente ao pairar. Então eu vou voltar e dizer, quando passarmos o mouse sobre o link, vou adicionar cor branca. Em seguida, traçado de texto do webkit, um pixel, preto. Então, finalmente, a transição de 0,5 segundos. E agora você pode ver quando eu passar o mouse sobre os links, a primeira camada agora tem uma cor branca e um traçado de texto preto. E este é o efeito exato que queremos. 58. 62 - efeito de cartão de tradução de fundo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar outro efeito de pairar card. Você pode ver que temos este cartão que é um fundo branco com alguma sombra de caixa em torno dele, separando-o do fundo do corpo branco. E contém algum conteúdo. E também temos essa fina linha rosa que fica no fundo. E ao passar o mouse sobre o cartão, a linha rosa fica maior e cobre o cartão e a cor do texto fica branca ao mesmo tempo. Então vamos começar a criar isso. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de cartão. Então, dentro dele, outro com uma classe de conteúdo. E dentro disso, vou adicionar um H2 e dizer design. Então, abaixo disso, vou adicionar um parágrafo e adicionar algum texto Lorem Ipsum. Então, finalmente, uma etiqueta âncora. E diga Leia mais. Certo, vamos ao nosso CSS e selecione a div do cartão. Vou adicionar posição, largura relativa, 320 pixels. Em seguida, panorâmica, 40 pixels. Cor de fundo, branco. Então, finalmente, caixa de sombra, 010 pixels, 30 pixels. E finalmente RGBA, 0, 0, 0, 0, 0.1. Então agora você pode ver que temos este fundo branco que tem esta sombra de caixa em torno dele. Certo, vamos trabalhar no fundo rosa que fica na parte inferior do cartão. Vamos criá-lo usando o elemento pseudo antes. Então eu vou segmentar e adicionar conteúdo. Cordas vazias. Posição absoluta, esquerda, 0, inferior. E queremos posicioná-lo apenas cinco pixels acima da linha inferior do cartão. Então eu vou adicionar calc negativo 100% mais cinco pixels. E depois queríamos ocupar o tamanho total do carro. Então vamos adicionar largura, 100%, altura, 100% também. Em seguida, cor de fundo, esta cor rosa, em seguida, índice z um, e finalmente transição, 0,5 segundos. Tudo bem, você pode ver que o fundo rosa está sentado no fundo. Vamos subir aqui dentro da div do cartão e adicionar estouro escondido. E agora você pode ver que o fundo rosa está posicionado na parte inferior e apenas cinco pixels dele são visíveis. Agora, ao passar o mouse sobre o cartão, queremos que o fundo rosa se mova para o topo e cubra o cartão branco. Então eu vou voltar aqui e dizer, quando pairar sobre o cartão. Vou selecionar o pseudo elemento antes, que é o fundo rosa. E eu vou adicionar o fundo 0. E agora, quando eu voltar e passar o mouse sobre o cartão, o fundo rosa se move, fica exatamente acima do cartão. Tudo bem, vamos continuar trabalhando e vamos voltar e direcionar o conteúdo div. Então eu vou adicionar posição, relativo, texto transformar, capitalizar, cor. Esta cor cinza. Então, para que o conteúdo apareça na frente do fundo rosa, adicionarei o índice Z 2. E finalmente, adicionarei a transição 0,5 segundos. E agora o conteúdo tem essa cor cinza. E quando passamos o mouse, o conteúdo aparece na frente do fundo rosa. Certo, vamos voltar e selecionar o H2. Em seguida, adicione margem inferior dez pixels e margem superior 0. Em seguida, tamanho da fonte 30 pixels. Em seguida, vou direcionar o parágrafo e adicionar tamanho da fonte 18 pixels. Então, finalmente, vou direcionar a tag âncora e adicionar margem superior 10 pixels. Quando o tamanho da fonte 14 pixels, exiba a decoração de texto em bloco embutido. Nenhum. Cor. Esta cor cinza. Acolchoamento. Seis pixels de cima e de baixo, e dez pixels da esquerda e da direita. Em seguida, peso da fonte, 600, cor de fundo, branco. E finalmente, caixa de sombra 0, dois pixels, 20 pixels, RGBA, 0, 0, 0, 0, 0, 0,05. E agora você pode ver que o link está parecendo muito melhor. Finalmente, quando passarmos o mouse sobre o cartão, queremos que a cor do texto do conteúdo mude para branco. Então eu vou aqui e vou dizer, ao passar o mouse sobre a etiqueta âncora, vou mudar a cor do texto para branco. E agora, quando eu voltar e passar o mouse, você pode ver que a cor do texto muda para branco, dando-nos o efeito exato que queremos. 59. 63 - efeito de cartão expansivo criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este belo efeito de pairar cartão. Você pode ver que temos esta imagem que fica em cima de um fundo branco. E quando passamos o mouse sobre isso, o cartão se expande verticalmente e a imagem se move para o topo. Em seguida, este texto vem do topo e se move para sua posição. Este é um efeito muito legal. Então vamos ver como podemos criá-lo. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de cartão. Então, dentro disso, vou adicionar outra div e dar-lhe uma classe de caixa de imagem. Então, obviamente, esta será a div que contém a nossa imagem. Então, dentro dele, adicionaremos nossa imagem. Em seguida, abaixo da caixa de imagem div, vamos adicionar outro com uma classe de conteúdo para adicionar o texto que aparece ao passar o mouse dentro desta div. Em seguida, vou adicionar um H2 e dizer cartão pairar. Então, finalmente, um parágrafo com algum texto fictício Lorem Ipsum. Tudo bem, vamos ao nosso CSS para estilizar isso. Vamos criar o fundo branco que fica atrás da imagem usando a div cartão. Então eu vou mirar isso. E eu vou adicionar posição relativa. Em seguida, largura, 300 pixels, altura 260 pixels. Então vou adicionar raio de borda, 10 pixels. Em seguida, para que o fundo branco seja visível na frente do corpo branco, vamos adicionar caixa-sombra, 0 pixels, cinco pixels, 20 pixels. Em seguida, RGB a, 0 , 0, 0, 0,5. E finalmente, vou adicionar a transição 0,3 segundos. Tudo bem, como você pode ver, o fundo branco não está aparecendo porque a imagem está cobrindo, mas está lá. Então, se eu voltar e mudar sua largura para 800 pixels, por exemplo, você pode ver que ela está visível agora. Tudo bem? Vou voltar e definir a largura para 300 pixels novamente. Em seguida, adicionarei preenchimento, 20 pixels de cima e de baixo e 40 pixels da esquerda e da direita. E você pode ver que o fundo branco está visível agora devido ao preenchimento que adicionamos a ele. Certo, vamos direcionar a div com a classe da caixa de imagem para estilizar a imagem. Vou adicionar posição, largura relativa, 100%, altura, 100% também. Em seguida, vou direcionar a imagem em si e adicionar largura, 100% de sua largura de contêiner e raio de borda, 10 pixels. Como você pode ver, a imagem agora está reduzida. 60. 64 - efeito de marvel criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este belo efeito de pairar cartão. Como podem ver, temos este cartão que tem uma imagem do Capitão Marvel no centro. E ao passar o mouse sobre o cartão, esse efeito acontece quando a imagem fica maior e se move para a direita. E, ao mesmo tempo, esse texto à esquerda aparece e se move do centro para ser posicionado à esquerda. E como você pode ver, ele contém um título, um parágrafo e um link. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de cartão. Então, dentro disso, vou adicionar outra div com a classe de conteúdo. E dentro disso vamos adicionar o conteúdo. Vou começar adicionando um H2 e dizendo Capitão Marvel. Então, abaixo disso, vou adicionar um parágrafo e adicionar algum texto fictício. Então, finalmente, uma etiqueta âncora. E diga “leia mais”. É isso para o conteúdo, vou abaixo da div conteúdo e adicionar uma imagem. Então vou adicionar a nossa imagem. Então, como você pode ver, temos o conteúdo na parte superior e nossa imagem está sentada na parte inferior. Muito bem, vamos para o nosso CSS e apontar a div do cartão. Em seguida, vou adicionar posição, largura relativa, 500 pixels e altura 300 pixels. Então eu vou adicionar display flex para fazer o conteúdo ea imagem ficar lado a lado, assim. Então queremos enviá-los verticalmente. Então eu vou voltar e adicionar itens de alinhamento. Centro. Eu também adicionarei gradiente linear de fundo. E eu adicionarei esse valor de gradiente. Então, finalmente, vou adicionar um raio de borda 20 pixels. E agora você pode ver que a div cartão agora tem este fundo gradiente e algum raio de borda em torno dos cantos. Muito bem, vamos trabalhar na nossa imagem e centrá-la dentro do cartão. Vou segmentá-lo e adicionar posição absoluta inferior 0. E, a fim de centrá-lo, eu vou adicionar esquerda 50%. Em seguida, transforme, traduza X negativo 50 por cento. Então queremos diminuir sua altura um pouco. Então eu vou adicionar altura 400 pixels. E finalmente, transição 0,5 segundos. E agora você pode ver que a imagem está centrada dentro do Cardiff e sua altura é menor. Muito bem, vamos trabalhar no efeito de pairar. Ao passar o mouse sobre o cartão, queremos que a imagem fique um pouco maior e, em seguida, mova para a direita. Então eu vou aqui e dizer, quando passarmos sobre o cartão. Vou fazer algumas mudanças aconteceram na imagem. Vou definir sua altura para 450 pixels em vez de 400 pixels. Eu também vou adicionar esquerda 80 por cento para movê-lo para a esquerda. E agora, quando eu voltar e passar o mouse sobre o cartão, você pode ver a imagem fica maior e se move para sentar no lado direito e o lado esquerdo fica vazio porque é aqui que vamos posicionar o conteúdo. Então vamos voltar ao nosso CSS e direcionar a div de conteúdo. Em seguida, vamos adicionar posição relativa 40% da largura do cartão. Depois à esquerda, 20 por cento. Cor, branco. Transformação de texto, capitalize. E finalmente, transição 0,5 segundos. E agora você pode ver que o conteúdo está sentado 20% da largura do cartão da esquerda, então queremos escondê-lo. E ao passar o mouse sobre o cartão, queremos que ele apareça novamente e se mova para sentar à esquerda. Então eu vou voltar para dentro da div conteúdo e adicionar opacidade 0. Então, abaixo disso, direi ao passar o mouse sobre o cartão, selecionarei o conteúdo e adicionarei 5% à esquerda em vez de 20%. E opacidade um de novo. E agora você pode ver que o texto está oculto. E ao passar o mouse sobre o cartão, o texto aparece novamente e se move para sentar à esquerda. A única coisa que resta agora é estilizar os elementos dentro do conteúdo. Fez isso eu vou segmentar o H2 e adicionar margem 0, preenchimento 0 também. Em seguida, vou direcionar o parágrafo e adicionar margin-bottom 20 pixels. Então, finalmente, vou direcionar a tag âncora e adicionar posição. -Relativo. Exibição. Cor de bloco inline. Esta cor cinza escuro. Em seguida, preenchimento, cinco pixels da parte superior e inferior e dez pixels da esquerda e da direita. Em seguida, fundo, branco, decoração de texto, nenhum. E finalmente, raio de fronteira 10 pixels. Então agora você pode ver os elementos de conteúdo e o link estão parecendo muito melhor. E nós já completamos este belo efeito de cartão. Era simples, mas fixe. Vejo-te na próxima lição. 61. 65 - efeito de cartão de fronteira criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar outro efeito de pairar card. Você pode ver que tínhamos um fundo azul escuro com o número 88 nele. E ao pairar sobre isso, o fundo azul encolhe e converte-se em um pequeno círculo com uma borda azul em torno dele. E o número 88 torna-se menor e sua cor muda para azul escuro. Além disso, este texto aqui aparece, e temos um título, um parágrafo e um link. Muito bem, vamos criar este efeito. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de cartão. Então, dentro dele, vou adicionar outro div com uma classe de rosto e rosto um. Então esta será a div que contém o título e o parágrafo e o link. Tudo bem, dentro dele vou adicionar um H2 e dizer serviços. Então, abaixo disso, vou adicionar um parágrafo e adicionar algum texto fictício. E, finalmente, uma etiqueta de âncora. E diga “leia mais”. Então, abaixo dessa div, vou adicionar outra div com a classe de fase e fase dois. Então esta será a div que tem um fundo azul escuro. E dentro dele vou adicionar um H2 e adicionar o número 88. Ok, então eu vou mover para o nosso CSS e segmentar a div com a classe de cartão. E adicione posição, largura relativa, 300 pixels, 400 pixels, depois plano de fundo, branco. E, finalmente, transição, 0,5 segundos. Tudo bem, agora temos um fundo branco que está centrado dentro do navegador. Ao passar o mouse sobre este cartão, queríamos ter alguma sombra de caixa. Então eu vou dizer ao passar o mouse sobre a div com a classe de cartão, eu vou adicionar caixa-sombra, 030 pixels, 50 pixels, e RGBA. 0, 0, 0, 0 aponta para. E agora, quando eu passar o mouse sobre o cartão, nós temos esta bela sombra de caixa abaixo do cartão. Tudo bem, vamos continuar. Vou mirar o div com a classe do rosto. E esta classe é aplicada tanto na primeira quanto na segunda fase. Então é uma classe comum. Então eu vou adicionar posição absoluta, topo 0, esquerda 0 também. Então queríamos ocupar o tamanho total do cartão div. Então vamos adicionar largura 100% e altura 100% também. Vou adicionar display flex. Em seguida, justifique o conteúdo. Centralizar para centralizar o texto horizontalmente e alinhar os itens no centro para centralizá-lo verticalmente. E como você pode ver, o texto agora está centralizado horizontal e verticalmente. Muito bem, vamos trabalhar na primeira fase que tem o nosso conteúdo. Eu vou mirar a div com a classe da fase um, e eu vou adicionar preenchimento, 20 pixels. Em seguida, o texto alinhe o centro para centralizar a cor de fundo do texto branco E finalmente, cor, esta cor azul escuro. Então eu vou mirar o H2 dentro desta div. E eu vou adicionar margem superior 80 pixels. Então, haverá espaço suficiente acima do H2 para o número 88 se sentar dentro. Vamos também estilizar a etiqueta âncora. Eu vou mirá-lo. E adicione exibição, bloco inline-. Em seguida, marque os 20 pixels superiores para obter algum espaçamento entre ele e o parágrafo. Em seguida, preencha cinco pixels da parte superior e inferior e dez pixels da esquerda e da direita. Depois, decoração de texto. Nenhum. Cor. Este azul escuro. E finalmente, fronteira. Dois pixels, sólido. Nossa cor azul escuro. Transformação de texto Var1. Capitalizar, peso da fonte, negrito. E, finalmente, a transição 0,3 segundos. E como você pode ver, a etiqueta âncora está muito melhor. Certo, vamos estilizar a segunda fase. Agora, vou apontar para ele e adicionar cor de fundo. Nossa cor azul escuro, em seguida, transição 0,5 segundos. E agora você pode ver que temos este fundo azul escuro que fica em cima do primeiro. Vamos também vender o H2 dentro dele. Vou direcioná-lo e adicionar o tamanho da fonte, 120 pixels, cor branca. E, finalmente, a transição de 0,5 segundos. Certo, vamos trabalhar no efeito de pairar. Agora. Vamos pairar sobre o cartão. Queremos que este fundo azul diminua e se torne um círculo. Então eu vou dizer ao passar o mouse sobre o cartão, vou selecionar a segunda fase e adicionar apertados 80 pixels. Largura 80 pixels, depois limite de raio, 50% para torná-lo um círculo. E como você pode ver, quando passamos o mouse, o fundo se torna menor, entra em um círculo. Vamos posicioná-lo corretamente. Vou voltar novamente e adicionar top 40 pixels. Esquerda. 50 pixels. Em seguida, transforme, traduza X negativo 50% para centralizá-lo horizontalmente. Então vou adicionar cor de fundo, transparente. E finalmente, borda, dois pixels, sólido, nossa cor azul escuro. E agora, quando eu passar o mouse sobre o cartão, você pode ver o círculo agora está posicionado corretamente em cima da div conteúdo. Agora, vamos agora o H2. Ao passar o mouse, direi quando passarmos o mouse sobre o div cartão, selecionarei o H2 que está dentro da segunda fase. E eu mudarei sua cor para nossa cor azul escuro. E vou adicionar tamanho de fonte 32 pixels. E agora, quando eu voltar e pairar, você pode ver a cor do cabeçalho torna-se azul e seu tamanho fica menor, dando-nos o efeito que queremos. Finalmente, só queremos mudar o fundo do link quando passarmos o mouse sobre ele. Então eu vou aqui e dizer ao passar o mouse sobre a etiqueta âncora, vou mudar a cor de fundo para azul escuro. E vou mudar a cor para branco. E agora, quando eu passar o mouse sobre o link, você pode ver sua cor de fundo muda para azul, e a cor do texto muda para branco. E é isso, pessoal. Agora criamos o efeito de card. Nós queremos. 62. 66 - efeito de tratamento duplo criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este belo efeito de pairar cartão. Você pode ver que temos este fundo cinza escuro que tem alguma sombra de caixa em torno dele. E também tem uma imagem e o design da palavra abaixo da imagem. E quando passamos o mouse sobre ele, ele se move para o topo e sua cor muda para esta cor rosa. E outro fundo branco que contém um parágrafo e um link se move para o fundo e fica atrás desse fundo rosa. Muito bem, vamos começar a criar este efeito de card. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de cartão. Então, dentro disso, vou adicionar outra div com uma classe de fase um. Então esta será a face do cartão que contém a imagem e o design da palavra. Então, dentro dele, vou adicionar outra div com uma classe de caixa de imagem. E dentro disso eu vou adicionar uma tag de imagem e adicionar nossa imagem. Então eu vou adicionar um h3 e adicionar o design da palavra. Então, abaixo disso, adicionarei outra div com a classe da fase 2. E dentro dele, adicionarei uma div com uma classe de conteúdo. Em seguida, um parágrafo dentro dessa div com algum texto Lorem Ipsum. Então, finalmente, uma etiqueta de âncora abaixo disso. E eu vou dizer leia mais. Agora, eu vou para o meu CSS e segmentar a div cartão. Em seguida, vou adicionar posição, relativo, cursor, ponteiro e largura 300 pixels. Então agora você pode ver que a div cartão tem uma largura de 300 pixels e fica no centro do navegador. Muito bem, vamos voltar e apontar a div com a classe do rosto um que contém a imagem e o h3. Então, dentro dele, adicionarei posição, largura relativa, 300 pixels, 200 pixels. Cor de fundo, preto por enquanto. Então eu vou voltar e adicionar display flex, coluna de direção flexível para fazer a imagem eo H3 sentar-se um acima do outro. Em seguida, para centrá-los horizontalmente e verticalmente dentro do rosto um div vou adicionar justificar centro de conteúdo, e alinhar itens centro também. Então, finalmente, adicionarei a transição 0,5 segundos. Muito bem, agora vamos apontar a segunda div com a classe da fase 2. Então, dentro dele, vou adicionar posição. Largura relativa, 300 pixels, altura, 200 pixels. Cor de fundo, branco. Em seguida, também exibir flex, direção flexível, coluna. Justificar o conteúdo, centro. Alinhe o centro de itens também. Em seguida, dimensionamento de caixa, border-box e, finalmente, preenchimento de 20 pixels. Então agora, como você pode ver, temos este fundo branco que contém o parágrafo e o link, e ele fica atrás do preto. Muito bem, vamos também adicionar alguma sombra de caixa a este fundo branco. Vou aqui adicionar caixa-sombra, 020 pixels, 50 pixels, RGB, 0.8000. Então, finalmente, adicionarei a transição 0,5 segundos. E como você pode ver, o fundo branco agora tem essa sombra em torno dele. Tudo bem, agora vamos trabalhar nos efeitos pairando. Queremos que as duas fases se sentem uma acima da outra. E ao passar o mouse, queremos que a primeira fase se mova para cima e a segunda fase se mova para baixo. Então, para fazer isso, eu vou aqui dentro da div com a classe da fase 1 e adicionar transformar, traduzir y 100 pixels. Então, abaixo disso, direi ao passar o mouse sobre o div do cartão, selecionarei o rosto um div. Então vou mudar o fundo preto para esta cor rosa. Eu também vou adicionar transformar, traduzir y de volta para 0 novamente. E agora você pode ver que o fundo preto foi movido para o fundo em 100 pixels. E quando passamos o mouse sobre o cartão, ele volta para sua posição no topo e sua cor muda para esta cor rosa. Vamos fazer o mesmo para a segunda div. Na parte inferior, vou entrar na div com a classe da fase 2, e vou adicionar transformar, traduzir Y negativo 100 pixels, depois abaixo disso. E quando passar o mouse sobre o cartão, vou selecionar o rosto para div. E adicione transformação. Traduzir Y 0 novamente. E agora você pode ver que o fundo branco é deslocado para o topo e está cobrindo o preto. E ao passar o mouse sobre o cartão, esse efeito acontece onde o fundo branco se move para o fundo e o fundo rosa se move para o topo, dando-nos o efeito exato que queremos. Mas queremos que o fundo rosa apareça na frente do branco, não o oposto. Então eu posso voltar aqui dentro do rosto uma div e adicionar z index 1. Vamos também mudar a cor de fundo de preto para esta cor cinza escuro. E como você pode ver, o rosto um div tem esta cor cinza e ele está sentado na frente do branco fez, e quando pairando sobre o cartão, são efeitos ainda funciona corretamente. Muito bem, agora vamos trabalhar no estilo do nosso cartão. Vou direcionar a div com a classe da caixa de imagem que contém a nossa imagem. E adicionarei opacidade 0,2 e transição 0,5 segundos. Então, abaixo disso, direi, ao passar o mouse sobre o cartão, selecionarei a caixa de imagem div e adicionarei opacidade novamente. E como você pode ver, a imagem e o H3 agora são um pouco transparentes. E ao passar o mouse sobre o cartão, eles ficam completamente visíveis novamente. Vamos voltar e apontar a imagem dentro do rosto, uma div. Em seguida, vou adicionar largura 100 pixels. Então eu também vou segmentar o H3, que é o design da palavra, e adicionar margem dez pixels 00. Então eu vou adicionar preenchimento, 0, cor, branco, texto, alinhar, centro. E finalmente, tamanho da fonte, 25 pixels. Então agora você pode ver a imagem e o H3 estão parecendo muito melhor. Em seguida, vamos trabalhar no parágrafo e na tag âncora dentro da segunda fase div, vou direcionar o parágrafo primeiro. Então eu vou adicionar margem 0, preenchimento 0. Bem, então eu vou apontar a etiqueta âncora e adicionar margem 15 pixels 00. Em seguida, vou adicionar display, inline-block, em seguida, text-decoração. Nenhum, peso da fonte, 900 cores. Esta cor cinza. Em seguida, preenchendo cinco pixels. E, finalmente, fronteira. Um pixel, sólido, esta cor cinza também. E agora você pode ver quando eu passar o mouse sobre o cartão, o parágrafo e a etiqueta âncora estão parecendo muito melhor. Vamos apenas fazer uma coisa final e que é mudar a cor de fundo do link ao passar o mouse sobre ele. Vou aqui e dizer, ao passar o mouse sobre a etiqueta âncora, adicionarei cor de fundo, nossa cor cinza, depois cor branca. E agora, quando eu passar o mouse sobre o link, você pode ver suas mudanças de cor de fundo e sua cor muda para branco também. É isso, todo mundo. Nós terminamos agora este efeito de cartão legal, e eu acho que está olhando incrível. 63. 67 - efeito de camião criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito de pairar card em camadas. Você pode ver quando eu passar o mouse sobre o cartão, este efeito acontece onde as camadas brancas do cartão são giradas por um grau específico, dando-nos este efeito. Além disso, há um espaço em branco na parte inferior que aparece e contém esse texto. Muito bem, vamos começar a criar este efeito. Vou entrar aqui dentro do meu HTML e adicionar um div, dar-lhe uma classe de cartão. Em seguida, dentro dele, vou adicionar outra div com a classe de caixa de imagem. Então esta será a div que contém a imagem. Então, abaixo disso, adicionarei outra div com uma classe de detalhes. E dentro dele vou adicionar um H2 e dizer John Doe. E então eu vou adicionar uma tag de quebra de linha. E eu vou adicionar uma extensão e apenas dizer fundador. Então eu vou para o meu CSS e direcionar o carro div. Então vou adicionar posição, largura relativa, 320 pixels, altura, 350 pixels. Fundo, branco, raio da borda, quatro pixels. Em seguida, caixa de sombra, 02 pixels. Dez pixels, RGBA, 0, 0 , 0, 0, 0,2. E agora você pode ver que temos este fundo branco que fica no centro do navegador. Muito bem, vamos criar as duas camadas brancas que se sentam abaixo do nosso cartão. Vamos criá-los usando o antes e depois pseudo elementos. Então eu vou selecionar V antes pseudo elemento da div cartão. Eu também selecionarei a tarde. E eu vou adicionar conteúdo. Cordas vazias. Posição, absoluta, superior, 0, esquerda, 0, largura, 100%, altura, 100% também. Quando limítro-raio. Para pixels, cor de fundo, vermelho por enquanto. Então, finalmente, a transição de 0,5 segundos. E agora você pode ver que temos este fundo vermelho que fica em cima do cartão. Vamos voltar e mudar a cor de fundo para branco. Novamente. Eu também adicionarei z-index minus1. Para fazer o fundo branco sentar-se atrás do cartão. Tudo bem, agora, ao passar o mouse sobre o cartão, queremos que os pseudo elementos antes e depois girem para que possamos obter o nosso efeito. Então eu vou aqui e dizer quando pairar sobre o cartão, Eu vou fazer algumas mudanças acontecer com o pseudo elemento antes. Vou adicionar transformar, girar 20 graus. Eu também adicionarei box-shadow, 02 pixels, 20 pixels, RGB, 0, 0, 0, 0, 0 ponto 2. Vamos fazer o mesmo para o pseudo elemento após. Vou copiar isso, colá-lo novamente e mudar antes para depois. Então eu vou apenas mudar o grau de rotação para dez graus em vez de 20. E agora você pode ver quando eu passar o mouse sobre o cartão, este efeito acontece quando temos dois fundos brancos que giram por ângulos diferentes, dando-nos este efeito de cartão em camadas. Muito bem, vamos trabalhar na caixa de imagem div que deve conter a nossa imagem. Vou segmentar e adicionar posição absoluta, top 10 pixels, esquerda, 10 pixels, inferior dez pixels, direita? Dez pixels também. Então esta div terá dez pixels de espaço em torno dela. Então vou adicionar cor de fundo. Esta cor cinza escuro. Então, finalmente, a transição de 0,5 segundos. Então aqui temos um fundo escuro que é cercado por div cartão V. Então, ao passar o mouse sobre o cartão, queremos que este fundo cinza escuro seja deslocado um pouco para o topo. Então eu vou aqui e dizer, quando passar o mouse sobre o cartão, vou selecionar a caixa de imagem div. E vou mudar o fundo para 80 pixels em vez de 10 pixels. E agora você pode ver quando eu passar o mouse sobre o cartão, o fundo cinza escuro encolhe um pouco da parte inferior, deixando esse espaço em branco. E é aqui que vamos posicionar o nosso conteúdo. Então eu vou voltar aqui e mirar a div com a classe de detalhes. Então eu vou adicionar posição, absoluta, esquerda, 10 pixels, direita? Dez pixels, em baixo, dez pixels também. Então vou adicionar altura, apenas 60 pixels. E, finalmente, o centro de alinhamento de texto. E agora você pode ver que temos nossos detalhes no fundo. Tudo bem, vamos continuar trabalhando e vamos para aqui e mirar o H2. Então vou adicionar margem 0, preenchimento 0 também. Depois, peso da fonte, 600. Tamanho da fonte, 20 pixels. Cor. Esta cor cinza. Em seguida, finalmente, o texto transforma em maiúsculas. E agora você pode ver que o H2 tem essa cor cinza e está sentado exatamente na posição que queremos. Vamos continuar. Vou mirar o espaço dentro deste H2, que é a palavra fundador. Então eu vou adicionar o peso da fonte, 500. Tamanho da fonte, 16 pixels. Em seguida, colorir esta cor vermelha. E agora os detalhes estão exatamente do jeito que queremos. E ao passar o mouse sobre o cartão, o fundo cinza diminui e os detalhes aparecem. Vamos esconder os detalhes atrás do fundo cinza. Voltarei aqui dentro da caixa de imagem div. E eu adicionarei o índice z também. E agora você pode ver que os detalhes estão escondidos. E ao passar o mouse sobre o cartão, eles aparecem novamente abaixo do fundo cinza escuro como queremos. Legal. Agora vamos voltar e adicionar nossa imagem. Eu vou para o meu HTML e eu vou entrar na caixa de imagem div e adicionar imagem. Então vou adicionar a nossa imagem. Então eu vou para o meu CSS e segmentar a imagem e adicionar posição. Absoluto, superior, 0, esquerda, 0, largura, 100%, altura, 100%. Então, finalmente, encaixar objeto, cobrir. E agora você pode ver nossa imagem agora aparece dentro da div. E ao passar o mouse sobre o canto da imagem, DIV encolhe em direção ao fundo e os detalhes do cartão aparecem dando-nos o efeito exato que queremos. 64. 68 - efeito de escamação criativo: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este belo efeito de pairar cartão. Você pode ver que tivemos esta imagem e este texto na parte inferior diz o título da postagem. E quando passamos o mouse sobre o cartão, esse efeito acontece onde o título se expande e ocupa o tamanho total do cartão Neste parágrafo e link aparecer abaixo do título, a imagem também desaparece. Então vamos começar a criar esse efeito. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de cartão. Então, dentro disso, vou adicionar outra div, dar-lhe uma classe de caixa de imagem. Então isso conterá nossa imagem, mas adicionaremos isso mais tarde. Então, abaixo disso, adicionarei nosso conteúdo. Vou adicionar um div, dar-lhe uma classe de conteúdo. Em seguida, dentro disso, vou adicionar um h3 e dizer título do post, em seguida, uma tag de parágrafo, e, em seguida, algum texto fictício Lorem Ipsum. E, finalmente, uma etiqueta de âncora. E diga Leia mais. Em seguida, vou mover para o meu CSS e segmentar a div com a classe de cartão. E adicione posição. Largura relativa, 300 pixels, altura 400 pixels. Em seguida, adicionarei uma cor de fundo. E finalmente, sombra de caixa, 0 pixels ao longo do eixo x, depois 30 pixels ao longo do eixo y, modo que tenhamos alguma sombra abaixo do nosso cartão quando um valor de desfoque de 30 pixels também, então a cor da sombra será RGBA, 0,5000. E agora você pode ver que temos este cartão com um fundo preto e alguns textos sombra abaixo dele. Muito bem, vamos trabalhar no estilo do conteúdo para que pareça como queremos. Eu irei aqui e direcionarei a div com a classe de conteúdo. Então eu vou adicionar posição Absolute para posicioná-lo relativamente ao carro fez então queremos posicioná-lo na parte inferior do cartão. Então, vamos adicionar 0 pixels inferiores. Em seguida, largura, 80% da largura do cartão e altura, apenas 80 pixels. Então vou adicionar cor de fundo, branco. Então agora você pode ver que temos este fundo branco que contém nosso cabeçalho e nosso parágrafo, e ele fica no canto inferior do cartão. Muito bem, vamos centralizar este fundo branco horizontalmente. Uma vez que tem uma largura de 80% da largura do cartão, isso significa que o espaço restante aqui é 20% da largura do cartão. E se mudarmos o conteúdo para a direita em 10% da largura do cartão, haverá 10% de espaço restante à esquerda e 10% de espaço restante à direita. E isso será enviado para o conteúdo. Então vamos fazer isso. Vou aqui adicionar 10 por cento à esquerda para mudar a div de conteúdo para a direita em 10 por cento. Como você pode ver, está centrado agora. Muito bem, vamos voltar e continuar a trabalhar. Vou adicionar centro de alinhamento de texto para centralizar o texto dentro da div conteúdo. Então, finalmente, transição 0,5 segundos. Tudo bem, a fim de ver o que estamos fazendo, Vamos apenas fazer a altura do conteúdo div 100% em vez de 80 pixels. Certo, vamos estilizar os elementos dentro da div de conteúdo. Agora, vou direcionar o H3 e adicionar o tamanho da fonte, 30 pixels. Transformação de texto. Maiúsculas, a margem, 25 pixels. Tudo bem, vamos estilizar o parágrafo que eu vou segmentar e adicionar largura. 80% da largura do conteúdo quando margem dez pixels da superior e inferior e da esquerda e direita para centralizá-lo horizontalmente. Em seguida, tamanho da fonte 18 pixels. E finalmente, transição, 0,5 segundos. Legal. Agora vamos direcionar a tag âncora e adicionar texto, decoração. Nenhum, cor de fundo, preto, cor branca. Em seguida, preenchimento, 10 pixels da parte superior e inferior e 15 pixels da esquerda e da direita. Em seguida, exiba a margem de bloco inline, os 10 pixels principais. Quando finalmente a transição, 0,5 segundos. Tudo bem, você pode ver que não há espaço suficiente, mas isso é porque nós definimos a largura do conteúdo para apenas 80% da dívida do cartão. Mas quando o definimos para 100%, nossa div de conteúdo ficará muito melhor. Então eu vou voltar aqui dentro da div de conteúdo, e eu vou definir a altura de volta para 80 pixels novamente. E também adicionarei overflow oculto para ocultar o texto fora dos 80 pixels do nosso conteúdo div. Legal. Agora queremos fazer a div conteúdo expandir e ocupar toda a largura e altura da div cartão quando passarmos o mouse sobre o cartão. Então eu vou aqui e dizer, quando passarmos sobre o cartão. Vou fazer algumas mudanças acontecerem na div de conteúdo. Vou definir sua altura para 100% e sua largura para 100% também. E agora você pode ver quando eu passar o mouse sobre o cartão, o fundo branco fica maior e ocupa o tamanho total da corrente faz. Mas você também pode ver que ele foi deslocado para a esquerda. E isso é porque nós definimos sua propriedade esquerda para 10%, a fim de centralizá-la horizontalmente, se você lembrar. Então podemos corrigir isso facilmente adicionando 0% à esquerda em vez de 10%. E agora você pode ver o fundo branco se encaixa na div cartão perfeitamente e cobri-lo completamente. Muito bem, vamos adicionar alguns toques finais a este efeito. Queremos que o parágrafo e a tag âncora sejam visíveis e apareçam somente quando passarmos o mouse sobre o cartão. Então eu vou entrar no parágrafo e um link e definir a opacidade para 0. Então eu vou direto aqui e digo, ao passar o mouse sobre o cartão, selecionarei o parágrafo. Eu também selecionarei a etiqueta âncora com isso. E eu vou adicionar opacidade um, em seguida, atraso de transição 0,5 segundos para que ele vai demorar um pouco antes de aparecer. E agora, quando eu passar o mouse sobre o cartão, você pode ver que o parágrafo e a etiqueta âncora aparecem depois que o fundo branco aparece completamente, dando-nos esse efeito legal. Tudo bem, vamos em frente e adicionar a imagem a este cartão. Voltarei ao meu HTML. E aqui dentro da div com a classe da caixa de imagem, vou adicionar nossa imagem. Então eu vou voltar para o meu CSS e segmentar a div com a classe de caixa de imagem. Então eu vou adicionar posição, absoluto, topo 0, esquerda 0 também. Em seguida, largura, 100%, altura 100%. E finalmente, transição 0,5 segundos. Certo, vamos contar a imagem. Vou direcioná-lo e adicionar largura, 100%, altura, 100% também. Em seguida, ajuste objeto, tampa. E finalmente, transição 0,5 segundos. E agora você pode ver que a imagem está ocupando o tamanho total de seu contêiner e olhando exatamente como queremos. Tudo bem, Finalmente, ao passar o mouse sobre o cartão, queremos que a imagem se torne transparente. Então eu vou aqui e dizer ao passar o mouse sobre a div com a classe de cartão, Vou selecionar a imagem e adicionar opacidade 0. Então é isso, pessoal. Você pode ver quando passamos o mouse sobre o cartão, a imagem gradualmente se torna transparente. E agora nós terminamos este efeito de cartão de aparência legal. 65. 69 - efeito de texto smoking usando css: Olá a todos. Nesta lição, vamos criar esses efeitos de desvanecimento fumegante criativo para o texto. Então vamos começar aqui em nosso HTML, e eu vou adicionar um UL. Depois LI. E colocarei cada carta dentro de um aliado. Então eu vou adicionar S bem aqui. Então eu vou copiar isso e colá-lo novamente muitas vezes. E então eu vou adicionar todas as letras nota. Então agora vamos adicionar alguns estilos. Vou para o meu CSS e vou começar adicionando uma cor de fundo cinza escuro ao corpo. Então eu vou mirar na UL. E vou adicionar margem 0, preenchimento 0 também. Então eu vou adicionar display flex para que todas as letras serão exibidas lado a lado, assim. Agora vamos segmentar os itens da lista que contêm as letras. E adicionarei nenhum estilo de lista para me livrar dessas balas. Em seguida, adicionarei cor, branco, depois tamanho da fonte, 100 pixels, peso da fonte, negrito, espaçamento entre letras, dez pixels. E, finalmente, transição para segundos. E agora a palavra parece melhor. Se dermos uma olhada em uma demonstração, e se você olhar cuidadosamente para o movimento das letras, você pode ver que elas estão se movendo para cima e girando ao mesmo tempo. Então, vamos usar a função de tradução para fazer as letras se mover para cima e a função girar para fazê-los girar obviamente. Então vamos para o nosso CSS e quando eu passar o mouse sobre a UL, eu quero fazer algumas mudanças acontecerem com o aliado. A primeira mudança é que eu quero adicionar transformação, girar 45 graus. Em seguida, um espaço. Eu também quero que as letras sejam traduzidas verticalmente no eixo y por menos 200 pixels, para que elas se movam para cima. Agora, quando eu passar o mouse sobre a UL, você pode ver as letras se movendo para cima e girando ao mesmo tempo. Agora, eu também quero que a opacidade das letras seja 0. Então eu vou aqui e adicionar opacidade 0. E agora, quando pairando novamente, as letras em que são transparentes. Agora, a fim de fazer este efeito esfumaçado ou desfocado, podemos usar uma propriedade CSS chamada filtro. Então eu vou direto aqui dentro dos itens da lista e Adicionar filtro desfoque 20 pixels. Então esta é uma propriedade CSS que vai fazer os textos embaçados e dar-lhe este efeito esfumaçado agradável. E quanto maior o número que você adicionar aqui, borrada ele vai ficar. Então agora, quando eu passar o mouse sobre a nossa palavra, você pode ver que estamos recebendo exatamente o efeito que queríamos. Agora, resta uma coisa. Não queremos que este efeito aconteça a todas as letras ao mesmo tempo. Queremos que a primeira letra desapareça primeiro, depois a segunda, depois a terceira, e assim por diante. Podemos fazer isso facilmente usando a propriedade delay de transição, que atrasará a ocorrência da transição. Então o que eu vou fazer é ir aqui e dizer LI, cólon. Criança traço, parênteses abertas, 1, parênteses fechadas. Isto irá segmentar o primeiro filho dos itens da lista, que é a letra S. Em seguida, vou copiar isto e colá-lo quatro vezes. E eu vou mudar o número todas as vezes. Então, dois para a segunda letra, três para a terceira, para, para a quarta, cinco para a quinta. Então eu vou direto aqui para a primeira letra e adicionar atraso de transição 0 porque queremos que ele desapareça imediatamente. Então vamos copiar isso e torná-lo 0,4 segundos para a segunda letra de 0,8 segundos para o terceiro, 1,2 segundos para o 4,6, um segundo para o quinto. E agora, quando eu passar o mouse sobre a palavra, as letras devem desaparecer uma após a outra. Como assim. 66. 70 - Preenchimento 70: Olá a todos. Nesta lição vamos criar este efeito de preenchimento de texto. Ao passar o mouse sobre esta palavra, você pode ver este bom preenchimento em efeito está acontecendo. Então, vamos realmente fazer isso. Vou começar aqui no meu HTML adicionando um H1. E vamos apenas dizer texto. Em seguida, vamos para o nosso CSS para adicionar alguns estilos. Vamos atacar o H1. Em seguida, adicione margem, 0, preenchimento, 0, família de fontes. O Daniel. Tamanho da fonte, 120 pixels. Cor. Esta cor cinza claro. Texto transforma em maiúsculas para fazer todas as letras maiúsculas. E finalmente, posição relativa. Então aqui você pode ver que é maior e todas as letras são maiúsculas. Tudo bem, agora vamos criar o texto mais escuro que virá quando passarmos o mouse sobre este texto cinza claro, vamos usar o pseudo elemento antes. Então eu vou aqui e adicionar um cólon antes. E eu vou adicionar conteúdo. Textos. Posição, absoluta, superior, 0, esquerda, 0, cor. Queremos que seja mais escuro. Então vamos usar esta cor cinza escuro. Certo? Então aqui vocês podem ver que temos o texto escuro sentado em cima dos textos claros e encobrindo-o. Isto é porque nós dissemos esquerda e superior direita aqui para 0. Então, por exemplo, se eu mudei a guia 100% em vez de 0, você pode ver que ela está agora sentada sob o texto claro. Tudo bem, vamos mudar de volta para 0 novamente. Agora, queremos fazer o preenchimento e o efeito sobre este texto mais escuro acontecer quando passarmos o mouse. Então vamos fazer a transição da propriedade width, que significa que vamos fazer a largura do texto escuro 0. E, em seguida, pairando, vamos fazer 100% novamente. E vamos suavizar a ação usando a propriedade de transição. Peguei-o. Vamos chegar a ele. Eu vou aqui dentro do elemento pseudo antes e adicionar largura 0, estouro escondido. E, finalmente, a transição. Todos os 0.5 segundos. Em seguida, sobre o pairando sobre o H1, Eu vou fazer algumas mudanças aconteceu com o elemento pseudo antes. Vou mudar a largura de volta para 100 novamente. Então ele aparecerá com sua largura total, dando-nos o efeito de preenchimento que estamos indo para. E lá vamos nós. É assim que você pode fazer um bom preenchimento de texto em efeito de uma maneira muito rápida e fácil. 67. 71 - ícones de mídia social com transformações: Olá a todos. Nesta lição vamos criar este efeito agradável sobre os ícones de mídia social. Então, quando eu passar o mouse sobre qualquer ícone, você pode ver que um fundo verde chuta, a cor do ícone muda e fica maior. Então vamos ver como podemos fazer isso. Certo? Então aqui no meu HTML, você pode ver que eu tenho um link para a biblioteca de ícones Font Awesome que nos dará acesso a todos os ícones Font Awesome. Vou começar adicionando um div e dando-lhe uma classe de recipiente. Em seguida, dentro dele vou adicionar um link e dado uma classe de ícone. Então, dentro disso, vou adicionar i para Font, ícones impressionantes. E vou dar-lhe uma classe de f, a, b, f a Facebook. Esta classe vamos apenas exibir o ícone do Facebook. Então vou copiar este link, colá-lo quatro vezes. E adicionarei os outros ícones que queremos, como Twitter, Google, YouTube e Instagram. Então aqui você pode ver que nossos ícones estão todos sentados em uma fileira e eles estão parecendo muito feios. Então vamos ao nosso CSS e fazê-los parecer um pouco melhor. Começarei mirando no contêiner. E eu vou adicionar display flex. Então eu vou direcionar os links com a classe de ícone. Adicione largura 90 pixels e, em seguida, altura 90 pixels também. Em seguida, adicionarei uma cor de fundo. Esta cor branca, margem, dez pixels, raio da borda, 30 por cento. E, finalmente, a cor é uma cor verde agradável. Vamos mantê-lo em movimento. Vou entrar aqui dentro do contêiner e adicionar o centro do alinhamento de texto para centralizar o ícone, assim. Então eu vou para o ícone e adicionar sombra caixa e adicionar alguma sombra caixa. Em seguida, posição relativa. Certo? Agora, precisamos trabalhar nos ícones dentro do nosso link. Então eu vou dizer ícone, I para direcionar os ícones. Em seguida, adicionarei a altura da linha, 90 pixels para que o ícone seja centralizado verticalmente. Em seguida, tamanho da fonte 25 pixels e transição ou 0,2 segundos. Bom. Agora nossos ícones estão exatamente como queremos. Então vamos passar para o próximo passo. Ao passar o mouse sobre qualquer link, quero fazer com que o ícone mude as cores para corresponder ao plano de fundo. E quero que o ícone se torne um pouco maior. Então vamos fazer isso. Eu vou dizer ícone em pairar. Vou fazer algumas alterações acontecerem no ícone Font Awesome. Vou adicionar transformação, escala 1.3, para que se torne maior e colorir esta cor branca, assim como a cor de fundo. Então, agora, quando eu passar o mouse sobre qualquer ícone, você pode ver que a cor se torna a mesma que o plano de fundo, e é por isso que não somos capazes de vê-lo mais. Mas vamos para o próximo passo. Precisamos criar o fundo verde em movimento que aparece quando passamos o mouse sobre os ícones. Então vamos criar isso. Eu vou para a direita aqui e adicionar cólon ícone antes. E adicionarei conteúdo, posição vazia, absoluta, largura, 120 por cento e altura 120% também. Em seguida, cor de fundo ou cor verde. Então eu vou adicionar esquerda menos 110 por cento e top 90 por cento. Então agora você pode ver que temos nosso fundo verde e ele está sentado nesta posição por causa dos valores superior e esquerdo que adicionamos a ele. Vamos adicionar transformação. Gire 45 graus para girar o fundo verde. Tudo bem, agora precisamos fazer com que se mova através do nosso link quando passarmos o mouse sobre ele. Então, se dermos uma olhada em nossa demonstração, você pode ver que quando eu passar o mouse sobre o link e o fundo verde vem de sua posição inicial, então se move através do link até que ele sobe em direção ao canto superior direito um pouco, em seguida, retorna e cobre o link. Então vamos usar animações CSS para criar esse efeito. Teremos três etapas de animação. Na primeira etapa, o fundo estará em sua posição original. Então, no segundo estágio, em 50% da duração da animação, o fundo será deslocado um pouco para o canto superior direito do link. Em seguida, passamos para o terceiro estágio. Em 100% da duração, ele voltará para cobrir o link. Então vamos fazer isso. Eu vou direto aqui no meu CSS e criar uma nova animação. E dê um nome de animação. E dentro dela, com 0% da duração da animação, direi esquerda menos 110 por cento e 90 por cento superior. Se você se lembra, esses são os valores que nós já aplicamos aqui. Então isso deve fazer a animação começar a partir da posição original do fundo verde. Em seguida, vou copiar isso. Cole de novo. E com 50% da duração da animação, mudarei a esquerda para 15% e a parte superior para menos 30 por cento. Em seguida, adicione 100%. Eu vou fazer a esquerda menos 10% e o topo menos 10% também. Agora, precisamos adicionar esta animação ao fundo verde. Então eu vou subir aqui. E ao passar o mouse sobre o ícone, farei algumas mudanças acontecerem no fundo verde. Vou adicionar animação, em seguida, o nome da animação, que é animação, em seguida, duração da animação 0,7 segundos. E a iteração de animação contar um, porque queremos que isso aconteça apenas uma vez quando passarmos o mouse. E, finalmente, o modo de filme de animação para a frente porque queremos que o fundo verde permaneça em sua posição final após a animação terminar. E uma coisa esquerda, que é esconder as partes do fundo verde fora do link, subindo aqui dentro do seletor de ícones e adicionando overflow oculto. E agora, quando eu passar o mouse sobre o link, você pode ver que o fundo verde vem do canto inferior esquerdo, em seguida, move-se para cima até que ele se desloca um pouco além do canto superior direito e, em seguida, retorna e cobre o link. E enquanto tudo o que está acontecendo, o ícone em si fica maior e é colorido muda para coincidir com o plano de fundo. 68. 72 - efeito de borda de texto girado criativo usando transformações CSs: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este efeito agradável sobre a borda. Você pode ver quando eu passar o mouse sobre este texto, esse efeito acontece onde as bordas superior e inferior aparecem, depois as da esquerda e da direita. Então temos bordas giradas que aparecem um após o outro também. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de caixa. Em seguida, dentro que eu vou adicionar um span e dar-lhe uma classe de girado. Então esta será a extensão que tem bordas giradas. Então, abaixo disso, vou adicionar um H1. E dentro disso eu vou dizer CSS. Em seguida, eu vou adicionar um elemento de quebra de linha para que os próximos textos vai sentar-se na seguinte linha. Então eu vou adicionar outra extensão e dentro dela eu vou dizer fronteira. Então nós envolvemos essa palavra span apenas para ser capaz de estilizá-la individualmente. Então, após este período, vou adicionar outro elemento de quebra de linha. E eu vou dizer hover, em seguida, outro elemento de quebra de linha e dizer efeito. Tudo bem, então eu vou para o meu CSS e alvo a div externa com a classe de caixa. Então vou adicionar posição, largura relativa, 200 pixels, altura 200 pixels também. Em seguida, tamanho caixa, border-box. E finalmente, cor de fundo, amarelo. Então agora você pode ver que temos esta caixa amarela centrada no navegador. Muito bem, vamos trabalhar no H1. Voltarei atrás e o alvo. Em seguida, adicionarei margem 0, preenchimento 0 também. Em seguida, cor, esta cor cinza escuro. E para centralizar o texto, vou adicionar posição absoluta, topo, 50 por cento. Esquerda, 50 por cento também. Depois, transforme. Traduzir, 50 por cento negativos e 50 por cento negativos. Em seguida, vou adicionar texto align, center, tamanho da fonte, 24 pixels. E, finalmente, transformação de texto, maiúsculas. Certo, vamos adicionar uma cor diferente à palavra “borda”. Você se lembra que nós embrulhamos dentro do espaço. Então vamos apontar para este espaço. E adicione cor. Esta cor verde e tamanho da fonte, 30 pixels. Incrível. Vamos trabalhar nas bordas desta caixa amarela. Vamos criar essas bordas usando os pseudo elementos antes e depois. Então eu vou aqui e alvo o pseudo elemento antes da caixa div. Em seguida, dentro disso, vou adicionar conteúdo strings vazias, posição absoluta 0, esquerda 0 também. Então queremos que ele ocupe toda a largura e altura da caixa div. Então vamos adicionar largura 100% e altura 100% também. Em seguida, vamos adicionar borda superior quatro pixels sólido. A nossa cor verde. E borda inferior quatro pixels sólidos. Nossa cor verde de novo. Em seguida, dimensionamento de caixa, border-box e, finalmente, transição de 0,5 segundos. Então agora você pode ver que temos essas duas bordas do pseudo elemento antes na parte superior e na parte inferior do fundo amarelo. E isso é porque nós definimos a altura e a largura do fundo amarelo para 100%. Então, se ocupar toda a largura e altura da caixa div, tudo bem, agora vamos animar essas duas bordas. Vou voltar aqui e adicionar escala de transformação x 0. Então, a fim de fazer as fronteiras crescerem, novamente , ao pairar, vou aqui e dizer, quando passarmos o mouse sobre a caixa, eu quero fazer algumas mudanças no pseudo elemento antes. Vou adicionar a escala de transformação x de volta a um novamente. E agora você pode ver as duas bordas agora estão escondidas porque nós definimos x como 0. E quando eu passar o mouse sobre a caixa div, as duas bordas crescem novamente até que sua escala x se torne uma novamente. Muito bem, vamos trabalhar nas bordas esquerda e direita. Agora. Vamos criá-los usando o pseudo elemento após. Então eu vou apenas copiar o elemento pseudo antes. Cole novamente e mude antes para depois. Então. Dentro disso, eu vou mudar a fronteira superior dois fronteira direita. E fronteira de baixo para a borda esquerda. Eu também copiarei o efeito pairando. Cole e mude antes para depois. Então eu mudarei a propriedade transform de scale x para scale. Por quê? E agora você pode ver quando eu passar o mouse sobre o texto, este efeito acontece onde temos bordas esquerda e direita que aparecem e crescem ao longo do eixo y juntamente com os pseudo elementos após. Tudo bem, agora vamos trabalhar nas bordas giradas. Se você se lembrar, adicionamos um span em nossa marcação HTML com uma classe de girado, e dissemos que vamos usá-lo para criar as bordas giradas. Vamos ver como podemos fazer isso. Primeiro, vou apontar para ele e adicionar posição, absoluta. Então largura, 100%, altura, 100% também. Exibir cor do bloco e do plano de fundo. Amarelo. Então queremos transformá-lo em 45 graus. Então eu vou adicionar transformar, girar 45 graus. Em seguida, finalmente, caixa de dimensionamento borda caixa. E agora você pode ver que temos este fundo amarelo que é girado em 45 graus e fica em cima do primeiro fundo. Tudo bem, agora vamos criar o efeito de borda para este fundo girado. Eu vou aqui e copiar todo esse código da caixa div e é efeitos de pairar. Então eu vou colar e direcionar a div girada, não a Caixa 1. Então, que irá selecionar o antes e depois pseudo elementos do girado. Então eu vou aqui e alvo o pseudo elemento antes da div girada ao pairar. E o pseudo elemento depois da div girada ao pairar também. E agora você pode ver quando eu passar o mouse sobre o texto, esse efeito acontece onde as quatro bordas dos fundos girados crescem e ficam maiores, dando-nos esse efeito realmente legal. Por último, queremos acrescentar alguns atrasos de transição entre as fronteiras para que apareçam um após o outro. E nós vamos aqui quando pairar sobre o pseudo elemento depois da caixa div. E adicionarei atraso de transição 0,5 segundos para que, ao passar o mouse nas bordas direita e esquerda da caixa div, esperemos 0,5 segundos. Então eu vou aqui e adicionar um atraso de transição 1 segundo. E, finalmente, aqui e adicionar atraso de transição 1,5 segundos. E agora, quando eu pairo, você pode ver que as fronteiras estão aparecendo uma após a outra, dando-nos o efeito exato que queremos. 69. 73 - introdução de animação: Olá a todos. Bem-vindo a esta nova seção do curso onde estaremos falando sobre animações CSS e quadros-chave. Agora, a forma como animações CSS e quadros-chave funcionam é muito simples. Primeiro, você tem que definir ou criar uma regra de animação CSS e nomeá-la qualquer nome que você quiser. Em segundo lugar, você adiciona essa regra de animação. Você criá-lo para qualquer elemento HTML na página para que a animação funcione nele. Isso será muito mais fácil se a virmos em ação. Então aqui no meu HTML, eu tenho essa div por si só. Eu adicionei alguns estilos a ele no meu CSS. Acabei de adicionar uma largura, altura e uma cor de fundo vermelho. Então, quando visualizamos isso no navegador, podemos ver nosso div vazio está sentado aqui. Agora vamos voltar ao nosso CSS e ver como usar quadros-chave e animação nesta div. Então dissemos que a primeira coisa que precisamos fazer é definir a regra de animação. E para fazer isso, escrevemos assim nos quadros-chave do Mark. Em seguida, o nome da animação, digamos em movimento. E, em seguida, dentro dele, usamos palavras-chave como de e para. Então eu vou dizer de adicionar, transformar, traduzir X 0, e depois transformar traduzir x 1, 0, 0, 0, 0, 0. Então o que está acontecendo aqui é que criamos uma regra de animação. E o que esta regra de animação fará é levar o elemento de um estado para outro. Então ele vai tomar o elemento de traduzir X 0, significando de sua posição original para traduzir x 1, 0, 0, 0, 0, 0, cinza. Agora, se eu for para o navegador e recarregar minha página, você pode ver nada alterado. Element está apenas sentado em seu lugar e nenhum movimento aconteceu. E isso é porque criamos a regra de animação aqui, mas não informamos ao navegador qual elemento receberá essa animação. Então, se você está familiarizado com qualquer linguagem de programação, isso é muito semelhante a funções onde você cria um bloco de código que deve fazer alguma coisa. E então você adiciona esse bloco de código para os elementos você deseja que esse bloco de código para efeito. Então o que devemos fazer aqui é dizer ao navegador em que elemento esta animação deve funcionar. E isso pode ser feito facilmente indo para o próprio elemento, que é o div. Portanto, há duas propriedades necessárias para fazer a animação funcionar neste elemento. O primeiro é o nome da animação, que está se movendo. E o segundo é a duração da animação. Ou quantos segundos queremos que esta animação leve do início ao fim. Digamos três segundos. E agora, quando eu vou para o navegador e recarrego, você pode ver que a div agora está começando de traduzir X 0, em outras palavras, de sua posição original e move para traduzir x 1, 0, 0, 0, 0, 0 durante um período de três segundos. Isto é tudo para esta lição. Essa foi uma introdução à animação CSS e quadros-chave. Aprendemos o que são e como funcionam. E nas próximas lições, aprenderemos mais propriedades que nos darão mais controle ao usar CSS, animações e quadros-chave. Então, vejo você então. 70. 74 - crie animações de CSS com mais etapas: Olá a todos. Nesta aula, vamos aprender como criar animações com mais de duas etapas. Então, vamos entrar. Aqui está o código da lição anterior. Se você der uma olhada nas palavras-chave que estamos usando aqui, você pode ver que temos de e para. E isso significa que o elemento mudará deste primeiro estágio para este estágio final ao longo de uma duração específica, que no nosso caso é de três segundos. Agora, e se quisermos adicionar mais mudanças e mais estágios? Por exemplo, em vez de fazer com que o elemento se mova horizontalmente da primeira posição para a segunda posição, se quisermos que ele se mova da primeira posição para uma segunda e, em seguida, 2 terceiro 1. Então teríamos três estágios. Bem, podemos fazer isso facilmente usando o método de porcentagem em vez das palavras-chave de N2. Então o que podemos fazer aqui é que podemos remover isso da palavra-chave e adicionar 0% em vez disso. Portanto, este 0% significa o ponto de partida da duração da animação. Então eu removerei esses dois e adicionarei 100%. Isso significa em 100% da duração da animação, ou três segundos. Então o que eu estou fazendo aqui é que eu estou apenas dizendo que em 0% da duração da animação, ou seja, o ponto em que eu quero que a animação comece, eu quero adicionar essa transformação, que na verdade não mudará nada para o elemento. Assim, o elemento começará de onde originalmente estava em nossa página. E, em seguida, em 100% do tempo de duração da animação, ou seja, no final do segundo três, eu quero que o elemento esteja nesta posição. Então, durante esses três segundos, o elemento se moverá da primeira posição para a segunda posição. E nada deve mudar da lição anterior. Então eu vou para o navegador e recarregar. E você pode ver que a div está se movendo de sua posição original para sua nova posição em três segundos, exatamente como fizemos na lição anterior. Vamos voltar ao nosso CSS. Agora, isso ainda são dois estágios. Queremos mais estágios do que isso. Podemos fazer isso facilmente usando o método de porcentagem porque ele nos dá muitas opções de 0% a 100%. Então, por exemplo, se eu for aqui e mudar isso 100% para 50%, e depois abaixo disso, adicione 100%. Em seguida, Transform, traduza 1 , 0, 0, 0 no eixo x. E então digamos 500 pixels em direção ao fundo. Então agora temos três estágios. O primeiro estágio, o segundo estágio e o terceiro estágio. Então o que vai acontecer é de 0% a 50% da duração da animação, ou seja, do início ao ponto médio da duração da animação. Ou durante o 1.5º segundo dos três segundos completos, a posição do elemento deve mudar de sua posição original horizontalmente para esta segunda posição. E, em seguida, nos restantes 1,5 segundos, o elemento mudará desta posição para esta nova posição, que é 1, 0, 0, 0, 0 à direita e 500 pixels para a parte inferior da página a partir de sua posição original. Então, quando eu vou para o navegador e atualizar, você pode ver que o elemento está se movendo de seu lugar original para um ponto 1, 0, 0, 0, 0 à direita durante o 1,5 segundo. E então se move para uma nova posição, que ainda é 1, 0, 0, 0, 0 para a direita e 500 pixels para a parte inferior durante o 2.5º segundo. E depois disso retorna à sua posição original, uma vez que a duração da animação é concluída. Agora podemos fazer a duração da mudança diferente para cada etapa. Por exemplo, se eu mudar esses 50 por cento para apenas 10 por cento, nesta situação, o primeiro estágio acontecerá muito, muito mais rápido porque acontecerá em um período de apenas 10 por cento dos três segundos. Enquanto o segundo estágio vai acontecer mais lento porque vai acontecer de 10 por cento a 100%, ou seja, durante um período de 90% dos três segundos. Então vamos para o navegador e ver como isso se parece. Você pode ver que o primeiro estágio está acontecendo muito mais rápido agora, enquanto o segundo está acontecendo mais lento. Então é isso para esta lição, pessoal, se vocês tiverem alguma dúvida sobre isso, deixem-na na seção de perguntas e respostas e eu farei meu melhor para ajudar a vê-los na próxima lição. 71. 75 - propriedade de modo de preenchimento de animação: Olá a todos. Bem-vindo a esta nova lição onde estaremos aprendendo sobre a propriedade do modo de filme de animação. Tudo bem, então o que fizemos na última lição foi que fizemos essa div movida para a direita, cem, dez mil pixels, depois para o fundo, 500 pixels, assim. E depois que a animação terminar, você notará que a div está apenas aparecendo de volta ao seu lugar original. Isso pode parecer estranho. Então, e se quisermos fazer a div ficar em sua posição final onde a animação termina em vez de aparecer de volta assim. Bem, podemos fazer isso usando a propriedade de modo de filme de animação, que basicamente diz ao navegador o que fazer com o elemento fora da janela de animação, ou seja, antes da animação começar e depois dela terminar. Então aqui estamos lidando com o segundo caso, que é depois que a animação termina. E há duas opções. O primeiro é o elemento irá aparecer de volta ao seu lugar original, é o padrão. E o segundo é o elemento permanecerá em sua posição final. E vamos fazer isso usando a propriedade modo de filme de animação. Então, de volta ao nosso CSS. Vou entrar aqui dentro do seletor de div e adicionar o modo de filme de animação. E temos quatro valores. O primeiro é nenhum, que não faz nada fora da janela de animação. Ele só dirá, quando a animação estiver concluída, retorne a div ao seu estado original antes da animação. E, claro, é o valor padrão. O segundo valor é para a frente, que deve nos interessar em nossa situação porque forwards diz ao navegador para tomar a última etapa da animação aqui e aplicá-la ao elemento no final da animação. Então, agora, quando eu vou para o navegador e recarrego, você pode ver que o elemento permanece em sua posição final e não aparece de volta ao seu lugar original antes da animação. Pessoalmente, acho que isto parece mais realista. Agora, também podemos usar um valor chamado para trás. Então, para demonstrar isso, eu vou voltar para o meu CSS. Eu vou aqui e adicionar outra propriedade que é atraso de animação. E digamos três segundos. E o que isso fará é fazer a animação esperar três segundos antes de começar. Então, se eu ir para o meu navegador e atualizar, você pode ver a div esperar três segundos e, em seguida, começa a voltar para o nosso CSS. Agora, digamos que queremos que a animação comece a partir de 500 pixels para a direita e não de seu lugar original na página. Eu vou para aqui e mudar isso para 500 pixels em vez de 0. Eu também mudarei 10% para, digamos 50 por cento. Porque eu quero que o movimento horizontal leve mais tempo para que possamos realmente vê-lo. E também mudarei a duração da transição para cinco segundos para que possamos ver o que está acontecendo claramente. Agora, de acordo com o código que temos aqui, o que deve acontecer é que a animação deve esperar três segundos, e então deve começar a partir deste ponto aqui, que é 500 pixels à direita de sua posição original. E então a animação deve continuar até terminar. E no final, a div deve permanecer em sua posição final porque dissemos que o modo de filme de animação para a frente. Então, quando eu vou para o navegador e recarrego, você pode ver a animação esperar por três segundos. Em seguida, o elemento parte 500 pixels para a direita. Em seguida, a animação começa e segue em frente como antes. Isto pode não ser o que esperavas. Você deve ter pensado que a div começaria aqui, 500 pixels para a direita, e então esperar três segundos. E depois disso, a animação começaria. Quero dizer, isso faz sentido porque definimos o ponto de partida da animação em 500 pixels para a direita. Mas este não é o padrão. Lembre-se que o padrão é que antes da animação começar e depois que ela termina, os elementos devem estar em seu lugar original. Fomos capazes de mudar a posição depois que a animação é concluída e torná-la o ponto final da animação usando para frente como um valor da propriedade modo de filme de animação. E também podemos fazer isso e fazer a animação começar no ponto de partida que definimos nos quadros-chave e não em seu lugar original usando outro valor que é para trás. Então eu vou voltar para o meu CSS e mudar isso para frente, para trás. Então eu vou para o meu navegador e recarrego. E agora você pode ver que a animação está começando a partir do ponto 500 pixels para a direita e não de sua posição original. Mas porque mudamos para frente, para trás, o div não está mais em seu lugar final, ele se encaixando de volta à sua posição original novamente, podemos corrigir isso facilmente aplicando tanto para frente quanto para trás. Então eu vou voltar para o meu CSS e mudar isso para ambos. E agora, quando eu ir e recarregar o navegador, você pode ver que o elemento permanece no ponto de partida por três segundos, em seguida, move-se para o ponto final, e ele permanece lá estão para a animação. Então, para encerrar as coisas, a propriedade do modo de filme de animação apenas nos diz onde os elementos devem começar e onde ele deve acabar. Se não o definirmos, o elemento, vamos apenas começar a partir de seu estado original antes de qualquer animação ocorrer. E ele também retornará a este estado original depois que a animação for concluída. Mas podemos usar a frente para fazer os elementos dia na etapa final da animação. Ou podemos usar para trás para fazê-lo começar a partir do ponto de partida da animação. Ou podemos simplesmente usar ambos para obter os dois resultados juntos. 72. 76 - propriedade de contagem de iteração de animação: Olá a todos. Bem-vindo a esta nova lição na transição de animação CSS e transforma curso, onde estaremos falando sobre a propriedade contagem de iteração de animação. Então contagem de iteração de animação simplesmente diz ao navegador quantas vezes a animação deve ser repetida e aceita valores de números. Então, dois significa que a animação será reproduzida duas vezes, e três significa que será repetida três vezes e assim por diante. Ótima. Então aqui no meu CSS temos tudo como era no final da lição anterior. Vou apenas remover esta propriedade de atraso de animação para que a animação comece imediatamente. E eu vou aqui e adicionar contagem de iteração de animação. Digamos três. E eu mudarei a duração da animação para três segundos para que seja um pouco mais rápido. E agora, quando eu for para o navegador e recarregar, você pode ver que a animação será repetida três vezes antes de terminar. Incrível. Nós também pode usar a palavra-chave infinito para fazer a animação reproduzir um número infinito de vezes ou para sempre. Então vamos voltar ao nosso CSS e tentar isso. Eu irei aqui e mudarei isso para infinito. E agora, quando eu voltar para o navegador e recarregar, a animação será reproduzida para sempre e nunca parará. E isso é tudo para aquela propriedade. É muito simples. Ele apenas especifica quantas vezes a animação deve ser reproduzida. Eu também quero falar um pouco sobre outra propriedade, que é a função de tempo de animação. Isso é semelhante à função de tempo de transição que aprendemos na primeira seção do curso. E aceita os mesmos valores que são 0s. Linear. Facilidade para dentro, facilidade para fora e facilidade para fora. Então vamos revisá-los juntos. Vou mudar este infinito para um e, em seguida, adicionar função de tempo de animação yz. Então o que é faz é que ele faz o movimento começa lento, em seguida, ir mais rápido quando n lento. Tudo bem, vamos ver como isso se parece. Mas primeiro, vamos mudar a duração da animação para cinco segundos novamente. Para ver o que está acontecendo. Vou para o meu navegador e recarrego. E com o plano de animação, você pode ver o efeito da facilidade. Tudo bem, vamos voltar e tentar aliviar, que começa rápido. O vento desacelera no final. Assim como. Em seguida, facilidade em, que se você se lembrar, começa devagar, em seguida, vai mais rápido no final. E facilidade de entrada, saída, o que é muito semelhante à facilidade, pois começa devagar, depois vai mais rápido no meio, depois volta a abrandar no final. E, finalmente, linear, o que tornará a taxa de mudança constante para que a velocidade do movimento seja a mesma ao longo da duração da animação. E então, pessoal, esta é a última lição, e eu verei vocês na próxima. 73. 77 - propriedade de direção de animação: Olá a todos. Bem-vindo a esta nova lição em nosso curso, onde estaremos falando sobre a propriedade direção de animação. As propriedades de direção de animação bastante simples. Ele apenas especifica a direção da animação e aceita quatro valores. O primeiro valor é normal, que é o padrão. E ele diz ao navegador para iniciar a animação do seu início aqui até o seu fim, bem aqui. Então vamos tentar isso. Eu vou aqui e adicionar direção de animação, normal. E quando eu vou para o navegador e recarrego, você pode ver que a animação está sendo reproduzida normalmente do início ao fim. O segundo valor que podemos usar é inverso, que diz ao navegador para reproduzir a animação. Em sentido inverso, o que significa que ele vai começar a partir do final das animações e terminar em seu início. Então eu vou mudar isso para reverter e voltar para o meu navegador. E você pode ver que a animação está sendo reproduzida ao contrário do final ao início. Ótimo. Agora, o terceiro valor é alternativo. E o que alternativo faz é fazer a animação ser reproduzida do início ao fim, depois voltar do fim ao início. E, em seguida, do início ao fim, e do fim ao início e sobre e sobre e sobre até que a contagem de iteração de animação termine. Então vou mudar isso para alternativo. E eu também mudarei a contagem de iteração de animação para infinito e a duração da animação para apenas três segundos. E agora, quando eu vou para o navegador e recarrego, a animação é reproduzida do ponto de partida para o ponto de chegada, e depois retorna do ponto de chegada para o ponto de partida e assim por diante. E também temos inverso alternativo, que faz a mesma coisa que alternativo, mas começa do fim ao início. Esta é a única diferença. Então vamos verificar isso. Vou adicionar rios alternativos. E você pode ver que começa do fim ao início e depois volta ao fim. E vai continuar fazendo isso para sempre. 74. 78 - método de shorthand de animação: Olá a todos. Nesta aula, nós vamos aprender como combinar todas as propriedades de animação CSS em uma única propriedade. Porque se você olhar para eles, há muitas propriedades e elas são confusas. Então podemos combinar todos eles em uma propriedade chamada animação. Mas como fizemos isso? Eu vou aqui e apenas dizer animação. E então a primeira propriedade que eu costumo adicionar é o nome da animação. Então eu vou dizer movendo, em seguida, um espaço e adicionar a duração da animação, que é de três segundos, em seguida, um espaço. E podemos colocar todas essas propriedades lado a lado. Não importa como são ordenados. Eles farão a mesma coisa, não importa o que apareça primeiro ou um segundo ou o que seja. Mas você tem que ter algo em mente se você quiser usar a propriedade de delay de animação, você tem que adicionar o tempo de atraso após o tempo de duração, porque o navegador sempre considera o primeiro valor de tempo que você adiciona aqui como a animação duração, o seguinte valor de tempo como o atraso da animação. Então, se eu adicionar cinco segundos aqui, o que vai acontecer é que o navegador vai esperar cinco segundos antes da animação começar. E assim, combinamos todas as propriedades em uma única propriedade. E temos a mesma animação que queríamos antes. 75. 79 - texto flutuante usando animação css: Olá a todos. Nesta aula, nós vamos aprender a criar este texto flutuando da direita para o efeito esquerdo. É uma animação infinita ou alista-se. E quando você olha para ele, você pode vê-lo gira da esquerda para a direita, depois da direita para a esquerda, e assim por diante e assim por diante. Vamos começar aqui em nosso HTML adicionando um H1. Em seguida, dentro dele, eu vou dizer vindo, então BR tags. E dentro disso, em breve. Agora vamos para o nosso CSS. Vou mirar no H1. Adicione o centro de alinhamento de texto para centralizar o texto. Cor. Branco. Depois, a família da fonte. Arial. Tamanho da fonte, 90 pixels, altura da linha, 90 pixels para esse espaçamento de duas letras. Em seguida, sombra de texto. Estes valores. E você pode ver agora que H1 está parecendo exatamente como queremos. Em seguida, queremos animá-lo. Então eu vou até aqui e criar uma nova animação. Eu vou dizer na marca quadros-chave. E agora vamos dar o nome de flutuador. Então eu vou dizer de e dentro dele, Transformar, Girar cinco graus para que o estado inicial do H1 seja girado cinco graus no sentido horário. Então eu vou dizer para transformar, girar menos cinco graus, modo que o estado final será girado cinco graus no sentido anti-horário. E agora vamos subir aqui e adicionar esta animação ao H1. Então eu vou dizer animação. Em seguida, o nome da animação float, em seguida, a duração da animação, três segundos e a função de tempo de animação linear. Em seguida, a contagem de iteração de animação, que é infinita. Claro que sim. Agora, quando eu recarrego o navegador, você pode ver que o H1 começa cinco graus no sentido horário, em seguida, move-se até girar para cinco graus no sentido anti-horário, em seguida, partes de volta ao seu estado inicial. Mas não queremos isso. Queremos que ele se mova do estado inicial para o estado final. E, em seguida, do estado final ao estado inicial. E continue fazendo isso. Podemos corrigir esse problema, definindo a direção da animação para alternar. Então eu vou aqui e adicionar direção de animação alternativa. E agora, quando eu recarregar o navegador, o H1 deve animar da maneira que queremos do estado inicial para um estado final. Estado final, dois estados iniciais, e assim por diante. 76. 80 - efeito de carregamento girando usando animação de css: Olá a todos. Nesta lição, vamos criar esta animação de carregamento CSS agradável usando quadros-chave, bem como Transformações CSS. Então aqui no meu HTML, vou adicionar um div e dar-lhe uma classe de carregamento. Então eu vou para o meu CSS. Aqui temos alguns estilos adicionados ao corpo que vai apenas enviar para o div e adicionar uma cor de fundo agradável. Então agora eu vou mirar nosso div com a classe de carregamento. Então eu vou definir sua largura para 100 pixels. Em seguida, é altura para 100 pixels também. Então eu vou adicionar cor de fundo, branco para que possamos vê-lo. Em seguida, o raio da borda 12 pixels para dar-lhe um bom cantos arredondados. Agora, quando vamos dar uma olhada em uma demonstração e torná-lo mais lento e fez a iteração de animação contar apenas um para que possamos ver claramente o que está acontecendo. Então, quando eu recarrego minha página, você pode ver a div começa a partir de sua posição original, então ele gira em seu eixo y em 180 graus. E quando está a 180 graus no eixo y, ele gira novamente em seu eixo x por mais 180 graus. Então agora temos três estágios da animação. O primeiro estágio é 0%, e neste ponto, o gire y e gire x estão em 0, significa que o elemento está em sua posição original sem qualquer rotação. Em seguida, o segundo estágio é de 50 por cento, no qual o elemento é girado em 180 graus ao longo apenas o eixo y e a rotação do eixo x ainda é 0. Em seguida, o estágio final é 100%, onde adicionamos a rotação no eixo x em 180 graus. Assim, nesta fase, o elemento será girado em seu eixo x e eixo y em 180 graus. Então vamos fazer isso. Vou para o meu CSS e criar uma nova animação e nomeá-lo de carregamento, por exemplo. Em seguida, dentro dele, vou adicionar o primeiro estágio 0% e dizer Transformar. Gire X 0 graus e gire y 0 graus lá também, para que a animação comece a partir de sua localização original. Em seguida, vou adicionar o segundo estágio da animação em 50 por cento. E eu vou dizer Transformar, Girar X 0 e girar y 180 graus. Então, em 50% da duração da animação, queremos que a div termine girada em 180 graus ao longo do eixo y. E, em seguida, no estágio final, em 100% da duração da animação, adicionarei Transformar, Girar X 180 graus, e girar y 180 graus também. E agora eu vou subir aqui e adicionar animação. Em seguida, nome da animação, que está carregando, em seguida, duração da animação, dois segundos, função de tempo de animação, linear. E finalmente, contagem de iteração de animação, que é, isso mesmo, infinita. E porque estamos usando as funções girar x, girar y, que funcionam em um ambiente 3D, devemos definir uma perspectiva. Então eu vou subir aqui até o corpo e adicionar perspectiva a 100 pixels. E agora, quando eu recarrego meu navegador, você pode ver o div. Começaremos girando 180 graus em seu eixo y, depois 180 graus em seu eixo x. E temos o efeito que queríamos. 77. 81 - driving um carro e um mote usando animação css: Olá a todos. Nesta lição, vamos criar esta bela animação infinita onde temos um carro e uma moto andando nesta estrada. A ideia por trás deste exemplo é simples. Temos uma imagem de fundo, que é esta estrada. E temos duas imagens. Um para o carro e o outro para a moto. A cor e as imagens da moto não estão se movendo. Eles estão fixos em sua posição. O movimento aqui está vindo do fundo. Então, estamos animando a posição de fundo para o canto inferior esquerdo da imagem para o canto inferior direito. Então vamos ver como podemos criar essa animação. Vou direto aqui no meu HTML e adicionar uma div com uma classe de fundo. Então eu vou para o meu CSS, segmentar o corpo e adicionar margem e preenchimento 0 para isso também. Então eu vou direcionar a div com a classe de fundo e adicionar altura 100 vh, em seguida, URL de fundo, e vamos adicionar a imagem de estrada. Em seguida, vou adicionar a posição de fundo, inferior esquerdo. Então este é o ponto inicial da nossa animação. Vamos animar a posição de fundo a partir da parte inferior esquerda para a taxa inferior para que possamos obtê-los movimento efeito de fundo que queremos. Então vamos fazer isso. Vou até aqui criar uma nova animação e chamá-lo de condução. E dentro dela. Lembre-se, queremos animar a posição de fundo da parte inferior esquerda para a parte inferior direita. Então eu vou dizer a partir da posição de fundo, parte inferior esquerda para a posição de fundo inferior direita. Ótima. Agora vamos adicionar esta animação ao nosso plano de fundo. Vou subir aqui e dizer animação. Em seguida, o nome da animação, que é dirigir, em seguida, a duração da animação, 15 segundos, depois linear e infinito, é claro, porque queremos que a animação continue repetindo indefinidamente. Então, agora, quando eu vou para o meu navegador e recarrego, você pode ver que a posição de fundo está mudando de parte inferior esquerda, a taxa inferior, e fazendo o plano de fundo se mover agradável e suave. E agora só precisamos adicionar as imagens do nosso carro e motos. Então eu vou voltar para o meu HTML e entrar nossa div e adicionar a primeira imagem com a classe de carro. Em seguida, a segunda imagem abaixo que com a classe de moto. Você pode ver que temos as imagens aqui, mas elas estão parecendo estranhas agora. Então vamos adicionar alguns estilos a eles. Vamos ao meu CSS e direcione a imagem do carro primeiro. Então eu vou adicionar posição absoluta para que possamos controlar a posição da imagem. Em seguida, adicionarei 300 pixels à esquerda e inferior menos 50 pixels. Em seguida, vou adicionar com 200 pixels para tornar a imagem do carro menor. E agora você pode ver que o carro está muito melhor. Agora, vamos fazer a mesma coisa com a moto. Vou voltar para o meu CSS, copiar isto, colá-lo novamente, e eu vou mirar a moto neste caso. Então eu vou mudar para a esquerda para 700 pixels para que ele vai ser uma cabeça do carro. Em seguida, para baixo para 55 pixels. Então, será um pouco maior e nos dará essa sensação 3D agradável. E, finalmente, mudarei a largura para 150 pixels. E agora, quando eu vou para o navegador e recarrego, você pode ver que temos exatamente a animação de condução que queríamos. E podemos controlá-lo. Assim, podemos torná-lo mais rápido ou mais lento alterando a duração da animação. Vou voltar para o meu CSS e torná-lo mais rápido, tornando a duração da animação dez segundos. E agora você pode ver que eles estão dirigindo mais rápido. Agora. Antes de terminar a lição, eu só quero que você saiba que eu tenho a imagem de fundo deste lado, três pic.com, que tem toneladas de imagens gratuitas que você pode usar. E eu consegui usando este link. Você pode apenas encontrá-lo nos Arquivos de Recursos. 78. 82 - rotor de texto usando animação css: Olá a todos. Nesta aula, nós vamos aprender como criar este rotador de texto usando CSS, animações e quadros-chave. Tudo bem, então aqui no meu HTML, vou adicionar H. um. E dentro dele, vou dizer que amo CSS. Então eu adicionarei um espaço vazio. Assim, este intervalo irá conter as diferentes palavras que irão mudar que nossa transição de animação e transforma. Mas vamos adicioná-los usando CSS. Agora, vamos para o nosso CSS. Você pode ver aqui eu adicionei algum estilo ao corpo, a fim de centralizar o H1 horizontal e verticalmente. Também adicionei esta cor de fundo à classe corporal. Agora vamos direcionar o H1 e adicionar cor. Branco. Em seguida, tamanho da fonte 50 pixels. Então eu vou mirar a extensão. E vamos usar o pseudo elemento antes para adicionar o conteúdo que queremos. Então, vou dizer transições de conteúdo em primeiro lugar. E aqui está. Em seguida, vou adicionar texto transformar em maiúsculas. Quando font-família, Arial. E a cor será esta bela cor azul. Agora, queremos mudar a palavra transições. Podemos fazer isso sem problema, criando uma nova animação e nomeando-o interruptor de palavra. Por exemplo. Quando estiver em 0%, vou definir o conteúdo para transições. Então, em 50%, vou configurá-lo para animações. E que 100%, eu vou configurá-lo para transformações. E agora vamos subir aqui e adicionar animação. Mudança de palavras. Cinco segundos, infinito. Então agora o que vai acontecer é que este conteúdo vai mudar de transições para animações, para transformações ao longo de um período de cinco segundos. E isso vai durar para sempre porque nós definimos a contagem de iteração de animação para infinito. 79. 83 - padrão de imagem animado usando animação cess: Olá a todos. Nesta aula, nós vamos aprender como criar este padrão de fundo animado usando animações CSS e quadros-chave. Então vamos fazer isso. Aqui no meu HTML, vou adicionar um div e dar-lhe uma classe de banner. Então eu vou para o meu CSS e alvo que div com a classe de banner. E eu vou adicionar altura 100 vh, então ele ocupa a altura total do navegador. Em seguida, adicionarei a imagem de fundo. Então eu vou dizer URL de fundo, e eu vou adicionar nossa imagem. Em seguida, vou adicionar a posição de fundo 00 para que a posição da imagem seja a parte superior esquerda. E quando vemos isso no navegador, você pode ver que temos nossa imagem padrão e é repetida. Mas porque é um padrão e outras partes da imagem parecem exatamente iguais. Estamos vendo como se estivesse ocupando toda a largura e altura. Mas isso não é verdade. A imagem é realmente repetida verticalmente e horizontalmente. Então, estamos vendo muitas imagens repetidas agora, nem uma única imagem. Agora a idéia por trás do padrão de fundo animado é animar a mudança na posição de fundo de 0 à esquerda e 0 na parte superior para 0 à esquerda. E o número de pixels igual à altura da imagem na parte superior. Então eu vou para o meu CSS e eu vou criar uma nova animação e nomeá-lo padrão animado. E eu vou dizer da posição de fundo 00 para a posição de fundo 0 da esquerda e 600 pixels do topo. Agora eu adicionei 600 pixels aqui, porque a altura do padrão é 600 pixels. Então, se você quiser que o padrão se mova verticalmente, você deve fazer a posição de fundo 600 pixels da nota superior. Agora eu vou subir aqui e dizer animação, padrão animado. 15 segundos, linear e infinito, claro. E agora, quando eu recarrego meu navegador, você pode ver que a imagem agora está se movendo verticalmente até que ela se mova 600 pixels, que é o fim de uma imagem e o início de outra, e então move outros 600 pixels e assim por diante e assim por diante. Agora, é muito fácil fazer o padrão se mover horizontalmente. Então eu vou para o meu CSS e fazer este 600 pixels 0 para que ele não se mova verticalmente. Então eu adicionarei 800 pixels da esquerda. E adicionei 100 pixels porque é a largura da minha imagem. Minha imagem tem 600 pixels por 800 pixels. E agora, quando eu vou para o navegador e recarrego, você pode ver a imagem de fundo está se movendo horizontalmente. E, claro, podemos fazê-lo mover-se horizontalmente e verticalmente ao mesmo tempo, voltando para o meu CSS e alterando o 0 de volta para 600 pixels novamente. E agora você pode ver que o padrão está se movendo horizontalmente e verticalmente. Ao mesmo tempo. 80. 84 - botão de shaking de hover com animação CSS: Olá a todos. Nesta lição, vamos criar este efeito agradável sobre a agitação para o nosso botão. E, claro, usaremos animação CSS para fazer isso. Então, antes de começarmos, queríamos ver como esse efeito de agitação está funcionando. Aqui nesta demonstração, eu fiz a duração da animação muito alta para que possamos ver exatamente o que está acontecendo. Então, quando eu passar o mouse sobre o link, você pode vê-lo gira um pouco para a direita, em seguida, um pouco para a esquerda, Quando um pouco para a direita novamente, e, finalmente, retorna à sua posição original. Portanto, isto deve ser muito fácil de fazer. Tudo bem, vamos fazer isso. Eu vou para o meu HTML e eu vou adicionar uma tag âncora e apenas dizer paira-me. Então eu vou para o meu CSS e adicionar alguns estilos. Vou adicionar um fundo cinza escuro ao corpo. Então, abaixo disso, direcionarei a tag âncora e adicionarei decoração de texto. Nenhum. Em seguida, cor, branco. Família Font, Sans Serif. Tamanho da fonte 40 pixels. Borda, três pixels. Branco sólido. Acolchoamento. 40 pixels da parte superior e inferior, e 80 pixels da esquerda e da direita. Então vou adicionar transição ou 0,3 segundos. Então, quando passar o mouse sobre o link, quero que a cor e a cor da borda também mudem. Então eu vou copiar esta linha de código, colá-lo aqui, e eu vou mudar a cor branca para esta cor vermelha. Então, depois disso, eu também mudarei a própria cor para ler em vez de luz. Então, agora, quando eu passar o mouse sobre o link, você pode ver a cor da borda e a cor do texto mudam. Agora queremos criar o efeito de agitação. O que eu vou fazer é ir até aqui e criar uma nova animação. E eu vou dar um nome, sacudir. E dentro dela, direi que a 33% da duração da animação, quero que o link seja girado em 10 graus para a direita. E depois de 66 por cento da animação, eu quero que ela seja girada para a esquerda em 10 graus também. Então vamos usar menos 10 desta vez. E 100% da duração da animação. Eu quero que ele seja girado para a direita novamente em 10 graus. Então o que vai acontecer aqui é que o botão será girado para a direita, depois para a esquerda, depois para a direita, antes que ele volte para o seu lugar original. Ótimo. Agora vamos adicionar esta animação ao nosso botão sobre pairar. Vamos aqui e adicionar animação. Em seguida, nome da animação, agitar e duração da animação 0,3 segundos, depois linear. E, finalmente, a iteração de animação conta apenas uma vez ao passar o mouse. E agora, quando eu passar o mouse sobre o botão, você pode ver o efeito de agitação está acontecendo à direita, depois à esquerda, depois à direita novamente, e depois retorna à sua posição inicial. E esse é exatamente o efeito que queremos. 81. 85 - botão animado com animação css: Olá a todos. Nesta lição, vamos aprender como criar este link. Então, se você der uma olhada, você pode ver que temos um fundo vermelho que tem uma largura específica e ocupa toda a altura do nosso link. E esse fundo é distorcido e está se movendo da esquerda para a direita através do link. Quando eu passar o mouse sobre o link, você pode ver que o fundo vermelho vai ocupar toda a largura. E quando passamos o mouse para longe, ele volta a mover-se da esquerda para a direita. Então, como podemos criar esse efeito? Bem, este é um 1 fácil. Primeiro, vamos usar o pseudo elemento antes para criar o fundo vermelho. E vamos dar-lhe a altura total do comprimento e uma largura específica, e digamos 120 pixels. Então vamos incliná-lo um pouco usando a função de inclinação. E vamos aplicar uma animação para que ele continue se movendo da esquerda para a direita infinitamente. Então, quando passarmos o mouse sobre o link, faremos com que ele remova a função de inclinação, interrompa a animação, e faz com que ele ocupe toda a largura do link. Então, vamos realmente fazer isso. Aqui no meu HTML. Vou começar por ir aqui e adicionar um link. E dentro dela, vou dizer “paira-me”. Então eu vou para o meu CSS para adicionar alguns estilos. Vou adicionar um fundo cinza escuro ao corpo. Então, abaixo disso, direcionarei a tag âncora e adicionarei decoração de texto. Nenhum. Em seguida, cor, branco. Família Font. San Serif. Tamanho da fonte 40 pixels, borda, três pixels. Branco sólido, preenchimento, 40 pixels da parte superior e inferior e 80 pixels da esquerda e direita. E finalmente, posição relativa. Agora que o link está com boa aparência, precisamos criar o fundo vermelho usando o pseudo elemento antes. Então eu vou para o meu CSS e dizer dois pontos antes. E eu vou deixar o conteúdo vazio. Então eu vou fazer a cor de fundo vermelha. Então eu vou dizer top 0, esquerda 0 também. Em seguida, largura. Digamos 120 pixels e altura, 100% quando a posição absoluta. E então, quando olhamos para ele, você pode ver que ele tem um fundo vermelho, está ocupando a altura total do link e tem uma largura de 120 pixels. Mas você pode ver que as letras estão escondidas por baixo dela. Podemos facilmente corrigir isso, voltando para o elemento pseudo antes e adicionando z-index minus1. E agora você pode ver o texto está aparecendo na frente dele. Bom. Agora queremos distorcer um pouco. Então eu vou voltar e adicionar distorção Transform. E eu vou distorcê-lo em menos 15 graus. E agora você pode ver que está distorcido muito bem, como nós queremos. Bom. Agora queremos criar a animação que fará com que se mova da esquerda para a direita. Então eu vou até aqui e criar um novo nome de animação, movendo, por exemplo. E dentro dele, vou dizer de e eu quero que o fundo vermelho comece de fora do link. Então eu vou dizer esquerda menos 120 pixels, que é a largura do fundo vermelho. Desta forma, ele começará de fora do link. Para deixar essa idéia clara, Vamos tentar subir aqui e mudar para a esquerda de 0 para menos 120 pixels. Você pode ver que ele está agora localizado fora do link a partir da esquerda. Então este será o nosso ponto de partida. E bom. Agora vamos voltar e fazer isto 0 de novo. Então vamos completar a nossa animação. Então eu vou direto aqui e dizer dois à esquerda, 100%. Assim, o movimento de fundo vermelho terminará em 100% da largura do link para a esquerda, ou seja, fora do link da borda direita. Ótima. Agora vamos adicionar esta animação ao fundo vermelho. Vou subir aqui e adicionar animação. Em seguida, nome da animação em movimento E a duração da animação 1,2 segundos, depois linear, e finalmente infinita. E agora você pode ver que o fundo vermelho está se movendo da esquerda para a direita através do link. Então k, Agora precisamos escondê-lo fora do link. Então eu vou para a direita aqui no seletor de link e eu vou adicionar overflow escondido. Tudo bem, Agora, ao passar o mouse sobre o link, queremos iniciar a animação, remover a inclinação e fazer o fundo vermelho tomar a largura total. Então eu vou aqui mesmo. E quando passarmos o mouse sobre o link, eu quero fazer algumas mudanças aconteceram com o pseudo elemento antes. Então, em primeiro lugar, vou fazer a largura e 100%. Portanto, ele ocupa toda a largura do link e, em seguida, Transformar Inclinação 0 graus para torná-lo retornar à sua forma original. E finalmente, animação. Nenhum. Para iniciar a animação. Agora queremos que essas mudanças ocorram sem problemas. Então eu vou subir aqui no elemento pseudo antes e eu vou adicionar transição todos os zeros, cinco segundos. E agora, quando eu for recarregar, você pode ver o fundo vermelho. Continuaremos andando da esquerda para a direita até eu passar o mouse sobre o link e fazê-lo parar. Neste ponto, ocupa toda a largura. E quando eu pairar e continuaremos nos movendo de novo. 82. 86 - ilumine texto com animação css: Olá a todos. Nesta lição, vamos criar este texto de iluminação agradável usando animações CSS. Então esta é uma animação infinita e a mudança que está acontecendo aqui, porque uma mudança na cor e sombra de texto. Então, vamos realmente fazer isso. Primeiro de tudo, vamos começar adicionando a marcação do nosso HTML. Então eu vou aqui dentro do corpo, e vou adicionar uma lista desordenada. E dentro dele, vou adicionar uma lista de itens, e cada item da lista conterá uma letra. Bom, agora vamos ao nosso CSS e adicionar alguns estilos. Vou adicionar uma cor de fundo cinza escuro ao corpo. Então eu vou mirar na UL. E vamos adicionar margem 0, preenchimento 0 também. E vamos adicionar display flex para que todos os itens da lista serão exibidos lado a lado. Legal. Agora vamos adicionar alguns estilos às próprias letras da lista. Então eu vou mirar o LI dentro da UL. E eu vou adicionar o estilo de lista e depois a cor. E vou adicionar uma cor cinza mais clara quando o tamanho da fonte 18 pixels. E, finalmente, espaçamento de letras 15 pixels para obter algum espaço entre as letras. Ótima. Agora vamos criar a animação de iluminação. Eu vou aqui e criar uma nova animação e nomeá-lo iluminação. E dentro dele, eu direi a 0% da duração da animação, eu quero que a cor seja a cor cinza. E quero que a sombra de texto não seja nenhuma. Então nada vai mudar. Então eu vou copiar isso, colá-lo novamente duas vezes e apenas mudar 0% para 90 por cento. Em seguida, em 100% da duração da animação, vou mudar a cor cinza para esta cor amarela. E eu vou adicionar uma sombra de texto bem aqui. Agora, antes de tudo isso, eu realmente tentei muitos valores até que eu descobri que eu gosto desse valor. Então agora queremos adicionar esta animação às letras. Então eu vou subir aqui dentro do seletor de itens de lista e eu vou adicionar animação. Em seguida, o nome da animação, iluminação. Quando a duração da animação 1.4 segundos, linear e infinito, é claro. Então o que vai acontecer aqui é de 0% a 90 por cento dos 1,4 segundos, que é a duração da animação. As cartas não vão mudar. Nada vai acontecer com eles. Mas de 90% a 100% da duração da animação, as letras serão amarelas e teremos uma sombra de texto. Eu fiz a mudança acontecer em um curto período de tempo para dar-lhe uma sensação de iluminação ou uma lâmpada ligando e desligando rapidamente. Mas se a mudança acontecer lentamente, parecerá iluminação. Será muito suave e chato. Então vamos realmente ver isso. Você pode ver que a mudança está acontecendo rapidamente, dando-nos o efeito da iluminação. Mas se olharmos para nossa demonstração, você pode ver que as mudanças não estão acontecendo ao mesmo tempo. A primeira letra acende primeiro, depois a segunda, e depois a terceira, e assim por diante. Podemos configurar isso simplesmente usando a função de atraso de animação. Eu vou voltar para o meu CSS e eu vou segmentar o primeiro filho de uma lista itens. E eu vou dizer UL LI nth filho um. Então o que isso vai fazer é que ele irá direcionar o primeiro item da lista na UL, que é a primeira letra. Em seguida, vou adicionar atraso de animação 0 porque eu quero que a primeira letra acenda imediatamente. Então eu vou copiar tudo isso. Cole novamente, segmente a segunda letra desta vez e altere o atraso da animação para 0,1 segundos. Desta forma, esperará 0,1 segundos antes de acender. Então farei isso por todas as cartas. E cada vez que eu vou aumentar o atraso da animação 0,1 segundos para que eles vão acender um após o outro. Bom. Agora que adicionei todos os atrasos de animação, vamos dar uma olhada. Você pode ver a primeira letra acende primeiro, depois a segunda, e depois a terceira, e assim por diante, até a última letra quando a animação começa novamente, porque nós a tornamos infinita. 83. 87 - batida de coração com animação css: Olá a todos. Nesta aula, nós vamos aprender como criar este coração em CSS e como fazê-lo bater usando animação CSS. Esta será uma lição interessante. Então vamos ver como podemos fazer isso. Tudo bem, vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de coração. Então eu vou para o meu CSS. E vou começar adicionando uma cor de fundo cinza escuro ao corpo. Depois disso, vou mirar a nossa div com a classe do coração. E vou adicionar alguns estilos a ele. Vou começar adicionando posição, relativo. Em seguida, largura, 100 pixels, altura 100 pixels também. Cor de fundo. Esta cor vermelha, claro. Bom. Agora você pode ver que esta é apenas uma div normal com um fundo vermelho. Então vamos continuar trabalhando. Eu vou aqui e vou usar tanto o antes e o depois pseudo elementos para criar o coração. Então eu vou começar pelo pseudo elemento antes bem aqui. E eu vou deixar o conteúdo vazio. Então eu vou adicionar posição, absoluto, topo 0, esquerda 0, bem como, a largura 100% e altura 100%. Em seguida, vou adicionar cor de fundo. E vamos adicionar branco por enquanto. Bom. Agora você pode ver que temos o pseudo elemento antes com uma cor de fundo branco sentado acima da nossa div com uma classe de coração. Então o que precisamos fazer agora é fazer com que a div branca se mova em direção ao topo por metade de um apertado. Então eu vou voltar para o meu CSS. E dentro do pseudo elemento antes, vou adicionar transformar traduzir. Por quê? Menos 50%. Então agora você pode ver a div branca se move em direção ao topo, uma distância igual a metade de um apertado. Ótima. Agora vou copiar tudo isso. Cole de novo. E eu vou mudar de antes para depois. E eu vou mudar o fundo branco para, digamos verde. Agora, desta vez, queremos mover o elemento pseudo depois para a esquerda, não para o topo. Então eu vou para a direita aqui e mudar Traduzir Y para traduzir X. Agora você pode ver que ele se move para a esquerda, uma distância igual a metade de sua largura. Bom. Agora, eu vou aqui na div com a classe do coração. E eu vou adicionar transformar, girar, e eu vou girá-lo em 45 graus. Então agora você pode ver a div gira em 45 graus e ambos os pseudo elementos antes e depois giram com ele. Agora eu acho que você está dizendo para si mesmo, Ei, estamos quase lá e isso é certo. Tudo o que precisamos fazer agora para obter a forma do coração é ir bem aqui para o pseudo elemento antes e adicionar raio de fronteira 50 por cento. Então farei o mesmo para o depois. E agora você pode ver que temos a forma do coração que queremos. Vamos voltar e mudar a cor de fundo para ambos lerem também. Ok, agora nós temos. Em seguida, precisamos trabalhar na animação para fazer este coração bater. Aqui está uma demonstração lenta de nossa animação para que possamos vê-lo melhor. Vou recarregar a página. E você pode ver que o coração fica parado por um tempo. Em seguida, ele aumenta. Quando a escala para baixo um pouco, em seguida, escala-se novamente e, em seguida, diminui para o seu tamanho original. Fica quieto por um tempo. E, em seguida, repita o mesmo processo infinitamente. Então vamos ver como podemos criar isso. Vou para o meu CSS, criar uma nova animação e nomeá-lo pulsação. Em seguida, no início da animação, em 0%, vou adicionar transformar. Gire 45 graus para manter o coração girado. Em seguida, escala por um porque queremos que ele comece em seu tamanho original. Então eu vou copiar tudo isso e colá-lo novamente cinco vezes. E vou adicionar alguns intervalos por cento. Então eu vou adicionar 25 por cento, 3050, 7100%. Bom. Então, com 25%, manterei a escala igual, porque lembre-se, o coração fica parado por um tempo antes da animação começar. Então, de 0% a 25% da duração da animação, eu quero que o coração fique estático. Então, com 30% da duração da animação, aumentarei a escala para 1,4 vezes seu tamanho original para que o coração fique realmente grande. Em seguida, a 50 por cento, vou reduzi-lo um pouco mais. Então eu vou fazer um 1.2 e em 70 por cento, eu vou escalá-lo novamente para 1,4. Então, em 100%, eu quero reduzi-lo ao seu tamanho original, é claro, então eu vou deixá-lo assim. Agora, precisamos adicionar esta animação à nossa div. Então eu vou subir aqui e adicionar animação. Batimento cardíaco. E a duração da animação, mais importante por alguns segundos, linear e infinito, é claro. E agora você pode ver que nosso coração está batendo. Se eles ainda por um tempo, então fica maior, então um pouco menor do que maior novamente, então retorna ao seu tamanho original, e assim por diante e assim por diante. E esse é exatamente o efeito que queremos. 84. 88 - fundo de texto animado com animação css: Olá a todos. Nesta lição, vamos criar este fundo de textos animados. Então a idéia por trás disso é adicionar uma imagem de fundo ao texto e animar a propriedade position de fundo dessa imagem. Fácil o suficiente, certo? Então vamos ver como podemos fazer isso. Vou começar aqui no meu HTML adicionando um H, e eu vou apenas dizer animação CSS. Então eu vou para o meu CSS e eu vou começar adicionando uma cor de fundo azul ao corpo. Então eu vou mirar o H1. Adicione o tamanho da fonte, 200 pixels. O texto alinhe o centro para centralizar o texto. Transformação de texto em maiúsculas, plano de fundo. E adicionarei nossa imagem como fundo. Você pode ver que nossa imagem foi adicionada ao título, mas queremos que ela apareça como um fundo para o próprio texto. Podemos fazer isso usando uma propriedade chamada Clipe de terra ruim. Então eu vou aqui e adicionar o texto do clipe de fundo do webkit. Isso fará com que a imagem se torne o fundo do texto. Mas precisamos tornar a cor do texto transparente. Então você pode ver que o texto agora tem nossa imagem como um fundo. E agora queremos animar esse fundo. Então eu vou até aqui e criar uma nova animação e nomeá-lo, digamos, fundo do texto. Então, dentro dele, direi da posição de fundo 0 da esquerda e 0 da posição de cima para a posição de fundo, 100% da esquerda e 100% da parte superior. Então eu vou subir aqui e adicionar animação. Textos, fundo, 20 segundos, linear e infinito, claro. E agora você pode ver que o fundo é realmente animado de uma posição para outra, infinitamente nos dando a animação que queremos. 85. 89 - salto bolas com animação css: Olá a todos. Nesta lição, vamos criar esta animação de carregamento saltitante. Então você pode ver que temos cinco círculos e eles estão saltando aleatoriamente. Então vamos ver como podemos fazer isso. Vou começar por ir aqui no meu HTML, e vou adicionar uma URL. Então vou adicionar cinco itens de lista dentro dele. E esses itens da lista serão os círculos saltitantes ou bolas. Então eu vou para o meu CSS para adicionar alguns estilos. Vou começar aqui no corpo adicionando cor de fundo, esta cor cinza escuro. Então vou atacar a UL. E eu vou adicionar margem 0, preenchimento 0, em seguida, exibir flex. Agora vamos direcionar os itens da lista dentro da URL. E agora vamos adicionar o estilo de lista. Nenhum. Largura 30 pixels , altura, 30 pixels também. E, em seguida, cor de fundo, branco. Em seguida, a margem 0 da parte superior e inferior, e dez pixels da esquerda e da direita, porque queremos algum espaço entre os itens da lista. Então aqui nossos itens de lista sentados ao lado do outro porque nós definimos a propriedade de exibição da UL para flexionar. Vamos continuar. Voltarei para dentro do seletor de itens da lista e adicionarei 50% de raio de borda para que os itens da lista sejam círculos. Ótimo. Então agora precisamos trabalhar em nossa animação. Se dermos uma olhada rápida em nossa demonstração, você pode ver que os círculos estão se movendo de sua posição original para cima para uma nova posição. Em seguida, volte para baixo novamente para a posição original. Assim, a animação conterá três estágios. Na primeira etapa, os círculos estarão em sua posição original sem movimento. Em seguida, a 50% da duração da animação, os círculos se moverão para cima por uma distância igual a, digamos, 150 pixels. Em seguida, no final da duração da animação, retornaremos à sua posição original. Então vamos ver como podemos fazer isso. Vou até aqui e criar uma nova animação. Então eu vou chamá-lo de salto. E dentro dele, eu vou dizer em 0% da duração da animação, Vou adicionar transformar traduzir Y 0. Em seguida, a 50% da duração da animação. Transformar, Traduzir Y menos 150 pixels, para que os círculos se movam 150 pixels em direção ao topo. Em seguida, em 100%, Transformar, Traduzir Y 0 novamente para fazê-los retornar à sua posição original. Bom. Agora eu vou subir aqui dentro do seletor de itens de lista e eu vou adicionar animação. Então pulando. Em seguida, a duração da animação, 0,8 segundos, depois linear e infinito, é claro. Então agora você pode ver que os círculos estão saltando 150 pixels ao retornar à sua posição inicial. Cu. Agora precisamos adicionar uma borda na parte inferior dos círculos. Então eu vou entrar dentro da URL e eu vou adicionar borda, inferior. Dez pixels, branco sólido. Então agora você pode ver que temos a fronteira abaixo dos círculos. Ótimo. Agora nos resta uma coisa. Os círculos estão pulando juntos. Precisamos mudar isso. Queremos fazer com que pareça um salto aleatório. Então o que podemos fazer é adicionar valores aleatórios de atraso de animação para cada círculo. Então eu vou direto aqui e visar o primeiro item da lista. Então eu vou dizer UL, LI e criança um. E dentro dele, vou adicionar um atraso de animação. E eu adicionarei qualquer valor aleatório, digamos 0,45 segundos. Então eu vou copiar tudo isso. Cole novamente quatro vezes para que possamos direcionar cada item da lista individualmente. Então mudarei o número da criança aqui para dois, depois três, depois 45. E adicionarei valores aleatórios para cada círculo. Então, para o segundo círculo, adicionarei, digamos, 0,6 segundos. E para o terceiro círculo, adicionarei 0,3 segundos e deixarei o quarto círculo. A resposta é, então ele vai se mover imediatamente. E finalmente, adicionarei 0,1 segundos ao quinto círculo. Esses são apenas valores aleatórios que farão com que os círculos se movam aleatoriamente. Então agora vou voltar para o navegador e recarregar. E você pode ver que os círculos estão saltando para cima e para baixo aleatoriamente, dando-nos o efeito que queremos. Então esta é a lição para todos, e eu verei vocês na próxima. 86. 90 - efeito de chuva com animação css: Olá a todos, bem-vindos a esta nova lição no curso de animações, transições e transformações CSS . Nesta lição, vamos criar este efeito chuvoso usando animação CSS. Então vamos começar. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de chuva. Então eu vou para o meu CSS para estilizar que div. Começarei mirando no corpo. Então vou adicionar preenchimento, 0, margem 0 também. O URL em segundo plano. E vou adicionar a imagem de fundo. Em seguida, vou adicionar repetição de fundo. Sem repetição. E, finalmente, o tamanho do fundo. Cobrir. Bom. Então agora você pode ver que nossa imagem é definida como um fundo para o corpo. Vamos continuar. Eu vou voltar para o meu CSS e eu vou mirar a div com a classe de chuva. Então, dentro dele, vou adicionar altura 100% para fazê-lo ocupar a altura total do corpo. Em seguida, URL de fundo. E eu adicionarei a imagem da chuva. A chuva que está caindo é na verdade uma imagem que você pode encontrar nos recursos para esta lição. Então, agora, quando eu vou para o navegador e recarrego, você pode ver que temos nosso plano de fundo e a imagem da chuva fica sobre ele. Agora só precisamos animar a imagem da chuva. Então eu vou voltar para o meu CSS e eu vou criar uma nova animação e nomeá-lo chuva. Em seguida, em 0%, vou adicionar posição de fundo 0% da esquerda e 0% do topo. Então, em 100%, vou adicionar posição de fundo 20 por cento da esquerda e 100% de uma cidade. Bom. Agora precisamos adicionar a animação à imagem da chuva. Então eu vou subir aqui e adicionar animação. Chuva, 0,3 segundos, linear e infinito, claro. E agora, quando eu vou para o navegador e recarrego, você pode ver que a posição da imagem da chuva está mudando, dando-nos aquele efeito chuvoso que você está procurando. 87. 91 - Efeitos de hovers com animações CSS: Olá a todos e bem-vindos a esta nova lição no curso onde estamos indo para criar este efeito agradável sobre esses ícones Font Awesome. Então, quando eu passar o mouse sobre qualquer um desses, você pode ver um fundo azul escuro desaparece e uma borda desaparece também, e tem uma animação em torno do fundo. Então vamos criar isso juntos. Então aqui no meu HTML, você pode ver que eu tenho um link para a biblioteca de ícones Font Awesome que me dará acesso aos ícones que usaremos neste exemplo. Vou começar aqui adicionando um UL, depois LI. E dentro dele, eu vou adicionar um ícone tag e dar-lhe uma classe de FAS e FAA coração. Então eu vou copiar isso, colá-lo novamente três vezes. E eu vou mudar a aula de ícones toda vez. Então eu vou dizer martini de vidro, globo e presente. Então agora você pode ver que temos nossos quatro ícones listados aqui. Em seguida, vamos para o nosso CSS para adicionar alguns estilos. Eu vou direcionar a UL e eu vou adicionar preenchimento, 0, margem 0 bem, e display flex. Então eu vou direcionar o LI dentro dele e adicionar list-style-type. Nenhum. Largura 120 pixels , altura, 120 pixels também. E queremos alguns espaços entre os ícones. Então, vamos adicionar margem 0 e 20 pixels da esquerda e da direita. Então eu vou adicionar borda, dois pixels, sólido. E esta cor azul escuro. Muito bem, agora queremos fazer este raio de fronteira. Então eu vou adicionar raio de fronteira 50 por cento. Então vou adicionar transição 0, 0, 0,5 segundos, posição relativa. E para centralizar os ícones dentro do LI, usaremos flexbox. Então vou adicionar exibição, flexionar, alinhar o centro de itens e justificar o conteúdo. Centro. Legal. Agora vamos adicionar alguns estilos aos ícones. Vou segmentá-los e adicionar o tamanho da fonte. 48 pixels para torná-lo maior. Em seguida, colorir nossa cor azul escuro e transição. Todos os 0.5 segundos. Certo, temos nossos ícones olhando do jeito que queremos. Então agora é hora de trabalhar no fundo azul que se desvanece. A fim de criá-lo, eu vou direto aqui e dizer UL LI antes. E eu vou adicionar conteúdo vazio. Em seguida, posição absoluta, topo 0 , esquerda, 0, largura 100% e altura 100%. Em seguida, cor de fundo, a cor azul escuro. E para torná-lo um círculo também, adicionaremos 50% de raio de fronteira. Então agora você pode ver que temos o fundo azul escuro e está cobrindo o ícone. Vamos continuar com isso. Para que o ícone apareça novamente, voltarei aqui e adicionarei o índice z minus1, em seguida, faça a transição de 0,5 segundos. E vamos adicionar opacidade 0. Agora você pode ver que o fundo desapareceu porque nós definimos a opacidade para 0. Mas queremos que apareça novamente quando pairarmos. Então eu vou voltar para o meu CSS e quando pairar sobre o aliado, eu vou fazê-lo. Portanto, há algumas mudanças para o elemento pseudo antes. Vou adicionar opacidade, um para fazê-lo aparecer novamente. E eu adicionarei a escala de transformação 0,8. Então não vai ocupar toda a largura e altura do aliado. E então ele vai deixar um espaço livre para nós adicionarmos a fronteira. Então, agora, quando eu passar o mouse sobre os ícones, você pode ver o plano de fundo aparece novamente, e ele não ocupa a mesma quantidade de espaço que o item da lista. Ele ocupa 80%, deixando algum espaço livre em torno dele. Mas os próprios ícones não estão aparecendo porque eles têm a mesma cor que o plano de fundo. Então vamos fazer a mudança de cor ao pairar. Eu vou aqui e direi UL LI sobre pairar. Vou fazer algumas mudanças aconteceram com os ícones. Vou adicionar cor branca. Tudo bem, agora vamos criar a borda animada que aparece em torno do fundo azul escuro. Vou copiar todo o elemento antes pseudo, colá-lo, e mudar antes para depois. Então eu vou fazer algumas mudanças nele. Primeiro, vou tornar o fundo transparente porque não queremos nenhuma cor de fundo. Em seguida, vou adicionar borda, dois pixels tracejado. E esta cor azul mais clara. E, finalmente, caixa de tamanho de caixa. Então, se mudarmos a opacidade para um, você pode ver que a borda está aparecendo ao redor da borda dos itens da lista. Então vamos voltar e mudá-lo para 0 novamente. Agora, vamos criar a animação para a fronteira. Vou até aqui e criar uma nova animação. Nomeie girando. E no início da animação, em 0%, vou adicionar escala de transformação 0,92, que irá encolher o pseudo elemento depois para baixo um pouco e colocá-lo entre a borda dos itens da lista e o fundo azul. Então, em seguida, vou adicionar girar 0 graus. Eu vou copiar isso, colá-lo novamente, e a 100%, eu vou fazê-lo girar em 360 graus. Tudo bem, isso é bom. Por último, vamos aplicar esta animação para o elemento pseudo depois para quando passarmos o mouse sobre o LI. Então vamos fazer isso. Eu vou dizer LI sobre pairar depois. E eu vou adicionar opacidade um no início. Em seguida, animação, rotação, dez segundos, linear e infinito. Certo? Agora, quando eu passar o mouse sobre os ícones, você pode ver o fundo azul escuro desaparece. Em seguida, a cor do ícone muda para branco e a borda tracejada começa a girar. E isso nos dá um bom efeito de pairar. 88. 92 - Carregando texto: Olá a todos. Bem-vindo a esta nova lição no curso onde vamos criar esta animação de carregamento agradável. Você pode ver que esta é uma animação agradável, onde as cores do carregamento de palavras estão mudando e o espaçamento entre letras e a opacidade estão mudando também. Então vamos criá-lo. Aqui no meu HTML. Vou começar adicionando uma UL. Em seguida, dentro dele, vou adicionar um aliado e adicionar a primeira letra L. Então eu vou copiar isso e colá-lo seis vezes e mudar a letra cada vez até que tenhamos a palavra carregando. Então eu vou para o meu CSS para adicionar alguns estilos a ele. Vou direcionar o URL e vamos redefinir a margem e o preenchimento para ele. Então vou adicionar margem 0, preenchimento 0 também. E queremos que as letras sejam exibidas lado a lado. Então eu vou adicionar display flex. Agora. Tudo bem, vamos continuar. Vou direcionar os itens da lista dentro da URL, que representa as letras. Então eu vou adicionar o tipo de lista, nenhum para se livrar dessas balas. Em seguida, tamanho da fonte, 80 pixels para aumentar as letras e, em seguida, espaçamento entre letras. 20 pixels. Lá vamos nós. Aqui estão nossas letras sentadas lado a lado com 20 pixels de espaçamento entre cada uma delas. Em seguida, vamos trabalhar em nossa animação. Vou até aqui criar uma nova animação. Nomeie carregando. E vamos torná-lo simples no início. Vamos mudar as cores das letras. Então, em 0% da duração da animação, faremos a cor vermelha. Então, em 100%, a cor será azul. Então, isso nos dará uma mudança gradual na cor de vermelho para azul. Certo, vamos adicionar a animação aqui às letras. Então animação, carregamento, três segundos, linear e infinito. Tudo bem, então aqui você pode ver que a cor das letras está mudando de vermelho para azul durante um período de três segundos. Em seguida, vamos mudar a posição das letras. Quero fazer o movimento da direita para a esquerda. Então eu vou para a direita aqui e em 0%, eu vou adicionar transformação traduzir X menos 50 pixels. E em 100%, vou adicionar transformar traduzir X 50 pixels. Assim, as letras começarão a mover 50 pixels da esquerda da posição original para 50 pixels para a direita. Simplesmente assim. Ok, Agora, durante este movimento, queremos mudar o espaçamento das letras para que as letras se aproximem umas das outras e depois se espalhem novamente. Então, em 0%, vou adicionar espaçamento entre letras. 20 pixels. Então eu vou adicionar um novo estágio de animação em 50% da duração da animação aqui. E dentro dela, adicionarei espaçamento de letras menos 20 pixels. Em seguida, em 100%, vou adicionar espaçamento de letras 20 pixels novamente. Então o que vai acontecer aqui é que durante o movimento, as letras vão se aproximar umas das outras, então vamos nos afastar um do outro novamente, assim como você pode ver aqui. Legal. Agora, resta uma coisa aqui. Quando recarregamos a página, queremos que as letras desapareçam rapidamente, permaneçam por um tempo e depois desapareçam. Podemos conseguir isso controlando a opacidade. Então eu vou aqui na duração da animação e em 0%, eu vou adicionar opacidade 0. Então quero que desapareça rapidamente. Então eu vou criar um novo estágio em 10 por cento, e eu vou adicionar opacidade um. Então, agora, quando eu for recarregar, você pode ver que as letras estão desaparecendo bem. Bom. Agora queremos que eles desapareçam também. Então eu vou para o meu CSS e em 50%, eu vou adicionar opacidade um também. Então, eles permanecerão afiados, invisíveis de 10 por cento a 50%. Então, em 100%, vou adicionar opacidade 0, então eles vão desaparecer bem. Agora, quando eu recarrego a página, você pode ver que elas se desvanecem e depois desaparecem, dando-nos o efeito de carregamento que estamos procurando. Ótima. Agora, resta uma coisa. Queremos que todas as letras entreguem este efeito, mas uma após a outra. Então a primeira letra, depois a segunda, depois a terceira, e assim por diante. O que podemos fazer é usar a propriedade de atraso de animação em cada um deles. Então eu vou aqui e adicionar UL LI nth filho um. Isto terá como alvo a primeira letra. E porque queremos que a primeira letra apareça imediatamente, adicionaremos o atraso de animação 0 segundos. Então eu vou copiar tudo isso. Cole novamente seis vezes. E eu vou mudar um aqui, 22. E adicione o atraso da animação, 0,2 segundos. Depois 3,40 segundos, 4,60 segundos, 5,80 segundos, 61 segundos e, finalmente, 7,21 segundos. Então, aqui estamos nós. As letras estão mudando uma após a outra, dando-nos esta ótima animação de carregamento. 89. 93- efeito de pulso incrível usando animações de CSS: Olá a todos. Nesta lição no curso de animações CSS, vamos criar esse efeito de pulso. Você pode ver que temos um ícone Font Awesome aqui para um telefone. E tem um fundo verde. E há duas fronteiras que estão pulsando. Estão ficando maiores e desaparecendo. Então, vamos usar animações CSS, e transformações para esta lição. Tudo bem, primeiro de tudo, vou começar por ir bem aqui no meu HTML e adicionar um div e dar-lhe uma classe de pulso. Então, dentro dele, adicionarei uma tag de ícone. Dê-lhe uma classe de telefone FAS e FAS. Então isso irá imprimir o ícone do telefone para nós. E você pode ver aqui que eu estou usando um link CDN para a biblioteca Font Awesome que nos dará acesso a todos os ícones Font Awesome. Tudo bem, então quando vemos isso no navegador, você pode ver que temos nosso ícone sentado bem aqui no centro da página, e ele tem uma cor de preto por padrão. Então vamos para o nosso CSS e adicionar alguns estilos. Vou mirar a div com a classe de pulso, que tem o nosso ícone dentro dela. E eu adicionarei largura, 100 pixels, altura 100 pixels também. Cor de fundo, esta cor verde, cor branca. E, a fim de fazer uma circular, vamos adicionar raio de fronteira 50 por cento. Tudo bem, agora vamos inserir o ícone dentro dele horizontalmente e verticalmente. Vou adicionar text-align, center e altura da linha, 100 pixels para centralizá-lo verticalmente. Então precisamos fazer o ícone um pouco maior. Então, vamos adicionar tamanho da fonte 48 pixels. E, finalmente, vamos adicionar posição relativa. Certo? Então agora temos o ícone olhando exatamente da maneira que queremos com este fundo circular verde. E agora queremos criar as fronteiras em torno dele que serão animadas. Então vamos lidar com isso. Eu vou aqui e dizer pós cólon antes. E eu vou adicionar conteúdo. Posição vazia, absoluta, esquerda menos 20 pixels. Top menos 20 pixels, taxa menos 20 pixels e inferior menos 20 pixels também. Em seguida, vamos adicionar uma borda a este elemento antes pseudo. Então eu vou dizer borda, um pixel, sólido e nossa cor verde. Tudo bem, agora você pode ver que temos nossa fronteira em torno do antes. E o espaço aqui entre a borda e a div de pulso é igual a 20 pixels. E isso vai porque nós adicionamos menos 20 pixels aqui à esquerda, superior, direita e inferior. Então, se mudarmos esses pixels menos à esquerda para 0, você pode ver que a borda agora está tocando a borda esquerda da div pulso. Vamos fazer isso menos 20 pixels novamente. E queremos uma fronteira circular. Então vamos adicionar 50 por cento de raio de fronteira. E agora vamos animar esta fronteira para nos dar o efeito de pulso que estamos tentando fazer. Então eu vou criar uma nova animação e nomeá-lo pulsando. E dentro dele a 0% da duração da animação, adicionarei transformação, escala 0,5 e opacidade 0. Em seguida, a 50 por cento. Vou copiar isto e mudar a escala para um e a opacidade para um também. Então, em 100%, eu mudarei a escala para 1.2, então será maior e a opacidade para 0, então vamos desaparecer. Então o que vai acontecer aqui é que a borda vai começar na metade do seu tamanho e uma opacidade de 0, então ele vai ficar maior até atingir seu tamanho original e uma opacidade de um, então ele vai se tornar ainda maior e a opacidade será 0 novamente, o que significa que vai desaparecer. Então vamos ver se podemos fazer esse efeito. Primeiro. Vamos adicionar a animação à fronteira. Vou subir aqui e adicionar animação pulsando 1,5 segundos, linear e infinito. Agora você pode ver que está ficando maior e desaparecendo. Certo, vamos adicionar outra borda. Eu vou aqui e adicionar vírgula. Então eu vou adicionar um depois pseudo elemento ao lado deles. Antes. Então queremos que eles iniciem suas animações uma após a outra. Então eu vou classificar aqui e mirar o depois pseudo elemento sozinho. E vou adicionar um atraso de animação 0,5 segundos. E agora você pode ver que eles estão começando um após o outro, dando-nos o efeito que estávamos procurando. 90. 94 - Show de Slider imagens simples com animações css: Olá a todos. Nesta lição, vamos criar este controle deslizante de imagem simples usando animação CSS. A idéia por trás deste controle deslizante de imagem é muito simples, então vamos ver como podemos fazê-lo. Primeiro de tudo, vou começar aqui no meu HTML adicionando uma div e dando-lhe uma classe de controle deslizante. Então eu vou para o meu CSS e eu vou entrar dentro do seletor de corpo e adicionar cor de fundo. Esta cor cinza escuro. Então eu vou mirar a div com a classe de controle deslizante. E eu vou adicionar largura 800 pixels, altura 400 pixels, depois fundo, URL. E eu vou adicionar a primeira imagem. Agora precisamos criar nossa animação, mas em vez de vocês me verem escrevê-la, vou pausar a gravação e adicioná-la. Então vou explicar como funciona. Então aguente firme. Bem-vinda de volta. Então você pode ver que eu criei a animação e dei a ele a mudança de nome BG. A idéia por trás deste controle deslizante simples é que vamos mudar a imagem de fundo do controle deslizante div. Então você pode ver que em 0%, o fundo será a primeira imagem e permanece assim até 20% da duração da animação. Em seguida, de 20 por cento a 25 por cento, o plano de fundo mudará da primeira imagem para a segunda. E o segundo permanece até 45% da duração da animação, momento em que muda para a terceira imagem, e assim por diante até que todas as imagens sejam exibidas. Então vamos adicionar essa animação à div deslizante. Irei aqui e adicionarei animação. Em seguida, o nome da animação mudar BG, Em seguida, 10 segundos, linear e infinito. E agora, quando eu vou para o navegador e recarrego a primeira imagem para ficar por um tempo, então a segunda imagem aparece e permanece por um tempo. Em seguida, o terceiro e assim por diante, até que a animação termine. 91. 95 - Alterar a cor do fundo com animações CSS: Olá a todos. Nesta lição, vamos criar essa cor de fundo em constante mudança. Como você pode ver, a cor de fundo do corpo está mudando suavemente. A idéia por trás desse efeito é muito simples. Então vamos mergulhar e ver como podemos fazer isso. Primeiro de tudo, eu vou aqui no meu HTML e eu vou adicionar um H1. E dentro dele, eu vou dizer mudou, em seguida, tag BR, em seguida, cor de fundo. Então eu vou para o meu CSS para adicionar alguns estilos a ele. Vou mirar no H1. Em seguida, vou adicionar o tamanho da fonte 70 pixels. Então eu quero centralizar o texto. Então vou adicionar texto, alinhar, centralizar, depois transformar impostos, capitalizar e colorir branco. Bom. Agora, a fim de criar essa cor de fundo mudando, vamos precisar criar uma nova animação e criar quantas etapas precisarmos. E em cada passo, mudaremos a cor do plano de fundo. Então vamos realmente ver como podemos fazer isso. Vou até aqui e criar uma nova animação. E eu vou chamá-lo de G, mudança. Em seguida, a 0%, vou adicionar cor de fundo, esta cor agradável. Então eu vou copiar isso, colá-lo novamente, e 20 por cento. Vou mudar a cor de fundo para outra cor. Bom. Agora, vou pausar a gravação e adicionar os outros passos. E bem-vindo de volta. Aqui, adicionei as outras etapas com novas cores de fundo e 40%, depois 60%, depois 80% e finalmente 100%. Então precisamos adicionar nossa animação ao corpo. Então eu vou subir aqui e adicionar animação. Em seguida, o nome da animação BG mudar. Quando a duração da animação. Vamos tentar dez segundos. Quando a iteração de animação contar infinito, é claro, nota. Agora vamos dar uma olhada em nossa animação. Vou recarregar a página quando a animação deve começar. Assim, você pode ver que a cor de fundo está mudando suavemente de uma cor para a próxima, e assim por diante e assim por diante. E ele vai continuar fazendo isso porque nós dissemos que a iteração de animação conta para infinito. Um pequeno bilhete aqui. Se você olhar atentamente aqui para a animação que criamos, você notará que a cor de fundo no início da animação é a mesma no final dela. E isso porque quando a animação terminar seu primeiro ciclo, ela começará de novo. E a última cor aqui mudaria para a primeira cor. Então, se eles não são da mesma cor vai mudar, não vai ser suave. Por exemplo, vamos mudar esta última cor para, digamos, verde. Então vá e recarregue. Então vamos esperar até que a animação termine. E aqui você pode ver que a mudança não está acontecendo sem problemas. Então devemos mudá-lo de volta para a primeira cor e tudo ficará bem. Então este é o fim para esta lição. Foi muito simples e você pode usar quantas cores quiser. Assim, por exemplo, você pode alterar a cor a cada 10% da duração da animação. Então você acabaria com 10 cores diferentes. você também pode controlar o tempo em que cada cor permanece na tela alterando a duração da animação. 92. 96 - berço do newton com animações CSS: Olá a todos. Nesta lição, nós criaremos este efeito de berço Newton usando animações CSS. Acho que seria uma lição interessante, então vamos ver como podemos fazer isso acontecer. Primeiro de tudo, eu vou para o meu HTML aqui, e eu vou adicionar uma div e dar-lhe uma classe de berço. Então, dentro disso, adicionarei cinco vãos vazios para que cada extensão seja como um braço do berço. Então eu vou para o meu CSS para fazer isso parecer como nossa demo. Vamos começar por mirar todos os vãos dentro da div com a classe de berço. Então eu vou dizer berço span. E eu vou continuar definindo a propriedade de exibição desses vãos para bloquear para que eles se tornem elementos de bloco. Dessa forma, podemos adicionar largura e altura a eles. Então vou adicionar largura, três pixels. E essa será a largura dos braços do berço, então altura, 300 pixels e cor de fundo, branco. Então, agora, se eu for recarregar meu navegador, você pode ver que temos todos os vãos e eles se sentam um por cima do outro. Como definimos a propriedade display para bloquear, precisamos alinhá-los para que fiquem lado a lado e não de cima para baixo. Podemos fazer isso facilmente usando nosso bom amigo, Flexbox. Então eu vou direto aqui dentro do meu CSS e eu vou segmentar seu recipiente, que tem a classe de berço. E eu vou apenas dizer display flex. Então agora você pode ver que todos eles sentam lado a lado. Mas precisamos separá-los. Significa que precisamos adicionar um pouco de espaço entre eles. Então eu vou para dentro do seletor de span e eu vou adicionar margem 0 de cima e baixo e 30 pixels da esquerda e direita. E agora você pode ver que eles têm algum espaçamento. Ótimo. Agora vamos para o seletor de berço e adicionar borda, top 10 pixels, branco sólido. E podem ver que estamos nos aproximando do que queremos. Agora precisamos trabalhar nos círculos do berço. Vou criá-los usando o pseudo elemento antes. Então eu vou mirar os vãos novamente. E eu vou dizer antes. Então eu vou adicionar conteúdo, vazio, em seguida, posição, absoluto. E, em seguida, vamos realmente subir aqui para span seletor e adicionar posição relativa para que as bolas ou círculos serão relativos às nossas rodadas. Então eu vou descer aqui e adicionar fundo 0 porque nós queremos que eles estejam no fundo de nossas vãos, é claro. Então deixou 0 também. Largura 60 pixels, altura 60 pixels. Precisamos deles para ter a mesma largura e altura para que eles serão quadrados y, porque então podemos facilmente torná-los círculos, apenas adicionando border-raio. 50 por cento. Então, finalmente, vou adicionar cor de fundo, branco também. Ok, então agora quando eu vou para o navegador e recarrego, você pode ver que nós temos os pseudo elementos antes para cada span e eles se sentam na parte inferior de sua extensão, é claro, porque nós adicionamos o fundo 0. Mas agora precisamos que eles estejam centrados em cada extensão. Então o que podemos fazer é movê-los para a esquerda para que haja centralizado, assim como na nossa demo. Então eu vou para a direita aqui e adicionar transformação, traduzir x menos 50%, modo que eles serão deslocados para a esquerda pela metade de sua largura, que é de 30 pixels, e ser centralizado assim. Mas você pode ver que há um pouco de espaçamento entre os círculos que os faz parecer separados um do outro. Então vamos direto aqui dentro do seletor de span e diminuir essa margem de 30 pixels para 29 pixels. Lá vamos nós. Eles estão se tocando e não há espaço entre eles. Ótimo. Agora precisamos trabalhar em nossa animação para fazer esse berço realmente funcionar. Então eu tenho uma demonstração muito lenta bem aqui do berço que vai nos deixar ver o que está acontecendo claramente. Preciso que ignore o braço direito e preste atenção ao braço esquerdo aqui. Dê uma olhada em seu movimento. Vou recarregar o navegador. E você pode ver o primeiro braço começa a partir de sua posição original e girar 60 graus no sentido horário, em seguida, gira novamente para sua posição original. Dias por um tempo até o segundo braço retornar e, em seguida, apenas repete o processo. Então teremos três etapas para a animação do primeiro braço. No primeiro estágio, o braço girará no sentido horário em 60 graus, depois retornará à sua posição original no segundo estágio. E então, na fase final, ele permanecerá imóvel em sua posição original até que o segundo braço vá e complete sua rotação. Então vamos realmente criar esses três estágios. Vou até aqui e criar uma nova animação. Diga o nome do braço esquerdo. Então, dentro dele, direi que em 0%, adicionarei transformação, girarei 0 graus. Em seguida, uma transformação de 25 por cento gira 60 graus para que o braço gire 60 graus no sentido horário. Então, a 50%, quero que ele volte à sua posição original. Então eu vou dizer Transformar, Girar 0 graus. E quero que fique nesta posição até que o braço direito termine a rotação. Então eu vou dizer que em 100%, Transformar girar 0 graus também. Então, de 50 por cento a 100% da duração da animação, direi ao braço esquerdo para ter rotação 0, significa que ele permanecerá em sua posição. Legal. Agora queremos adicionar esta animação ao braço esquerdo, então eu vou direcionar o span. Então o primeiro filho, que selecionará o braço esquerdo para nós, é claro. Em seguida, dentro dele, vou adicionar animação, braço esquerdo e adicionar uma duração de animação de dois segundos. Então, relaxe. E infinito. Então eu vou recarregar. E você pode ver que o braço esquerdo está girando, mas está girando em seu ponto central. Isso é completamente normal, claro, porque esse é o padrão, mas queremos que ele gire do seu ponto superior aqui. Podemos lidar com isso. Não há problema por apenas entrar aqui dentro do seletor de span e adicionar origem de transformação. E agora você pode ver que o braço esquerdo está girando do jeito que queremos. Ele gira 60 graus no sentido horário, depois retorna à sua posição, permanece por um tempo. Em seguida, repete o processo novamente. Tudo bem. Agora vamos dar uma olhada no braço direito. Vou à nossa demo lenta outra vez. E desta vez quero que cuide do braço direito. Então, quando eu recarregar, você pode ver que o braço direito permanece em sua posição e não se move até que o braço esquerdo gire e retorne. E uma vez que ele retorna, o braço direito começa a girar no sentido anti-horário em 60 graus. Isso significa que usaremos a propriedade de atraso de animação no braço direito para fazê-lo esperar até que o braço esquerdo conclua sua ação. Vamos recarregar novamente. Então espera. Em seguida, começa a girar, termina e, em seguida, ficar parado até que o braço esquerdo termine, em seguida, repete todo o processo. Então vamos criar essa animação. Vou até aqui e criar uma nova animação. Dê o nome de braço direito. Então eu vou, não pode ser tudo isso. Cole novamente aqui e mude 60 graus para menos 60 graus. Então eu vou subir aqui, copiar isso, colá-lo novamente, e mudar o primeiro filho para o último filho. Então eu vou mudar o nome da animação para o braço direito em vez de para a esquerda. Deixe tudo como está e adicione um atraso de animação de 1 segundo. Então, o que acontecerá quando eu recarregar é que o braço esquerdo girará imediatamente para a esquerda e levará 50% da duração da animação para girar e retornar. Em outras palavras, levará 1 segundo. Enquanto isso, o braço direito vai esperar este 1 segundo porque ele tem um atraso de animação de 1 segundo. E então ele começará a girar para a direita, levando metade de sua duração de animação, também 1 segundo para completar sua ação e retornar. Durante este tempo. Este 1 segundo, que novamente é metade desta duração da animação. O braço esquerdo estará esperando e esta espera pela metade movida seu processo vai continuar para sempre. 93. 97 - efeito de carregamento colorido agradável com animações CSS: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta lição, vamos criar este bom pré-carregado. Você pode ver que temos quatro quadrados. Todos eles são girados em 45 graus e eles têm esse efeito. Eles estão se afastando um do outro, todos girando 90 graus como uma única unidade, então voltam juntos. E isso vai acontecer. E esta é uma boa animação e é fácil de fazer. Um resumo básico do que vamos fazer é criar um recipiente div que contém todos os quatro quadrados dentro dele. Em seguida, vamos alterar os valores de posição para cada quadrado para tornar a cobertura do Foursquare a div exterior e ocupar todo o espaço disponível. Então vamos girar o div externo, que girará todos os quatro quadrados com ele. E depois disso, criaremos nossa primeira animação na qual mudaremos a altura e a largura da div do contêiner, que fará com que os quatro quadrados internos se afastem um do outro e depois voltem um para o outro. E, finalmente, criaremos nossa segunda animação que girará os próprios quatro quadrados. Então vamos ver como podemos criar isso. Talvez tenha soado muito, mas prometo que será muito fácil assim que começarmos a fazê-lo. Primeiro, vou começar aqui no meu HTML, adicionando o nosso div e dando-lhe uma classe de recipiente. Então eu vou adicionar quatro vãos dentro dele, e esses serão os quatro quadrados dentro do div recipiente. Depois disso, irei ao meu CSS para adicionar alguns estilos. Vou começar por apontar a div com a classe de contêiner. Então, dentro disso, vou adicionar largura 100 pixels, altura 100 pixels. E vamos adicionar uma cor de fundo temporária de vermelho. E então eu vou finalmente adicionar posição relativa. Então agora você pode ver que temos apenas um quadrado vermelho com a largura e altura de 100 pixels. Avançando, vamos agora trabalhar nos quatro vãos dentro da div recipiente. Vamos primeiro adicionar alguns estilos gerais a todos eles. Vou apontar a extensão, e vou adicionar posição. Largura absoluta, 50 pixels. Altura 50 pixels. Você pode ver que nada mudou porque não adicionamos nenhuma cor de fundo. Então vamos direcionar cada intervalo individualmente. Para fazer isso, eu vou aqui e dizer “espaço na criança”. E eu vou mirar no primeiro. Então eu vou adicionar a guia 0, esquerda 0 também. Assim, a extensão estará no canto superior esquerdo do recipiente. Então, abaixo disso, adicionarei uma cor de fundo. Esta bela cor amarela. Então agora você pode ver o primeiro quadrado fica em cima do recipiente vermelho com a largura e uma altura de 50 pixels, que é metade da largura e altura do recipiente. E está no canto superior esquerdo. Desde que dissemos esquerda e superior para 0, vamos fazer o mesmo para todos os três outros quadrados, e vamos posicioná-los de uma forma que irá torná-los completamente coberto o recipiente vermelho. Então, vamos posicionar o próximo próximo ao quadrado amarelo, e os dois restantes serão posicionados abaixo deles. Certo? Vou voltar para o meu CSS para segmentar o segundo quadrado. Então eu vou dizer span e criança 2. E eu vou adicionar top 0 e direita 0. Em seguida, cor de fundo, esta cor verde. Então agora você pode ver que temos os quadrados verdes sentados ao lado do amarelo. Desde que dissemos que é propriedade certa para 0. Incrível. Agora vamos trabalhar nos outros dois quadrados. Vou voltar para o meu CSS e copiar este bloco de código. Cole novamente duas vezes. E eu vou mirar no terceiro intervalo e mudar de cima aqui, de baixo. Isso irá posicioná-lo no lado esquerdo do recipiente abaixo do primeiro quadrado. Eu também vou mudar sua cor de fundo para esta cor avermelhada agradável. Então eu vou mirar o quarto espaço e mudar de cima para baixo e da esquerda para a direita. Assim, ele será posicionado no canto inferior direito do recipiente abaixo do fundo verde. Então vou adicionar cor, esta cor azul. Tudo bem, agora você pode ver que temos os quatro quadrados e eles estão cobrindo completamente o recipiente vermelho. Agora, vamos começar a trabalhar na animação do contêiner. Vamos animar sua largura e altura para torná-lo maior do que menor. Mais uma vez, vou aqui e criar uma nova animação. E eu vou chamá-lo de animar. Em seguida, dentro dele, a 0% da duração da animação, eu vou dizer largura 100 pixels e altura 100 pixels também. Assim, o recipiente começará em seu tamanho original. Então eu vou copiar isso, colá-lo. E com 10% da duração da animação, deixarei os valores da largura e altura como estão, que é de 100 pixels. Dessa forma, desde o início da animação até 10% da duração da animação, o contêiner permanecerá em seu tamanho original antes de ficar maior. Então, abaixo disso, vou colar isso novamente. E com 50% da duração da animação, agora vou tornar o contêiner quadrado maior. Vou mudar a largura para 150 pixels em vez de 100. E então a altura para 150 pixels também. Então cole novamente. E a 90 por cento, eu farei a largura e a altura 100 pixels. Então, finalmente, em 100%, eu também deixarei a largura e a altura como 100 pixels. Então, basicamente, a mudança na ciência ocorrerá de 10 por cento a 90 por cento da duração da animação. Ele ficará maior, depois voltará ao seu tamanho original. Então vamos adicionar essa animação ao contêiner vermelho. Vou subir aqui dentro do seletor de contentores. E vou adicionar animação, animar 1 segundo, linear e infinito. Então, agora, quando eu ir e recarregar o navegador, você pode ver que o recipiente vermelho fica maior e separa os quatro quadrados internos um do outro, em seguida, ficar menor novamente e retorna ao seu tamanho original. Legal, mas ainda não terminamos. Queremos girar o quadrado vermelho em 45 graus. Então eu vou voltar aqui dentro do seletor de contêiner, e eu vou adicionar transformação, girar 45 graus. Então agora você pode ver o contêiner gira 45 graus e todos os quatro quadrados giram com ele porque eles estão dentro dele. Não precisamos mais deste fundo vermelho. Então eu vou voltar aqui e removê-lo. Incrível. Agora só nos resta uma coisa, que é girar os quadrados enquanto eles estão se afastando um do outro. Isso será fácil de fazer. Então vamos criar a animação responsável por isso. Vou até aqui e criar uma nova animação. E eu vou nomeá-lo, girar. Em seguida, vou copiar todos os estágios da primeira animação e colá-lo dentro da animação girar. E a 0%, removerei isso e transformo girar 0 graus. Em seguida, a 10 por cento, será 0 graus novamente. E a 50 por cento, vou mudá-lo para 90 graus para que cada quadrado seja girado em 90 graus. Então, em 9100%, vou deixá-lo girado em 90 graus novamente. Eu não quero que ele gire para trás. Eu só queria ficar girado por 90 graus. Legal. Vamos adicionar esta animação aos nossos quadrados. Vou subir aqui dentro do seletor de span e adicionar animação. Girar. 1 segundo, linear e infinito. Incrível. Então agora você pode ver os quatro quadrados girarem 90 graus enquanto eles estão distantes um do outro, depois voltar um para o outro, completando nosso pequeno efeito legal. 94. 98- de quadrados em movimento com animações CSS: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta aula, nós vamos aprender como criar esta agradável pré-carga ou animação. Você pode ver que tínhamos três quadrados e eles estão se movendo como se estivessem perseguindo um ao outro. Eu quero que você dê uma olhada em apenas um deles. E você vai notar que cada um está apenas se movendo em um caminho regular, na verdade um caminho de outro quadrado. E todos eles se movem no mesmo caminho. A única diferença é que todos eles têm uma propriedade de atraso de animação diferente. Então eles estão se movendo um após o outro, criando esse efeito de perseguição. Então vamos começar a criar isso. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de carregador. Então, dentro disso, vamos adicionar três vãos, e esses são os três quadrados que criam o pré-carregado. Então eu vou para o meu CSS. Primeiro, vou direcionar a div contêiner, que tem uma classe de Loader. E eu adicionarei largura, 150 pixels, altura 150 pixels também. Posição relativa. Então, abaixo disso, eu vou mirar os vãos dentro deste recipiente div. E eu vou adicionar posição. Largura absoluta, 50 pixels. Altura 50 pixels também. Fundo, branco. E, finalmente, o raio da borda, quatro pixels. Então agora você pode ver que temos um quadrado com uma altura e largura de 50 pixels. E esses são, na verdade, três vãos que estão sentados um em cima do outro. Agora, vamos trabalhar na criação de nossas animações. Eu vou para o meu CSS e criar uma nova animação e chamá-lo de Chase. Em seguida, dentro dele em 0% da duração da animação, ou no início, vou adicionar top 0, esquerda 0. Então isso significa os quadrados. Começaremos no canto superior esquerdo do contêiner deles. Então, abaixo disso, em 12,5% da duração da animação, vou adicionar top 0 e esquerda 50%. Então agora os quadrados se moverão para a direita em 50% da largura do contêiner. Então, abaixo disso. E em 25 por cento, vou adicionar 0 superior à esquerda, 50 por cento. Assim, você pode ver que os valores não mudam de 12,5% da duração da animação para 25%. E isso é porque queremos que os quadrados permaneçam em seu lugar por um tempo antes de passar para a próxima posição. Isso só fará com que o efeito pareça mais agradável. Agora, vou pausar o vídeo e adicionar os outros estágios. Então explicarei o que fiz. Então, vinte e cinco por cento da duração da animação, adicionamos 37,5% e adicionamos 50 por cento e deixamos 50%. Assim, os quadrados se moverão do canto superior direito para o canto inferior direito, então permanecerão por um tempo naquele lugar até chegarmos a 50% da duração da animação. E abaixo disso, com 62,5% da duração da animação, mudamos para 0 novamente. Assim, os quadrados estarão no canto inferior esquerdo do contêiner e permanecerão nessa posição em 75%. Em seguida, eles retornarão ao canto superior esquerdo novamente em 87,5% da duração da animação. E fique naquele lugar até que a animação termine. E continuaremos fazendo isso para sempre. Então vamos subir aqui dentro do seletor de span e adicionar esta animação. Irei aqui e adicionarei animação. O Chase. Dois segundos, linear e infinito. E agora, quando eu vou para o navegador e recarrego, você pode ver os quadrados se movendo e um caminho quadrado, e todos eles se movem juntos. Então eles estão aparecendo como um quadrado. Agora, a fim de fazê-los aparecer como três quadrados separados, podemos usar o atraso de animação. Para fazer isso. Eu vou mirar no segundo quadrado indo aqui e dizendo span enth criança também. E vou adicionar um atraso de animação, 0.700 segundos. Então eu vou copiar isso, colá-lo novamente, e segmentar o terceiro quadrado e adicionar animação atraso 1.4 segundos. E agora, quando eu vou para o meu CSS e recarrego, você pode ver os três quadrados começam a se mover um após o outro, dando-nos exatamente o efeito de carregamento que estávamos procurando. 95. 99- efeito de revelação de texto com animações CSS: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta lição, vamos criar este efeito de animação de textos pré-carregados. Então você pode ver que temos um H1 aqui, e é meio que coberto por este texto amarelo em cima dele. Então vamos ver como podemos fazer isso. Vou começar aqui no meu HTML adicionando um H1. E eu vou dizer apenas carregando. Então eu vou para o meu alvo CSS, este aqui. E vou adicionar tamanho da fonte 40 pixels. Margem, 0, preenchimento, 0. Transformação de texto, maiúsculas, espaçamento entre letras, dez pixels, cor, branco. E, finalmente, posição relativa. Então agora você pode ver que temos nosso H1 branco e parece muito bom. Agora, vamos trabalhar nos textos amarelos que o encobre. Vamos usar o elemento pseudo antes para criar esse texto amarelo. Então eu vou aqui e dizer um cólon antes. E dentro disso eu vou adicionar conteúdo carregando porque queremos a mesma palavra. Claro que sim. Em seguida, posicione absoluto , superior, 0, esquerda 0 também. Largura 100%. E cor. Esta bela cor amarela. Então agora você pode ver o H1 agora é amarelo, e isso é porque ele agora é coberto pelo texto amarelo, que é o pseudo elemento antes. Muito bem, vamos continuar a trabalhar. Eu vou aqui dentro do pseudo elemento antes e adicionar overflow. Escondido. Depois fronteira, certo? Quatro pixels, sólido. E a nossa cor amarela. Legal. Então agora você pode ver que o texto tem uma borda direita que irá se mover junto com ele e preencher o texto branco com o amarelo. E agora só precisamos trabalhar na animação desse texto amarelo. Vou ao meu CSS novamente e criar uma nova animação. E vou chamá-la de animada. Em seguida, dentro dele em 0% da duração da animação, vou adicionar largura 0. Em seguida, adicione 50 por cento. Vou fazer a largura 100%. E, finalmente, em 100%, vou definir a largura de volta para 0 novamente. Então o que esta animação fará é fazer com que as tags amarelas comecem em uma largura de 0, então sua largura aumentará até que ele se torne 100% do texto branco, que fará com que ele encobri-lo. Em seguida, sua largura será 0 novamente, e ele irá diminuir até o final da animação. E isso continuará acontecendo infinitamente porque, claro, vamos definir a contagem de iteração de animação para infinito. Então vamos adicionar esta animação ao fundo amarelo. Vou subir aqui e adicionar animação. Animar. Cinco segundos, linear e infinito. Então agora você pode ver que o texto amarelo está ficando maior e cobrindo o texto branco. Então encolhe de novo. E continua fazendo isso infinitamente, dando-nos este bom pré-carregado. 96. 100 - carregamento de anéis rotativos usando animações CSS: Olá a todos. Nesta lição, vamos criar este efeito de carregador agradável. Você pode ver que temos a palavra carregando dentro deste anel que está girando em torno dele. Então vamos ver como podemos criar isso. Vou começar aqui no meu HTML, adicionando um div, dando-lhe uma classe de recipiente. Então esta classe conterá o anel e o texto. Então, dentro dele, vou adicionar outra div, dar-lhe uma classe de texto. E escreverei carregando dentro daquela div. Então, abaixo disso, vou adicionar outro div, dar-lhe uma classe de anel. E este será o anel que gira em torno do texto. Então eu vou para o meu CSS para começar a criar este efeito de carregamento. Vou começar primeiro por mirar a div com a classe de contêiner. Em seguida, dentro dele, adicionarei posição, largura relativa, 200 pixels, altura 200 pixels também. Então agora a div do contêiner tem uma largura e uma altura de 200 pixels, e está centrada horizontal e verticalmente dentro do navegador devido ao código Flexbox aqui no corpo. Tudo bem, agora eu vou mirar a div com a classe do anel. E eu vou definir sua largura para 100% e é altura para 100% também. Por isso, leva a mesma largura e altura que o seu recipiente. Então vou adicionar um fundo temporário a este anel div. Então eu vou adicionar cor de fundo, vermelho. Depois disso, vou adicionar borda esquerda. Quatro pixels, sólido. Esta cor cinza escuro. Então agora você pode ver que a div anel tem um fundo vermelho e uma borda esquerda cinza escuro. Vamos fazer deste anel div um círculo. Então eu vou voltar aqui e adicionar limite de raio, o percentual. E agora você pode ver que o anel div é agora um círculo que tem uma borda esquerda. E esta borda esquerda será o anel que gira em torno da palavra carregamento. Então não precisamos mais desse fundo vermelho. É por isso que vou voltar e remover esta linha de código. Agora, certo? Agora você pode ver que temos esta fronteira esquerda por si só. E é assim que criamos o anel, é apenas uma borda lateral de um círculo. Tudo bem, vamos estilizar este texto para que pareça melhor. Vou mirar a div com a classe de texto. E eu vou adicionar posição, absoluto, topo, 0, esquerda 0 também. Em seguida, largura, 100%, altura 100%. E, a fim de centralizar o texto dentro dele horizontalmente, vou adicionar texto align center. Então, a fim de centralizá-lo verticalmente, vou adicionar a altura da linha, 200 pixels. E agora o carregamento de palavras está centrado dentro da div de texto. Vamos continuar a trabalhar. Voltarei aqui e adicionarei o tamanho da fonte, 22 pixels, peso da fonte, negrito. E, finalmente, o texto transforma em maiúsculas. Portanto, o texto está agora exatamente do jeito que queremos. Temos uma coisa a fazer, que é girar o anel aqui, é claro. Então vamos fazer isso. Volte para o meu CSS e crie uma nova animação. Então eu vou nomeá-lo, girar. Em seguida, dentro dele a 0% da duração da animação, vou adicionar transformar, girar 0 graus. Em seguida, a 100%, vou adicionar transformar, girar 360 graus. Assim, o anel fará uma rotação completa durante a duração da animação. Então eu vou subir aqui dentro do anel div para adicionar esta animação, eu vou adicionar animação, girar, em seguida, a duração da animação de 1 segundo, em seguida, linear. E finalmente infinito, para que o anel continue girando em torno de si mesmo. E agora, quando eu voltar e recarregar, você pode ver que a borda esquerda começa a girar em torno do texto e nos dá o efeito de carregamento que queremos. 97. 101 - efeito de carregamento em linhas usando animações CSS: Olá a todos. Bem-vindo a esta nova lição no curso. Nesta lição vamos criar este belo efeito de carregamento de linha. E para ver o que está acontecendo, bem, vamos olhar para uma demonstração mais lenta deste efeito de carregamento. Vou recarregar a página e você pode ver as escalas de linha ou cresce da esquerda para a direita. Então encolhe da esquerda para a direita também. Então cresce novamente da direita para a esquerda. E finalmente, encolhe da direita para a esquerda também. Este será um efeito interessante, então vamos ver como podemos criá-lo. Vou aqui no meu HTML e adicionar um div. Então dê uma classe de carregamento. Então eu vou para o meu CSS, alvo essa classe de carregamento. E vou adicionar largura, 300 pixels, altura, três pixels, cor de fundo, branco. Agora você pode ver que temos nossa linha aqui, e agora é hora de animá-la. Vou voltar e criar uma nova animação. Diga o nome da linha. E dentro disso, com 0% da duração da animação, adicionarei escala de transformação x 0. Assim, a linha começará a crescer a partir de uma escala de 0. E queremos que comece a crescer da esquerda para a direita. Isso significa que precisamos mudar sua propriedade de origem transformada. Ele é centralizado por padrão, então vamos fazê-lo à esquerda. Então eu vou adicionar transformar origem esquerda. Em seguida, a 45 por cento da duração da animação, adicionarei a escala de transformação x 1. Assim, a linha estará em sua largura total em 45% da duração da animação. Ele vai escalar de nada para sua largura total nesta duração, desde o início da animação até 45% da duração da animação. É por isso que precisamos manter a origem da transformação como ela é. Então eu vou adicionar origem transformada esquerda também. Então, com 50% da duração da animação, quero manter a escala como está. Então eu vou adicionar escala de transformação x manhã. Então eu vou adicionar origem transformada. Deixou por agora. Então, finalmente, com 100% da duração da animação, queremos que a linha encolha novamente. Então, vamos adicionar escala de transformação x 0, em seguida, transformar origem. Deixou por agora de novo. Ok, vamos subir e adicionar esta animação à linha. Vou adicionar linha de animação. E agora vamos para o navegador e recarregar. Você pode ver que a linha começa a crescer da esquerda para a direita porque nós definimos a propriedade de origem transformada para a esquerda, em seguida, ele encolhe de volta da direita para a esquerda. Então, encolhe para o ponto esquerdo também. Porque ao diminuir, também definimos sua propriedade de origem de transformação para esquerda. Então está encolhendo com base em seu ponto esquerdo da direita para a esquerda. Mas não queremos isso. Queremos que ele encolha da esquerda para a direita ou para o lado direito. Então, como podemos fazer isso? Bem, uma vez que é totalmente dimensionado, podemos apenas definir sua propriedade de origem transformada para escrever para que quando ela encolhe, ela irá encolher em seu ponto certo e nos dará o efeito que queremos. Então eu vou voltar aqui e que 50 por cento da duração da animação, eu vou mudar a propriedade de origem transformada da esquerda para a direita. E farei o mesmo a 100%. E agora, quando eu voltar e recarregar, você pode ver que a linha vai encolher em seu ponto direito desta vez ou da esquerda para a direita. E esse é o efeito que queremos, embora certo. Agora queremos que esta animação continue para sempre. Então vamos voltar aqui e adicionar infinito. E agora, quando eu vou recarregar a página, você pode ver a animação continua e repete-se para sempre. Mas há um problema. Uma vez concluído um ciclo da animação, ele corta e começa novamente a partir do início à esquerda. Mas queremos reverter depois de terminar. Então, depois de terminar, queremos voltar do fim ao início. E podemos fazer isso indo bem aqui ao lado da propriedade infinita e adicionar alternativa. E se você se lembrar, alternativo é um valor da propriedade de direção de animação. E ele apenas diz ao navegador para fazer a animação começar do seu início e ir para o seu fim, e então do seu fim ao seu início, e assim por diante e assim por diante. Então, agora, quando eu voltar para o navegador e recarregar, você pode ver que depois que a animação termina, ela se move em sentido inverso. E este é exatamente o efeito que estamos procurando. 98. 102 - de linhas de crescimento usando animações CSS: Olá a todos, bem-vindos a esta nova lição no curso de animações CSS. Nesta lição, vamos criar este bom efeito de carregamento. Será uma lição muito simples. Então, vamos começar. Vamos começar aqui no meu HTML adicionando uma div e dando-lhe uma classe de carregamento. Então, dentro dele, vou adicionar outra div, dar-lhe uma classe de OBJ. Então eu vou copiar este div, colá-lo novamente sete vezes. Tudo bem, vamos ao nosso CSS para criar o efeito de carregamento. Vou começar por segmentar a div com a classe de 0 j. Então eu vou adicionar largura seis pixels, altura 40 pixels, e fundo branco. Então agora você pode ver os oito divs estão sentados um abaixo do outro porque eles são divs e devs são elementos de bloco, que significa que eles são exibidos um abaixo do outro por padrão. Mas queremos fazê-los sentar-se lado a lado. Podemos fazer isso facilmente. Não há problema por apenas ir direto aqui no meu CSS e segmentar seu contêiner, que é a div com a classe de carregamento. E apenas adicionando display flex. Então agora você pode ver as oito divs estão sentadas lado a lado em uma fileira, e cada uma delas tem uma largura de seis pixels e uma altura de 40 pixels. Mas queremos adicionar algum espaço entre eles. Então eu vou para o seletor OBJ e eu vou adicionar margem 0 de cima e baixo e três pixels da esquerda e direita. Então agora você pode ver que estamos chegando perto do nosso carregador. Só precisamos fazer os cantos um pouco arredondados. Então eu vou adicionar o raio da borda 10 pixels. E aqui vamos nós. Temos o mesmo carregador que queremos. Ok, vamos trabalhar para animar esse carregador. A ideia por trás desta animação é muito fácil. Vamos apenas mudar a função de escala y para cada uma dessas oito divs. Vamos fazê-lo começar em 0, em seguida, mudar para um, voltar para 0 novamente. E usaremos a propriedade de atraso de animação para fazer essa alteração acontecer. E vai acontecer com as oito divs, uma após a outra, dando-nos o efeito que queremos. Então vou criar uma nova animação. Nomeie carregando. Em seguida, em 0% da duração da animação, vou adicionar a escala de transformação y 0, e eu vou copiar isso. Cole novamente e adicione 50 por cento. Eu vou fazer a escala y um em vez de 0. E finalmente, em 100%, vou mudar a escala de volta para 0. Novamente. Legal. Vamos adicionar esta animação aos oito divs. Eu vou subir aqui dentro da div com a classe de 0 BJ e adicionar animação. Carregando. Em seguida, a duração da animação de 0,8 segundos. Linear e infinito. Incrível. Então agora você pode ver que as oito divs estão ficando maiores, depois menores, depois maiores novamente. E eles continuarão fazendo isso indefinidamente. Agora, a fim de obter o efeito que queremos, precisamos usar a propriedade de atraso de animação em cada div. Então vamos direcionar cada div individualmente. Eu vou aqui e digo, oh, BJ cólon nth criança para, para mirar a segunda div. Então, dentro dele, adicionarei atraso de animação, 0,1 segundos. Então eu vou copiar tudo isso. Cole novamente seis vezes. Então, para a terceira div, vou adicionar o atraso de animação 0.2 segundos. Em seguida, para os 4,3 0 segundos e para os 5,4 0 segundos. E para os 6,50 segundos, para os 7,6 0 segundos. E, finalmente, pelos 8.7º 0 segundos. E assim, você pode ver que as divs são animadas para se mover um após o outro, dando-nos esse efeito realmente agradável que queríamos. E podemos obter outro efeito legal adicionando apenas uma linha de código. Vou entrar no div OBJ e vou adicionar fundo de origem de transformação. E isso apenas faz a escala de linha do ponto inferior, não seu ponto central, o que nos dá outro efeito legal que você pode usar em seus projetos. 99. 103 - carregamento de rotações com anéis usando animações CSS: Olá a todos. Nesta lição vamos criar este efeito de carregamento agradável usando animações CSS. Você pode ver que temos um pequeno círculo branco no centro. Então temos um anel amarelo que gira em torno dele. Em seguida, um verde no meio e um vermelho cercando-os. E você também pode ver os vermelhos e amarelos estão girando na mesma direção enquanto o verde está girando na direção oposta, vamos criar esses anéis rotativos usando bordas. Então vamos ver como podemos criá-los. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de Loader. Então, dentro disso, vou adicionar outra div, dar-lhe uma classe de exterior. Então esta será a borda vermelha que rodeia todos eles. Então eu vou adicionar outro div e dar-lhe uma classe de meio. E esta será a borda verde no meio que gira na direção oposta. Em seguida, outra div com a classe Enter para criar o anel amarelo interno. E, finalmente, uma div com a classe de dados para criar o ponto branco ou um círculo no centro. Então eu vou para o meu CSS e div alvo com a classe de carregador que contém todas as nossas classes. Então eu adicionarei largura, 200 pixels, altura 200 pixels também. Então eu vou adicionar posição relativa. Então eu vou mirar o div com a classe de exterior e adicionar posição absoluta, que possamos posicioná-lo em relação ao seu pai, o div carregador. Então queríamos ocupar a mesma largura e altura que o seu recipiente. Então vamos adicionar top 0, esquerda, 0, direita 0, e inferior. Você adivinhou 0 também. Então isso só fará com que a div externa preencha completamente o div carregador e ocupe sua largura total e altura. Em seguida, a fim de criar a borda vermelha externa, vou adicionar borda esquerda, cinco pixels sólido. Esta cor vermelha. Então eu vou copiar isso, colar três vezes. Então mudarei da esquerda para a direita e deixarei tudo como está. Então, teremos uma borda vermelha taxa também. Então eu vou mirar tanto as bordas superior quanto inferior. E tornar suas cores transparentes, não vermelhas. Então agora você pode ver que temos duas bordas vermelhas, apenas as esquerda e direita. E não temos bordas superior e inferior porque definimos a cor como transparente para que elas não apareçam. Certo, vamos voltar e fazer as bordas circulares. Vou aqui adicionar 50 por cento de raio de fronteira. E agora você pode ver que as fronteiras são uma circular. E criamos nossas fronteiras vermelhas externas. fim de criar as bordas no meio, vamos apenas copiar esta div, colada e direcionada div com a classe do meio. Em seguida, vamos apenas alterar os valores de topo, inferior, esquerda e direita para 30 pixels em vez de 0, modo que esta div vai começar a partir de 30 pixels do lado esquerdo do recipiente e terminar em 30 pixels do lado direito do recipiente. Portanto, sua largura será de 200 pixels menos 60 pixels, que é 140 pixels. E assim será menor. E a mesma coisa acontecerá com sua altura. Ele também será menor do que a div recipiente por 60 pixels. Então agora você pode ver que temos essas fronteiras médias no meio. Muito bem, vamos também criar as fronteiras internas. Vou copiar a div do meio, colá-la e apontar para a interna. Então eu vou apenas mudar as propriedades de posicionamento para 60 pixels em vez de 30. Assim, esta div iniciará 60 pixels de seu contêiner à esquerda e terminará em 60 pixels à direita. E a mesma coisa no topo e no fundo. Então você pode ver que nós temos esta fronteira entrar também. Certo, agora vamos criar o pequeno círculo que fica no centro dessas fronteiras. Vou atacar a div com a classe de ponto. Então eu vou adicionar posição, absoluta. Top 90 pixels, esquerda. 90 pixels, taxa 90 pixels. E no fundo. Isso mesmo, 90 pixels. Assim, o círculo será posicionado 90 pixels da div recipiente em todas as direções ao redor. Então vou adicionar cor de fundo, branco. E, finalmente, para torná-lo um círculo, vou adicionar 50% de raio de fronteira. Então agora você pode ver que temos o pequeno círculo branco que fica no centro da div recipiente. Tudo bem, agora que criamos todos os elementos, vamos começar a adicionar a animação a eles. Primeiro de tudo, vou até aqui e criar uma nova animação. Nomeie, gire. Em seguida, dentro disso, a 0% da duração da animação, vou adicionar transformar, girar 0. Em seguida, a 100%, vou adicionar transformar, girar 360 graus. Então vou adicionar esta animação às nossas fronteiras. Então eu vou primeiro dentro da div interna, em seguida, adicionar animação, girar, em seguida, animação duração de 1 segundo, depois linear e infinito. Então eu vou copiar esta declaração de animação e colá-lo dentro dos outros dois dibs. E agora você pode ver que os três divs estão girando juntos na mesma direção, dando-nos esse efeito. Mas se você se lembra, queremos que a fronteira do meio gire na direção oposta. Então o que podemos fazer é ir aqui dentro da div do meio e adicionar reverso como uma propriedade de direção de animação. Assim, a animação vai acontecer na direção oposta. E agora você pode ver que a div no meio está girando na direção oposta, dando-nos este efeito de carregamento agradável. E a única coisa que resta é mudar as cores das bordas média e interna. Então eu vou voltar para dentro da div do meio e mudar as cores da borda para uma cor verde em vez de vermelho. E também farei o mesmo para as fronteiras internas. Vou mudar sua cor para amarelo em vez de vermelho. E agora você pode ver que as bordas intermediárias e internas têm essas novas cores. E este é o efeito exato que queremos. 100. 104 - desfazendo quadrados usando animações CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este efeito de carregamento agradável usando animação CSS. Você pode ver que temos nove quadrados que estão desaparecendo muito bem nos dando esse efeito. E você pode ver a primeira coluna à esquerda desaparece primeiro, depois a segunda, depois a terceira. Temos algum pequeno atraso de animação entre cada coluna. Então vamos começar a criar esse efeito. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de carregador. Então esta será a classe que contém os nove quadrados dentro dela. Então eu vou adicionar nove vãos, e cada extensão terá uma classe de S. Então, de S1 todo o caminho para nove. Então teremos S1, S2, S3, e esses nove vãos são responsáveis pela criação de R-squares. Então eu vou para o meu CSS e direcionar a div com a classe de Loader. Em seguida, adicionarei posição, largura relativa, 90 pixels, altura 90 pixels também. Em seguida, exibir, flexionar, em seguida, coluna de direção flexível para que os nove divs serão alinhados em colunas. Em seguida, flexione, envolva, envolva para que os quadrados criem uma segunda coluna se eles não tiverem espaço suficiente na primeira, então abaixo disso, eu direcionarei nossos vãos. Então vou adicionar largura 30 pixels. Altura 30 pixels também. Então vou adicionar um fundo temporário vermelho. Então, finalmente, posição relativa. E agora vocês podem ver que temos este quadrado e, na verdade, são os nossos nove quadrados. Mas como todos eles têm a mesma cor de fundo e eles estão sentados tão juntos, eles aparecem como um grande quadrado. Tudo bem? Agora eu vou mirar o pseudo elemento antes de nossos vãos. Então vou adicionar conteúdo. Cordas vazias. Posição, absoluta, superior, 0, esquerda, 0, largura, 100% e altura. 100% também. Então vou adicionar cor de fundo, branco. E agora você pode ver a cor das caixas é agora esperar, porque agora temos nove antes pseudo elementos e eles têm a mesma largura e altura que as caixas. É por isso que eles estão cobrindo a caixa está completamente bem. Agora, vou voltar e remover este fundo vermelho porque não precisamos mais dele. Então criarei a animação responsável pelo nosso efeito. Então vou criar uma nova animação. Nomeie carregando. Em seguida, em 0% da duração da animação, vou adicionar largura 100% e altura 100%. Em seguida, no final da duração da animação, em 100%, vou adicionar largura 0 e altura 0. Então eu vou subir aqui dentro disso antes de um pseudo elemento e adicionar animação. Carregando 1 segundo, linear e infinito. E agora você pode ver que as nove caixas têm esse efeito onde sua largura e altura se tornam 0 em uma duração de animação de 1 segundo. Agora, a única coisa que resta é adicionar algum atraso de animação para a segunda, terceira colunas para nos dar o efeito exato que queremos. Então eu vou voltar e segmentar os pseudo elementos antes dos vãos melhor colocados na segunda coluna. E esses são o span com a classe de S4. Em seguida, o span com a classe de S5 ou o quinto span, em seguida, o span com a classe de seis ou o sexto span. E dentro disso, adicionarei atraso de transição 0,1 segundos. Então eu vou copiar isso. Cole de novo. Então eu vou direcionar os pseudo elementos antes do span na terceira coluna, que são o span com a classe de sete. Então como 89. Então eu mudarei o atraso da animação para 0,2 segundos. E agora você pode ver o efeito acontece para a primeira coluna primeiro, depois a segunda coluna depois disso. Em seguida, a terceira coluna dando-nos esta bela animação de carregamento. 101. 105 - de linhas de crescimento com animação CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este bom efeito de carregamento. Você pode ver que temos as seis partes coloridas do carregador e eles têm esse efeito em que eles ficam maiores que, menores, que maiores, e assim por diante. E isso está acontecendo um após o outro. Então vamos ver como podemos criar isso. Eu vou aqui no meu HTML e adicionar um div. Dê-lhe uma classe de Loader. E dentro dessa div, vou adicionar seis vãos. Então eu vou para o meu CSS e direcionar a div carregador. Então vou adicionar largura 70 pixels. E, a fim de exibi-los lado a lado, vou adicionar display flex. Então eu vou mirar os vãos dentro da div carregador. E adicione largura 10 pixels. Altura, 60 pixels, margem, 0 pixels da parte superior e inferior, e um pixel da esquerda e da direita. Então, finalmente, cor de fundo, branco. E agora você pode ver que as seis bandas estão sentadas lado lado e têm uma margem de um pixel entre cada uma. Vamos voltar e trabalhar no efeito de animação. Vou aqui criar uma nova animação. Nomeie carregando. Então, dentro disso, em 0% da duração da animação, vou adicionar a escala de transformação y 0,1. Assim, os vãos começarão a animar em 0,1 do seu tamanho original. Então, abaixo disso, com 35 por cento da duração da animação, adicionarei a escala de transformação y de volta a um novamente. Em seguida, em 60 por cento e em 100%, vou adicionar a escala de transformação y 0.1 também. Então, o que esta animação fará é fazer com nossa extensão comece a animar a 0,1 do seu tamanho original. Em seguida, eles vão ficar maiores até que eles atinjam seu tamanho original novamente. Então, de 35 por cento para 60 por cento, eles vão encolher novamente para 0,1 de seu tamanho. E eles vão ficar assim por um tempo de 60 por cento a 100% da duração da animação, então eles vão voltar para o tamanho original novamente, e assim por diante e assim por diante. Continuaremos animando infinitamente. Tudo bem, vamos adicionar esta animação aos nossos vãos e vamos aqui adicionar animação. Carregando. 0.8 segundos. Facilidade dentro, fora. E finalmente infinito. E agora você pode ver que os vãos tiveram esse efeito de animação onde eles começam em um tamanho pequeno, então ficam maiores, então ficam menores novamente e ficam lá por um pouco, e então ficam maiores e assim por diante. Agora precisamos mudar o plano de fundo de cada span e também adicionaremos alguns atrasos de animação diferentes a cada span para que eles apareçam um após o outro. Então eu vou aqui e digo para expandir a criança um para atingir o primeiro período. Então, dentro disso, vou adicionar cor de fundo. Esta cor verde, e o atraso da animação, 0,2 segundos. Agora, vou pausar o vídeo e direcionar todos os outros vãos e adicionar diferentes cores de fundo e atrasos de animação a cada span. Você pode ver que adicionei diferentes planos de fundo e atrasos de animação. E quando eu vou recarregar o navegador, você pode ver que os vãos agora têm cores diferentes e eles estão animando um após o outro, dando-nos este efeito realmente legal. 102. 106 - caixas de fundo se movendo usando animações CSS: Olá a todos. Bem-vindo a esta nova lição no curso. Nesta aula, nós vamos aprender como criar este plano de fundo animado. Então você pode ver que temos um texto aqui que diz animação de fundo. E no fundo temos um monte de caixas. E se você olhar para qualquer uma dessas caixas, você pode ver que ela se move da parte inferior da tela, que vem de baixo. E então ele se move para cima enquanto gira. E sua opacidade diminui até chegar ao topo da tela. E além. Em seguida, a opacidade torna-se 0 e desaparece. Tudo bem, vamos começar aqui em nosso HTML e adicionar uma div. Dê a ele uma classe de contêiner. Então, dentro desse div, vamos adicionar outro div e dar-lhe uma classe de quadrado. Então vamos usar esta div quadrada para criar nossas caixas. Mas há muitas caixas. Então vamos copiar este div quadrado e colá-lo um número de vezes igual ao número de caixas que temos. Então agora temos 10 divs com a classe de quadrado que representará as 10 caixas em movimento no fundo. Então, abaixo disso, vou adicionar outra div, dar-lhe uma classe de texto. E dentro dele vou adicionar a palavra animação de fundo. Tudo bem, vamos passar para o nosso CSS para adicionar nossos estilos. Vou começar com o div recipiente que contém todos os divs. Então eu vou mirá-lo. Então vou adicionar posição, largura relativa, 100%, altura, 100% também. Então, ele ocupará toda a largura e altura do corpo ou da tela inteira. Então eu adicionarei transbordamento escondido. Agora vamos estilizar o texto que temos. Então eu vou direcionar a div com o texto da classe. Então queremos centralizá-lo horizontalmente e verticalmente. Então vamos adicionar posição, absoluta, superior, 50 por cento, esquerda, 50%. Em seguida, transforme, traduza, 50% negativos e 50 por cento negativos. Então agora você pode ver o texto está centrado horizontalmente e verticalmente dentro da div recipiente. E como a div recipiente tem toda a largura e altura do corpo, o texto é centrado horizontal e verticalmente dentro do corpo. Vamos voltar e fazer este texto parecer um pouco melhor. Eu vou aqui e adicionar cor, texto branco transformar. Maiúsculas, tamanho da fonte 45 pixels. Em seguida, borda os cinco pixels superiores, branco sólido. E borda inferior 50 pixels, branco sólido também. Então agora o texto parece muito melhor e estamos prontos para criar a animação das caixas ou dos quadrados. Lembre-se, existem 10 quadrados, então vamos adicionar todos os estilos que eles têm em comum primeiro lugar. E depois disso, vamos direcionar cada um dos 10 individualmente e adicionar seus estilos únicos. Então vamos adicionar os estilos comuns primeiro, vou direcionar a div com a classe de quadrado. E eu vou adicionar posição absoluta. Em seguida, a fim de posicioná-los abaixo da parte inferior do recipiente div, que tem a mesma altura do corpo. Isso significa que eles se moverão abaixo do corpo ou abaixo da tela. Vou adicionar inferior, negativo 100 pixels. Em seguida, vou adicionar cor de fundo. Esta cor cinza claro. Muito bem, estes são os estilos comuns que todas as caixas têm. Todos eles estão localizados abaixo da parte inferior da tela. E todos eles têm a mesma cor de fundo. Mas se eu ir para o navegador e recarregar, você pode ver nada aparece na tela porque eu não defini qualquer largura ou altura para esses quadrados. E mesmo se eu voltar para o editor de código e chegar aqui dentro do seletor de contêiner, então remova essa propriedade oculta de estouro. Em seguida, volte para o navegador e recarregue. Você também pode ver que nada aparece. Portanto, eles não estão se escondendo abaixo da parte inferior da tela devido à sua propriedade inferior ou algo assim. Nós só precisamos definir sua largura e sua altura para que eles apareçam. E vamos fazer isso para cada quadrado individualmente porque eles têm diferentes larguras e alturas. Então vamos fazer isso com o primeiro quadrado. Eu vou aqui e mirar o primeiro quadrado adicionando quadrado enésimo filho um. Então, dentro disso, eu vou definir sua largura para 75 pixels, em seguida, sua altura para 75 pixels, bem como porque é um quadrado obviamente. Então, finalmente, vou definir sua propriedade esquerda para 7%. Então, agora, quando eu rolar para baixo, vocês podem ver que temos nosso primeiro quadrado aparecendo aqui abaixo do corpo. E está aparecendo porque nós definimos uma largura e uma altura para ele. E também está sentado à esquerda porque dissemos que é propriedade esquerda para 7% Tudo bem, Nós não queremos que ele apareça quando nós rolamos. Então vamos voltar para dentro do recipiente div. E adicionaremos overflow escondido novamente. E agora não é mais visível, mas ainda está lá agora. Muito bem, vamos trabalhar para animar esta caixa. Lembre-se de que as caixas foram movidas da parte inferior para a parte superior da tela enquanto giravam e desapareciam ao mesmo tempo. Então vamos criar uma animação que fará isso. Então eu vou criar uma nova animação aqui. Nomeie caixas. Em seguida, dentro dele a 0% da duração da animação, ou no início dela, vamos adicionar menos 100 pixels negativos como ele está. Então, ele começará a partir de uma posição abaixo da parte inferior da tela. Em seguida, em 100% da duração da animação, vou modificar a propriedade inferior para 100%. Então, isso fará com que a caixa seja movida da parte inferior da tela até o topo. Nós também precisaremos girar as caixas e fazer sua opacidade diminuir. Então vamos fazer isso. Vou adicionar transformar, girar 180 graus, em seguida, opacidade 0. Assim, no final da duração da animação, as caixas serão giradas em 180 graus e sua opacidade será 0. Muito bem, vamos adicionar esta animação às nossas caixas. Eu vou subir aqui dentro da div com a classe de quadrado. E eu vou adicionar caixas de animação. Em seguida, a duração da animação de dez segundos. Então queremos que a animação continue para sempre. Então vamos adicionar infinito. E finalmente, facilidade em entrar, sair. E agora, quando eu vou para o navegador e recarrego, você pode ver que a caixa começa a se mover de baixo da parte inferior desta tela para cima enquanto gira. E sua opacidade está diminuindo até que ele vá para o topo e desapareça. Em seguida, ele volta para a sua posição original abaixo da tela. E a animação acontece uma e outra vez porque a tornamos infinita. Tudo bem, então agora nós criamos animação e a única coisa que resta para terminar esta lição é criar as outras nove caixas. Então vamos definir diferentes larguras e alturas para todos eles. Nós também mudaremos a propriedade esquerda para eles para que eles se sentem um ao lado do outro. E finalmente, vamos adicionar alguns atrasos de animação diferentes para que todos eles comecem a se mover em um momento diferente. E com isso, teremos o nosso efeito. Então vou pausar o vídeo e adicionar esses estilos diferentes para as outras nove caixas. E voltaremos de novo. Tudo bem, agora eu adicionei todos os estilos. Por exemplo, você pode ver no segundo quadrado, definimos a largura e a altura para 65. Nós também definimos a propriedade esquerda para 15% para que ele se sentará ao lado do primeiro quadrado. E finalmente, adicionamos um atraso de animação de quatro segundos, para que ele não comece a se mover até quatro segundos após o recarregamento da página. Eu adicionei valores diferentes para o resto das caixas também que eu vou deixar você dar uma olhada ao visualizar as fontes desta lição. Tudo bem, agora eu vou voltar e recarregar o navegador, e então as caixas começarão a se mover de baixo para cima em momentos diferentes enquanto girando e desaparecendo. E isso nos dá o efeito que queremos. 103. 107 - animação de loader hexagonal: Olá a todos, bem-vindos a esta nova lição no curso de animação CSS. Nesta lição, vamos criar esta bela animação de carregamento de hexágono deslizante. Você pode ver que consiste em duas partes, uma linha horizontal e a forma hexágono acima dela. A linha está girando para frente e para trás em seu ponto central, enquanto o hexágono está se movendo de um lado para o outro, trás e para frente também. E também está girando em seu ponto central ao mesmo tempo. Este será um exemplo interessante. Então vamos ver como podemos fazer isso. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de linha. Então, dentro dele, vou adicionar outro div e dar-lhe uma classe de hexágono. Tudo bem, então eu vou para o meu CSS para estilizar esses divs. Vou mirar a div com a classe de linha. Então vou adicionar largura, 300 pixels, borda inferior, quatro pixels, branco sólido. Então esta será a linha em que o hexágono se move. Então eu vou adicionar posição relativa. Ok, Agora vamos aprender a criar a forma hexágono. Primeiro, vou mirar a div com a classe de hexágono. Então vou adicionar posição, absoluta, esquerda, 0, inferior, 0, largura 50 pixels, altura 30 pixels. E finalmente, cor de fundo, vermelho. Então agora você pode ver que temos apenas um retângulo que tem uma largura de 50 pixels e uma altura de 30 pixels e uma cor de fundo vermelho. Então a idéia por trás da forma hexágono é que vamos criar outros dois retângulos como este, e vamos girar um deles em 60 graus e o outro em 60 graus negativos. E isso nos dará a forma hexágono que estamos procurando. Então vamos realmente criar isso. Para criar os outros dois retângulos, vamos usar os pseudo elementos antes e depois. Então eu vou mirar a div com a classe de hexágono e adicionar dois pontos antes. E eu vou adicionar conteúdo strings vazias porque nós não queremos adicionar nada aqui. Em seguida, posição absoluta, topo 0, esquerda, 0. Queremos que ele tenha a mesma largura e altura que o retângulo vermelho. Então vamos adicionar largura, 100%, altura, 100% também. Então vamos adicionar cor de fundo, azul por enquanto. Tudo bem, agora você pode ver que temos o retângulo azul sentado em cima do vermelho. E está cobrindo porque tem a mesma altura e largura que o retângulo vermelho. Ok, agora vamos adicionar transformação girar. Então agora você pode ver que o retângulo azul agora é girado 60 graus e o vermelho agora está aparecendo atrás dele. Vamos continuar trabalhando. Vamos copiar o pseudo elemento antes, colá-lo novamente, e mudar antes para, depois. Em seguida, altere a cor de fundo para verde. E vamos girá-lo em 60 graus negativos, não 60. E aqui você pode ver que temos o fundo verde sentado em cima do vermelho e azul e girá-lo em 60 graus negativos. E esses três retângulos estão criando a forma hexágono. Então, se eu voltar e mudar a cor de fundo de todos eles para branco, em seguida, recarregue meu navegador. Você pode ver claramente o formato hexágono está sentado no topo da linha, mas precisamos movê-lo um pouco em direção ao topo. Então eu vou voltar para o seletor de hexágono, e eu vou mudar o fundo para 14 pixels em vez de 0. E agora o hexágono está sentado corretamente logo acima da linha. Agora, certo? Depois de criar a forma de hexágono, agora precisamos trabalhar na animação. Se olharmos para a nossa demo, quero que se concentre na animação hexágono. Você pode ver que temos duas coisas acontecendo aqui. Primeiro, o hexágono se move da esquerda para a direita, depois volta novamente, e continuará fazendo isso infinitamente. E enquanto se move da esquerda para a direita, você pode ver que o hexágono está girando em seu ponto central. E se olharmos para a linha em si, você pode ver que ela também está girando em torno de 30 graus para frente e para trás junto com o movimento do hexágono. Então vamos voltar e criar essas animações. Primeiro, vamos criar a animação para o hexágono. Vou criar uma nova animação. Dê um nome de hexágono animado. Em seguida, em 0% da duração da animação, vou adicionar esquerda 0. Em seguida, em 50 por cento, vou adicionar esquerda 100%. E, finalmente, em 100%, vou adicionar esquerda. 0 novamente. Então o que esta animação fará é fazer com que o hexágono se mova de sua posição original à esquerda para a direita em 100% da largura do contêiner, que é 300 pixels, então ele voltará novamente para sua posição original. Então vamos adicionar esta animação ao hexágono. Eu vou subir aqui dentro da div hexágono, e eu vou adicionar animação. Animar hexágono. Dois segundos, linear. E porque queremos que o movimento aconteça indefinidamente, vamos dizer infinito. Então agora você pode ver que o hexágono está se movendo da esquerda para a direita, em seguida, volta novamente e assim por diante. Mas se olharmos mais de perto este movimento, você pode ver que quando o hexágono atinge o fim da linha, ele vai um pouco além dele por um espaço igual à sua largura. E isso é porque nós definir esquerda para 100% taxa aqui. Para evitar isso, devemos subtrair a largura do hexágono deste 100% aqui. Para fazer isso, vamos usar a função de contagem. Então eu vou para a direita aqui e adicionar calc, 100% menos a largura do retângulo, que é de 50 pixels. Então isso significa que o hexágono agora moverá uma distância igual a 100% da distância para a esquerda menos sua própria largura, que é de 50 pixels. Agora, quando eu voltar e recarregar, você pode ver que o hexágono se moverá corretamente do jeito que queremos. Muito bem, vamos trabalhar na rotação do hexágono. Queremos fazer o hexágono girar enquanto se move. Então vamos dizer que queremos girá-lo para ciclos ao longo do caminho. Então dois ciclos, ou igual a 360 graus multiplicados por dois, que é 720 graus. Então eu vou aqui em 50% da duração da animação em que o hexágono estará no final da linha. E eu adicionarei transformar, girar 720 graus. E isso significa de 0 a 50% da duração da animação. Em outras palavras, durante a primeira metade da duração da animação, o hexágono girará de 0 graus para 720 graus, depois de 50% para 100%, ou durante a segunda metade da duração da animação, o hexágono girará de volta de 720 graus para 0 graus. Então poderíamos ter apenas adicionado girar 0 no início e no final da duração da animação, mas é o valor padrão. Então não adicionamos nada, e obteremos o mesmo resultado. Então, agora, quando eu vou para o navegador e recarrego, você pode ver que o hexágono está girando enquanto se move acima da linha exatamente da maneira que queremos. Ele gira de 0 graus para 720 graus durante a primeira metade da duração da animação, depois gira de volta durante a segunda metade. Ótimo. Agora precisamos animar a linha em si. Então vou criar uma nova animação. Dê o nome de linha animada. E com 0% da duração da animação, vou adicionar transformação. Gire 30 graus. Assim, a linha será girada em 30 graus. Quando eu recarregar a página. Então eu vou copiar isso. Cole de novo. E com 25 por cento da duração da animação, eu mudarei a rotação de volta para 0 graus. Então sua rotação será 0 e será apenas uma linha horizontal como ela é. Em seguida, em 50%. Vou mudá-lo para 30 graus negativos. Então ele girará 30 graus, mas na outra direção, porque temos um sinal negativo. E em 75 por cento, adicionarei 0 novamente, então ele retorna à sua posição horizontal. E finalmente, a 100%, vou mudá-lo de volta para 30 graus. Então o que acontecerá aqui é quando recarregarmos, a linha será girada para a direita em 30 graus. Então, à medida que a animação continua, ela retornará a 0 graus. Em seguida, 30 graus negativos, que são 30 graus para a esquerda. Em seguida, volte para a rotação 0, depois 30 graus. E vai continuar fazendo isso para sempre. Muito bem, vamos adicionar esta animação à nossa linha. Eu vou direto aqui para o div recipiente e eu vou adicionar animação. Anime a linha dois segundos. E note que devemos fazer a duração da animação aqui dois segundos para que ela corresponda à animação do hexágono. Então adicionamos linear e infinito. Então agora você pode ver que tudo está funcionando perfeitamente e nós temos a animação de carregamento. Nós queremos. 104. 108 - efeito de menu de linha de expansão usando animações CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, nós vamos criar este efeito agradável sobre o menu. Você pode ver quando eu passar o mouse sobre os itens do menu, este efeito acontece onde temos uma linha vermelha fina que vem da esquerda e, em seguida, se expande para cobrir o link, dando-nos este efeito legal. Vamos ver como podemos criar isso. Vou aqui no meu HTML e adicionar uma URL. Quando um LI, em seguida, uma marca âncora dentro disso. E eu vou dizer para casa. Em seguida, vou copiar este link, colá-lo novamente quatro vezes, e dizer sobre Serviços, Equipe e contato. Então eu vou para o meu CSS para estilizá-los em você. Vou transformá-lo na URL e adicionar margem 0, preenchimento 0 também. Em seguida, a fim de fazer o item da lista sentar lado a lado, eu vou adicionar display flex. Então eu vou mirar o LI no estilo de lista. Nenhum. Em seguida, vou direcionar a tag âncora e adicionar posição, relativa. Exibição. Bloquear. Em seguida, a margem 0 da parte superior e inferior e dez pixels da esquerda e da direita para ter algum espaçamento entre os links. Em seguida, adicionarei preenchimento, cinco pixels de cima e de baixo, e dez pixels da esquerda e da direita. Quando eu vou adicionar cor. Com cor cinza escuro. Tamanho da fonte 30 pixels. Decoração de texto, nenhum. Transformação de texto. maiúsculas. Quando finalmente a transição 0,5 segundos. E agora você pode ver que os links do menu estão olhando exatamente do jeito que queremos. Agora, vamos voltar e criar a linha fina que vem da esquerda. Vamos criar isso usando o elemento pseudo antes. Então eu fui eleito e adicionar conteúdo, string vazia, uma posição, largura absoluta, 100%, altura, apenas quatro pixels. Então queremos que esta linha seja centralizada verticalmente. Então eu vou adicionar top 50 por cento. Depois Transformar, Traduzir Y negativo 50%. Então, para deslocá-lo para a esquerda, adicionaremos 100% esquerdo, negativo. E cor de fundo. Esta cor vermelha. Então, finalmente, a transição de 0,5 segundos. E agora você pode ver que temos essas linhas finas que se sentam ao lado dos links. E ao passar o mouse sobre os links, queremos que essas linhas se movam da esquerda para a direita. Em seguida, ele se expandirá para cobrir o link. Então vamos fazer isso. Vou aqui criar uma nova animação. Diga o nome da linha. Em seguida, dentro que em 0%, eu vou adicionar esquerda negativo 100% e altura quatro pixels. Em seguida, vou copiar este código, colá-lo novamente e mudar para a esquerda para 0. E eu vou deixar a altura igual a quatro pixels como ela é. Em seguida, copie este código, cole-o e altere a altura para 100%. Então, ele ocupará toda a altura do link. Então vou adicionar um negativo de índice z. Então o que acontecerá aqui é que a linha vermelha começará a se mover da posição esquerda. Vamos nos mover até que tenha um valor esquerdo de 0. Então, depois disso, ele se expandirá e sua altura aumentará até cobrir um piscar de olhos. E adicionamos um negativo de índice z aqui para que o texto apareça na frente da linha vermelha. Muito bem, vamos adicionar esta animação à linha vermelha. Ao passar o mouse sobre o link, vou aqui e dizer, quando passarmos o mouse sobre a tag âncora, selecionarei o pseudo elemento antes e adicionarei animação. Linha 0,5 segundos linear. E queremos que a animação pare quando chegar ao ponto final. Vamos adicionar adiante aqui. E agora, quando eu passar o mouse sobre os links, você pode ver a linha vermelha se move da esquerda para a direita. Em seguida, ele se expande para ocupar a altura total do link e cobri-lo, dando-nos este efeito realmente legal. A única coisa que resta agora é mudar a cor do texto do link para branco ao passar o mouse sobre os links. Então eu vou aqui e dizer, quando passarmos o mouse sobre o link, eu mudarei a cor para branco. E eu também vou subir aqui dentro do link e adicionar overflow escondido. E agora você pode ver que a linha vermelha agora está escondida. E quando eu voltar e passar o mouse sobre os links do menu, a linha vermelha vem da esquerda para a direita. Então ele se expande para encobrir o link, dando-nos o efeito exato que queremos. 105. 109 - animações de fundo usando animações CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar esta animação de fundo. Você pode ver que temos este título que tem este texto de animação de fundo. E temos essas caixas que ficam maiores ao girar. Alguns deles são vermelhos e os outros são azuis. E eles têm diferentes atrasos de animação. É por isso que eles estão aparecendo um após o outro. Então vamos ver como podemos criar esse efeito. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de recipiente. E dentro disso, vou adicionar H2 e dizer animação de fundo. Então, abaixo disso, adicionaremos nossas caixas. Vou adicionar um div, dar-lhe uma classe de caixa. Quando a nossa cópia esta div, colá-lo novamente cinco vezes. Então estas seriam as seis caixas que terão o nosso efeito. Então eu vou para o meu CSS, segmentar a div com a classe de recipiente, e adicionar posição, relativa, altura, 100 vh e overflow oculto. Então eu vou mirar o H2 e adicionar margem 0, cor, branco, posição, absoluto. E, a fim de centralizá-lo, vou adicionar 50 por cento top. À esquerda. 50 por cento também. Em seguida, transforme, traduza, 50% negativos e 50 por cento negativos. Em seguida, vou adicionar tamanho de fonte 45 pixels. Transformação de texto, maiúsculas. Então, finalmente, z index 1, modo que a caixa é não vai cobri-lo. E agora você pode ver que o H2 está muito melhor. Vamos voltar e trabalhar nas caixas. Vou mirar a div com a classe de caixa. E eu vou adicionar posição, absoluta. Topo, 80 por cento, esquerda, 45 por cento. A largura. 10 pixels, altura, 10 pixels também. Em seguida, limite um pixel. Sólido. Esta cor azul. E agora você pode ver que temos essa caixinha. Tem uma pequena borda azul de um pixel. Esta não é apenas uma caixa, são na verdade as seis caixas, mas estamos sentados um em cima do outro ou na frente do outro. É por isso que estamos aparecendo como uma caixa. E mudaremos o posicionamento de cada caixa para que eles estejam localizados em diferentes pontos na página. Então vamos voltar e fazer isso. Eu vou aqui e mirarei o segundo filho das caixas. Então eu vou mirar a div com a classe de caixa. E eu vou dizer nth criança dois. E então eu vou adicionar top 40 por cento e esquerda 25 por cento. Eu também adicionarei uma cor de borda, vermelho. Então agora você pode ver que temos uma nova caixa sentada aqui em sua nova posição. Certo, vamos voltar e fazer o mesmo com as outras caixas. Vou copiar este div, colá-lo novamente quatro vezes. E isso vai ter como alvo a terceira div aqui. E James chegou a 50 por cento e deixou a 75 por cento. Então, abaixo disso, eu direcionarei a quarta div e mudarei para 10 por cento e deixarei para 90%. Eu também adicionarei a cor da borda vermelha quando a quinta div mudar topo para 85 por cento e esquerda para 10 por cento. E, finalmente, o sexto filho e mudar top 10 por cento e deixou para 50 por cento. Em seguida, adicione a cor da borda, vermelho. E agora vocês podem ver que temos nossas seis caixas por todo o lado porque mudamos o posicionamento de cada uma. Agora, vamos trabalhar no efeito de animação. Se você se lembra, as caixas ficam maiores ao girar. Então eu vou aqui e criar uma nova animação. Nomeie caixas. E dentro dele a 0% da duração da animação, adicionarei transformação, escala 0 e girarei 0 graus. Depois opacidade um. E abaixo disso em 100%, vou adicionar transformação, escala 20, girar 960 graus e opacidade 0. Então o que vai acontecer aqui é que a caixa começará a partir de uma escala de transformação de 0, significando de nada na verdade para uma escala de transformação de 20. Assim, ele vai ficar 20 vezes maior durante a duração da animação. E ele estará girando de 0 graus para 960 graus enquanto faz isso. E também sua opacidade diminuirá até que se torne transparente. Muito bem, vamos adicionar esta animação à caixa div. Vou subir aqui e adicionar caixas de animação. Em seguida, uma duração de animação de 12 segundos, em seguida, facilitar quando infinito. Então agora você pode ver que a caixa está ficando maior enquanto gira, dando-nos o efeito que queremos. Mas o efeito será muito melhor se pudermos adicionar alguns atrasos de animação entre as caixas. Então eles aparecerão um após o outro. Então vamos voltar e fazer isso. Eu vou aqui dentro do segundo filho e adicionar animação atraso dois segundos. Em seguida, dentro do terceiro filho, e adicionar atraso de animação. Quatro segundos. Em seguida, seis segundos dentro do quarto filho. E oito segundos dentro da quinta criança. E, finalmente, dez segundos dentro do sexto filho. E agora você pode ver que as caixas estão animando uma após a outra, devido aos diferentes atrasos de animação que adicionamos a cada uma delas. Mas há um problema, como você pode ver, quando eu recarrego a página. Por exemplo, dê uma olhada nesta caixa. Você pode ver que ele está aparecendo e aguardando que seu atraso de animação termine. Em seguida, começa o animador. Mas não queremos que apareça até começar a se animar. Então o que podemos fazer é voltar aqui e adicionar escala de transformação 0. E agora você pode ver que a caixa não aparece até que eles comecem a animar. E todos eles estão se movendo, dando-nos o efeito que queremos. 106. 110 - o que é a propriedade de clip do CSS e como podemos usar isso no: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos aprender sobre a propriedade de clip-path CSS e como podemos usá-lo para criar as formas. Então vamos criar um triângulo, um círculo, um hexágono através de uma estrela, e forma de mensagem. É uma ferramenta muito poderosa e vamos usá-la nas próximas lições para criar alguns exemplos de animações criativas. Então, primeiro de tudo, qual é a propriedade clip-path? Bem, o caminho do clipe é uma propriedade CSS que nos permite especificar uma parte ou região específica de um elemento a ser exibido com o resto do elemento sendo oculto. Então, todos os exemplos que vimos onde apenas a parte do elemento que está sendo exibido. Então, no exemplo de triângulo, nós escolhemos para exibir uma parte de nossa imagem que tem a forma de triângulo. E o resto da imagem fora deste triângulo estava escondido. E isso é verdade com o resto das formas também. Tudo bem, vamos ver como podemos usar a propriedade do caminho do clipe para criar essa forma de triângulo. Vimos em nosso primeiro exemplo. Aqui no meu HTML, eu só tenho uma imagem. E no meu CSS adicionei uma largura e uma altura específicas para esta imagem. E como você pode ver, a imagem está sentada no meio do navegador. Certo, agora, vamos usar a propriedade do caminho do clipe para criar a forma do triângulo que queremos. Portanto, queremos mostrar apenas esta parte e ocultar ou cortar o resto da imagem. Como podemos fazer isso? Eu vou aqui dentro do elemento que queremos cortar, que é a imagem. Então eu adicionarei polígono de caminho de clipe. E eu vou apenas adicionar este código aqui. E como você pode ver, a parte da imagem que está sendo exibida é este triângulo e a região fora desse triângulo está oculta. Então vamos voltar e explicar o código que adicionamos aqui. Este código aqui define a área da imagem que queremos exibir. Você pode ver que consiste em três pares, e cada par representa um ponto do triângulo. Assim, o primeiro par representa este ponto do triângulo. O segundo par representa este segundo e o terceiro par representa este último ponto. E estes são os pontos que definem ou criam o nosso triângulo. Então vamos ver como o valor de cada par representa esses pontos. Antes da imagem ser cortada, este era o seu tamanho, certo? Era um quadrado. Então vou deixar esta praça como está para nos ajudar a imaginar o que aconteceu aqui. O primeiro par de pontos é de 50 por cento e 0%. Então, esses 50% representam a distância do canto superior esquerdo da imagem ao longo do eixo x. E o 0 representa a distância do canto superior esquerdo da imagem ao longo do eixo y. Então começamos aqui no canto superior esquerdo da imagem. Então movemos 50% para a direita ao longo do eixo x até chegarmos aqui. Em seguida, movemos 0% para a parte inferior ao longo do eixo y. Então, 0 por cento significa que não nos movemos. Então este é o nosso primeiro do triângulo. Em seguida, o segundo par aqui tem 0% no eixo x e 100% no eixo y. E isso é verdade. Você pode ver aqui este ponto está localizado no canto inferior esquerdo. Assim, a partir do canto superior esquerdo, movemos 0% de distância para a direita e 100% de distância para a parte inferior. E acabamos nesse ponto. Finalmente, o terceiro par tem 100% no eixo x e 100% no eixo y. E representa este ponto, que está localizado no canto inferior direito. Assim, a partir do canto superior esquerdo, movemos 100% para a direita ao longo do eixo x e 100% em direção ao fundo ao longo do eixo y, a fim de chegar a este ponto. Tudo bem, então basicamente damos ao navegador os pontos que definem nossa forma. E então o navegador desenha essa forma e mostra o que está incluído na forma e oculta ou corta o resto das partes do elemento fora da forma. Então digamos que eu queira desenhar outro triângulo que mostre essa parte da imagem e esconda o resto. Então basicamente queremos virar o triângulo de cabeça para baixo ou fazer a base no topo. Então vamos definir nossos três novos pontos. O primeiro estará localizado aqui no canto superior esquerdo. Então, basicamente, não vamos nos mover e horizontalmente ou verticalmente. Assim, o primeiro par será igual a 0, 0%. Passando para o segundo, ele estará localizado no canto superior direito. Então vamos mover 100% para a direita ao longo do eixo x e 0% ao longo do eixo y. Então teremos 1000%. Então o terceiro e último ponto será bem aqui no centro inferior da imagem. Então vamos mover 50 por cento para a direita ao longo do eixo x e 100% para a parte inferior ao longo do eixo y. Então teremos 50 por cento e 100% aqui. E agora, quando eu recarrego o navegador, você pode ver que temos este novo triângulo que é definido por esses três novos pontos. Certo, pessoal, então é o treino. Eu quero que você tente criar esta forma de triângulo onde a base está localizada no lado esquerdo da imagem. Então você vai apenas mudar alguns valores aqui, a fim de obter esta forma. Então, pause o vídeo e experimente por conta própria. Tudo bem, Agora eu quero falar sobre uma ferramenta muito agradável que vamos usar a partir de agora quando se trabalha com a propriedade do caminho do clipe. Então, como você deve ter notado, será difícil criar formas complexas codificando diretamente. Será melhor se tivermos uma ferramenta que possa nos ajudar. E esta ferramenta é na verdade um site chamado Clippy. Como podem ver, temos muitas formas aqui que podemos aplicar aos nossos elementos. Então temos esse triângulo e seu código está bem aqui. Então, podemos simplesmente copiar este código e adicioná-lo diretamente ao nosso elemento. Então vamos tentar a forma do círculo. Vou copiar este código. Volte para o navegador e cole-o aqui dentro do seletor de imagens. E como você pode ver, a imagem agora é transformada em um círculo e as partes fora do círculo estão escondidas. Vamos voltar e tentar outra forma. Vamos tentar esta nave estelar. Vou copiar o código. Volte para o meu CSS e cole-o. Então você pode ver que a imagem agora toma a forma de estrela. Então, como você pode ver caras, a propriedade do caminho do clipe é realmente poderosa na criação de formas a partir de elementos HTML. Também podemos controlar qual forma queremos criar. Não tem que ser essas formas específicas aqui. Podemos brincar até termos a forma que queremos. Por exemplo, vou escolher esta forma trapezoidal aqui. E como podem ver, temos esses pontos coloridos que podemos usar para nos movermos e criar qualquer forma que quisermos. Digamos que estou feliz com este. Posso copiar o código daqui, colá-lo dentro do seletor de imagens. E como você pode ver, a imagem agora tem essa forma. Então eu quero que você brinque com esta ferramenta legal e se acostume com ela porque nós vamos usá-lo muito em nossas animações futuras, efeitos. 107. 111 - efeito de carregamento dividido criativo usando a propriedade de cliquei: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este efeito de carregamento de texto dividido usando animações de clip-path e CSS. Você pode ver que o carregamento de palavras é dividido em duas partes, ou parte superior e uma parte inferior. Vamos fazer isso usando a propriedade de caminho de clipe. E também a parte superior vem da direita para a esquerda, enquanto a parte inferior vem da esquerda para a direita. E eles se encontram no centro formando o carregamento de palavras. É um efeito muito bonito. Então vamos começar a criá-lo. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de Loader. Dentro dele, vou adicionar uma extensão, dar-lhe uma classe de metade superior. E dentro dele eu vou adicionar a palavra carregamento. Então eu vou copiar este span, colá-lo, e mudar a classe para metade inferior em vez de metade superior. Em seguida, movendo-se para o meu CSS, vou direcionar a div com a classe de carregador. Então eu vou adicionar largura 300 pixels, altura 60 pixels. Em seguida, borda sete pixels, sólido. Esta cor azul. E também adicionarei um raio de borda de 10 pixels. Tudo bem, vamos enviar para esses dois vãos. Vou voltar e adicionar texto align, center e line-height, 60 pixels. E, finalmente, vou adicionar posição relativa. Como você pode ver, os vãos agora estão centralizados dentro da div do carregador. Vamos voltar e fazer esses vãos sentarem um por cima do outro. Então eu voltarei aqui e visarei a extensão. Então eu vou adicionar posição absoluta, topo 0, esquerda 0 também. Então, a fim de fazê-los ter a mesma largura e altura que o div carregador. Vou adicionar largura, 100%, altura, 100%. Em seguida, adicionarei o tamanho da fonte, 48 pixels. Transformação de texto, maiúsculas. E finalmente, o peso da fonte 600. E como você pode ver, os vãos agora são maiores e eles estão sentados uns sobre os outros porque nós definimos a largura e a altura para 100% de seu contêiner. Tudo bem, vamos voltar e trabalhar na primeira banda que tem a metade superior da classe. Eu vou apontar para ele. Então eu vou adicionar cor. Esta bela cor vermelha. Em seguida, queremos tornar apenas a metade superior deste span visível e alta a metade inferior, porque a metade inferior será representada pela segunda extensão. Então nós faríamos isso usando a propriedade de caminho de clipe. Vou ao Clippy e escolherei a forma trapezoidal. Então eu vou arrastar esses círculos até eu obter exatamente a metade superior do nosso elemento. Simplesmente assim. Então eu vou copiar o código, voltar para o meu CSS, e colá-lo no span com a classe da metade superior. Então eu vou mirar a extensão com a classe da metade inferior. Em seguida, adicione cor, nossa cor azul. Então queremos exibir apenas a metade inferior. Então eu vou voltar para Clippy e mover esses pontos para obter a metade inferior. Só. Então eu copiarei o código. Volte e cole-o dentro da metade inferior. E assim como esses caras, você pode ver que nós temos apenas a metade superior do primeiro espaço visível enquanto a parte inferior está escondida ou cortada. E o mesmo para a parte inferior. E porque eles estão sentados em cima um do outro e têm o mesmo tamanho de fonte. Eles parecem ser um elemento, mas não são. Tudo bem, finalmente, vamos criar a animação que faz a jogada até que eles se conheçam. Vou criar uma nova animação. Diga o nome, divida-o. Em seguida, dentro dele a 0% da duração da animação, vou adicionar transformar, traduzir X 100%. Então eu vou copiar isso. Cole novamente três vezes. E em 40 por cento, eu mudarei o valor da transformação de volta para 0. Em seguida, em 60%, eu vou fazer 0 também. Então, em 100%, vou mudá-lo para 100% negativo. Então, olhando para esta animação, você pode ver que o elemento, vamos começar em 100% de sua largura a partir da direita. Em seguida, ele se moverá para a esquerda até retornar à sua posição original com 0 traduzir. Em seguida, de 40 por cento a 60 por cento da duração da animação, ele permanecerá em sua posição em 0 traduzir. Em seguida, ele se moverá para a esquerda novamente em 100%. Então vamos adicionar essa animação à metade superior. Irei aqui e adicionarei animação. Dividir, depois a duração da animação de quatro segundos, depois linear, e finalmente infinito. Agora você pode ver que a parte superior está se movendo da direita, então fica um pouco no centro, então ele se move para a esquerda e continua fazendo isso. Vamos também adicionar essa animação à parte inferior. Eu vou voltar para copiar a linha de animação de código, colá-lo, e no final eu vou apenas adicionar reverso. Então este é um valor de direção de animação que fará com que o elemento animado em uma direção inversa de 100% a 0%. Então vamos começar pela esquerda e ir para a direita, não da direita para a esquerda. E finalmente, eu vou subir aqui dentro do carregador div. E adicionarei overflow escondido para que os vãos não apareçam fora de uma div carregador. E agora você pode ver a parte inferior também é animada na outra direção. E juntos eles estão criando esse efeito realmente agradável. 108. 112- efeito wavy criativo usando a propriedade de clipe de CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este efeito ondulado agradável usando animações CSS e a propriedade do caminho do clipe. É um exemplo muito legal e vamos ver como podemos animar a propriedade do caminho do clipe, a fim de obter um efeito tão legal. Então eu vou começar aqui no meu HTML adicionando uma div e dando-lhe uma classe de onda. Em seguida, dentro dele vou adicionar um H2 e dizer onda. Vou copiar este H2 e colá-lo novamente. E como você pode ver, temos apenas dois cabeçalhos ajustados um sobre o outro. Vamos ao nosso CSS e começar a estilizar. Então. Vou mirar na div de contêiner deles que tem a classe de onda. E eu vou adicionar posição relativa. Em seguida, largura de 500 pixels e altura 500 pixels. Então eu vou mirar o próprio título e adicionar posição absoluta para que ambos serão posicionados em relação aos recipientes de onda em cima um do outro. E para centralizá-los horizontalmente e verticalmente, adicionarei text-align, centro, altura da linha, 500 pixels. Então vamos aumentar a fonte adicionando o tamanho da fonte 170 pixels. Em seguida, finalmente, o texto transforma em maiúsculas. E agora você pode ver que nossos títulos são maiores e eles estão sentados em cima um do outro e centrados horizontal e verticalmente dentro do navegador. Vamos continuar. Vou voltar aqui e dizer t2 int criança um para atingir o primeiro título. Então, dentro disso, vou adicionar cor. Esta cor azul claro. Como você pode ver, nada mudou porque o segundo título está sentado em cima dele e cobrindo-o. Muito bem, vamos apontar este segundo rumo. Eu vou dizer h2 nth filho dois. E dentro dele, adicionarei cor a essa cor azul mais escura. E como podem ver, tem um fundo azul e cobre o primeiro título. Então, por exemplo, se cortarmos a parte superior do segundo título, veremos a parte superior da primeira abaixo dela. Então vamos fazer isso rapidamente. Eu vou para a cópia do site e eu vou apenas mover esses pontos até eu obter apenas a metade inferior visível. Então eu vou copiar o código e voltar para o segundo seletor de cabeçalho e adicionar isso. E como você pode ver, a parte superior do segundo título agora é cortada, e a metade superior que é visível aqui com esta cor azul mais clara. Na verdade, o primeiro título. Agora sabemos que o segundo título aparece no topo do primeiro. Tudo bem, vou remover essa linha de código do caminho do clipe. E agora temos o segundo título visível novamente. Em seguida, queremos criar a animação ondulada do segundo título. Então eu vou voltar para o meu CSS para criar uma nova animação. E eu vou chamá-lo de onda. Então, dentro dele, vou criar três estágios de animação. O primeiro está em 0%, então o segundo está em 50%. E o final está em 100%. Então eu vou voltar para o site Clippy. E como podem ver aqui, temos o que é chamado de polígono personalizado. E isso só nos permite criar qualquer forma que quisermos adicionando pontos. Então eu vou tentar criar uma forma ondulada como você pode ver adicionando alguns pontos e movê-los ao redor. Tudo bem, então isso parece bom. Vou copiar o código. Volte para o meu CSS e cole-o aqui a 0% da duração da animação. E aqui a 100%. Então eu vou voltar novamente para o site e tentei criar outra onda na outra direção. Então vou adicionar alguns pontos e tentar obter a forma ondulada. Então eu vou copiar o código e colá-lo aqui em 50% da duração da animação. Então o que vai acontecer, pessoal, é que o segundo título terá a forma da primeira onda. Em seguida, ele vai se animar para a segunda onda em 50%. Em seguida, ele vai voltar para a primeira onda novamente em 100%. E tudo isso vai acontecer sem problemas, dando-nos um bom efeito ondulado. Então eu vou subir aqui dentro do segundo título e adicionar animação. Acene. Dois segundos, facilidade dentro, fora. Então finalmente infinito. E como podem ver, o segundo título agora tem a forma da onda. E está animando desde a primeira forma. A segunda forma, dando-nos este belo efeito ondulado. E você pode ver que o primeiro título com a cor da luz azul é visível aqui abaixo do efeito da onda. Também podemos criar outro efeito legal, voltando para dentro do primeiro título e mudando a cor para transparente em vez de azul claro. Em seguida, abaixo disso, vou adicionar traçado de texto webkit para pixels e a mesma cor azul. E agora você pode ver a cor do primeiro cabeçalho agora é transparente. E temos um derrame em torno dele. E parece muito bom. 109. 113 - efeito de hover criativo usando a propriedade de cliquei: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este efeito agradável sobre a imagem usando a propriedade do caminho do clipe. Então vocês podem ver que temos três imagens aqui e elas estão divididas desta forma. E ao pairar sobre qualquer um deles, ele fica maior e ocupa todo o espaço do recipiente. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML, adicionando uma div e dando-lhe uma classe de recipiente. E então dentro disso, vou adicionar outra div e dar-lhe uma classe de cortada e outra classe de cortada. Em seguida, vou copiar essa classe, colá-la novamente duas vezes, e mudar o clipe um para Clipe 2. Depois o clipe três. Depois disso, vou para o meu CSS e direcionar a div recipiente. Então vou adicionar posição, largura relativa, 800 pixels, altura, 500 pixels. Então, finalmente, cor de fundo. Esta cor cinza escuro. Então agora você pode ver que temos este fundo cinza escuro. Então eu vou mirar a div com a classe de clipe. Então eu vou adicionar posição, absoluto, superior, 0, esquerda, 0, largura 100%, e altura 100%. Então, finalmente, transição ou 0,5 segundos. Então esta é uma classe geral que é aplicada a todos os três dibs. Nós apenas definir a largura e altura dos divs para largura total e altura do recipiente. Tudo bem, vamos começar a mirar cada div individualmente. Vou mirar a div com a classe do Clip 1. Então eu vou adicionar URL de fundo, primeira imagem, e você vai encontrar todas as imagens no arquivo de recursos. Em seguida, vou adicionar tamanho de fundo, capa, posição de fundo, centro. E agora você pode ver que temos esta primeira imagem de fundo aqui, e está ocupando toda a largura e altura da div recipiente. Então eu vou copiar esta div, colá-la novamente, segmentar a segunda div, e usar minha segunda imagem como fundo. Então vou colá-lo novamente. Segmente a terceira div desta vez e use a terceira imagem. E agora você pode ver que as imagens estão sentadas uma em cima da outra. Então esta imagem aqui é a terceira, e está sentada em cima das outras duas. Tudo bem, vamos agora cortar as imagens para que elas tenham a forma que queremos. Vou ao site do Clippy e começaremos com a terceira imagem. Queremos que a parte certa da terceira imagem apareça. Então posso mover esses pontos até ter a forma que quero. Digamos que esta forma. Então vou copiar o código. Volte para o meu CSS e cole-o na terceira div. E agora você pode ver que a terceira div é cortada e só esta parte aqui do lado direito é visível. Certo, vamos trabalhar no segundo para o local e mover os pontos até eu ter uma forma no centro. Então vou brincar até chegar onde quero. Tudo bem, vou copiar o código agora. Cole novamente na segunda div. E agora você pode ver que também é cortado e a parte do meio é visível. Vamos cortar rapidamente a primeira div. Então eu vou voltar para o site e eu quero que o lado esquerdo apareça. Então eu vou mover os pontos ao redor até eu ter a forma que eu quero. Então, novamente, vou copiar o código e adicionado dentro da primeira div. E assim, você pode ver que a primeira div também é cortada e a parte do lado esquerdo é visível. Muito bem, agora queremos trabalhar no efeito de pairar. Primeiro de tudo, eu vou direto aqui e dizer, quando pairando sobre o recipiente, eu quero fazer algumas mudanças aconteceram com todos os três divs. Então eu vou mirar o clipe div. Então o que eu quero fazer é esconder todas as partes dos clipes ao passar o mouse sobre o recipiente. Então eu vou para o site Clippy e vou arrastar todos os pontos para a direita para que eles fiquem escondidos. Vou copiar o código, voltar ao editor de código e colá-lo aqui. E agora, quando eu passar o mouse sobre o recipiente, você pode ver todos os divs encolhem até que eles desapareçam. Mas não queremos isso. Queremos que a imagem que passamos o mouse para expandir até que ela ocupe toda a largura e altura. Então é isso que vamos fazer a seguir. Eu vou aqui e dizer, quando pairar sobre o clipe div. E como queremos que as imagens se expandam para a largura total, voltarei para o site Clippy e moverei os pontos até obter a largura total e a altura visíveis. Então eu vou copiar o código, voltar novamente e colá-lo aqui. Então este bloco de código significa que, ao passar o mouse sobre qualquer uma das três imagens, isso se expande até ocupar toda a largura e altura. Então vamos ao navegador e tentar isso. Você pode ver que quando eu passar o mouse sobre qualquer imagem, ela se expande e ocupa todo o espaço, cobrindo as outras imagens. E esse é o efeito que queremos. 110. 114 - efeito criativo popup usando a propriedade de clipe em CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este efeito de pairar pop-up agradável. Você pode ver que temos um pequeno círculo aqui. E quando passamos o mouse sobre ele, essa div aparece e contém um cabeçalho e um parágrafo. Então a idéia por trás desse efeito é muito simples. Criaremos nossa div, então mostraremos apenas o pequeno círculo à direita e esconderemos o resto da div. Então, ao passar o mouse sobre ele, vamos mostrar toda a div. Tudo bem, vamos começar a fazer isso. Aqui no meu HTML, vou adicionar um div, dar-lhe uma classe de cartão. Então dentro vou adicionar um H um e dizer informações. Então vou adicionar um parágrafo e adicionar algum texto aleatório aqui. Então eu vou para o meu CSS para começar a trabalhar neles. Vou mirar a div com a classe do cartão. Então eu vou definir sua largura para 500 pixels e sua altura para 250 pixels. Então eu vou definir sua cor de fundo para esta cor azul claro agradável. Em seguida, adicionarei preenchimento, 20 pixels do topo e 80 pixels da direita, 20 pixels e 20 pixels da parte inferior e esquerda. Em seguida, vou adicionar o raio da borda 10 pixels para tornar os cantos um pouco arredondados. Então, finalmente, transição ou 0,5 segundos. E agora você pode ver que tivemos este cartão div e ele contém um cabeçalho e um parágrafo. Tudo bem, vamos continuar. Vou mirar no H1. Em seguida, adicione margem, 20 pixels abaixo. Em seguida, vou direcionar o parágrafo e definir seu tamanho de fonte para 18 pixels. Tudo bem, isso parece melhor. Agora, vamos trabalhar para cortar esta div no pequeno círculo que fica no canto superior direito. Vou ao site do Clippy. Então escolherei a forma do círculo aqui embaixo. Então eu vou fazer este círculo menor e tentar posicioná-lo no canto superior direito. Ok, isso parece bom. Vou copiar este código CSS. Volte para o meu CSS e cole-o na div cartão. E como podem ver, agora temos este pequeno círculo sentado aqui, e o resto do cartão está agora escondido. Tudo bem, ao passar o mouse sobre o cartão, queremos redimensionar o cartão de volta para seu tamanho completo. Então eu vou voltar para o site Clippy, escolher a forma do círculo novamente. E aumentarei o tamanho do círculo até mostrar o tamanho total da div. Então eu vou copiar esse código. Volte para o meu CSS e diga, ao passar o mouse sobre o cartão, vou colar este código. E agora, quando eu voltar e passar o mouse sobre o pequeno círculo, você pode ver que ele retorna ao seu tamanho completo, mostrando o cabeçalho e o parágrafo. E tudo isso acontece sem problemas porque adicionamos uma transição de 0,5 segundos aqui. Tudo bem, pessoal, então é isso para este efeito. Foi muito simples, mas parece bom. 111. 115 - efeito de texto branco ao preto usando CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este belo efeito de focagem de texto usando a propriedade de caminho de clipe. Você pode ver aqui nós temos este texto onde metade é a palavra branco e a outra metade é a palavra preto. E quando passamos o mouse sobre a parte preta, a palavra preta cheia aparece e a palavra branca fica menor até desaparecer. E o mesmo acontece ao pairar sobre a palavra branca. Ele aparece completamente enquanto a palavra preta desaparece. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de Maine. Em seguida, dentro dele vou adicionar um H1 e adicionar a palavra preto dentro dele. Em seguida, outro abaixo disso, e adicione a palavra branco. Então eu vou para o meu CSS para segmentar a div principal e adicionar posição, relativa e largura 800 pixels. Então eu vou mirar o H1, adicionar posição, absoluto, top 50 por cento, esquerda, 50% também. Em seguida, transforme, traduza 50 por cento negativos e 50 por cento negativos. Em seguida, adicionarei margem 0, preenchimento 0 e largura. 100%. Alinhamento de texto, centro, tamanho da fonte, 220 pixels. E, finalmente, transformação de texto, maiúsculas. E agora você pode ver que as duas palavras estão sentadas uma em cima da outra. Muito bem, vamos continuar a trabalhar. Eu vou aqui e mirarei no segundo que tem a palavra branco dentro dele. Então eu vou dizer H1 enésimo filho dois. Então vou adicionar cor branca, depois transição 0,5 segundos. Agora você pode ver que a palavra branco está sentado em cima da palavra preto. E queremos tornar apenas metade visível. Então vamos para o site Clippy. Em seguida, escolha a forma trapezoidal. Mova os pontos até eu ter a forma que quero mostrar para a palavra branca. Então copie o código. Volte e cole-o dentro do seletor para a palavra branco. E agora você pode ver que a palavra branco está agora dividida. E esta é a única parte que é visível enquanto a outra parte está escondida. Mas como você pode ver, a palavra preto é visível atrás da palavra branco, e nós não queremos isso. Então o que podemos fazer é adicionar cores de fundo semelhantes à cor de fundo do corpo. E esconderá a parte que é visível. Então eu vou voltar e fazer isso. Eu vou aqui e adicionar cor de fundo. Esta cor. É da mesma cor que o fundo do corpo. E agora você pode ver que esta cor de fundo é aplicada e temos a forma exata que queremos. Muito bem, vamos trabalhar no efeito de pairar sobre a palavra branco. Queremos que ele ocupe o tamanho completo e cubra a palavra preto. Então eu vou dizer H um enésimo filho para. E quando pairar sobre isso, eu vou voltar para o site Clippy e eu vou fazer a palavra branco voltar para o seu tamanho real. Então eu vou mover os pontos até eu ter o tamanho total da nave. E então eu vou copiar o código, voltar e colá-lo. E agora você pode ver quando eu passar o mouse sobre a palavra branco, ela fica maior e retorna ao seu tamanho real, cobrindo a palavra preto. Tudo bem, agora queremos fazer o mesmo com a palavra preto. Ao pairar sobre ele. Queremos que ele fique maior e retorne ao seu tamanho completo, cobrindo a palavra branco. Então eu vou selecionar o primeiro cabeçalho que tem a palavra branco adicionando um, enésimo filho um. E quando pairando sobre isso, eu quero fazer algumas mudanças aconteceram com aquele que se senta diretamente ao lado dele. Então esta linha de código aqui só significa que quando eu passar o mouse sobre a palavra branco, eu vou fazer mudanças aconteceram com a palavra preto. Então este seletor aqui apenas tem como alvo o elemento H1 que fica diretamente após este elemento. Então eu vou voltar para o site Clippy e eu quero fazer o cabeçalho branco encolher até que ele desapareça para que o elemento preto pode aparecer e se tornar seu tamanho completo. Então eu vou mover a dança até eu ter a forma que eu quero, que não é basicamente forma. Então eu vou voltar para o meu CSS e adicionar este código aqui. Então isso só significa que quando eu passar o mouse sobre o primeiro H1, que é a palavra preto, o segundo vai encolher até que ele desapareça. E isso nos dará o efeito que queremos. E agora, quando eu passar o mouse sobre a palavra preto, você pode ver a palavra branca encolhe até que ela desapareça e faça a palavra preta ir para seu tamanho completo, dando-nos o efeito que queremos. 112. 116 - imagem para circular de hover usando a propriedade de clip em CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este efeito de pairar cartão usando a propriedade clipe CSS. Você pode ver que temos essa imagem e, ao pairar sobre ela, ela encolhe até que se torne um pequeno círculo. E temos algum conteúdo aqui que aparece abaixo da imagem. Então temos h1, h2, ou um parágrafo e uma tag âncora. Vamos criar este efeito legal usando V clip-path propriedade. Então vamos fazer isso. Eu vou aqui no meu HTML e adicionar um div, dar-lhe uma classe de cartão. Então, abaixo disso, adicionarei outra div. Dê-lhe uma aula. Então esta seria a div que contém a nossa imagem. Então adicionarei nossa imagem dentro dela. Então, abaixo dessa div, vou adicionar outra. Dê a ele uma classe de conteúdo. Então, dentro disso, vou adicionar um H2 e dizer título. Em seguida, um parágrafo depois disso. E eu vou adicionar um pouco de texto manequim Lorem Ipsum. E, finalmente, vou adicionar uma etiqueta âncora e dizer ler mais. Tudo bem, eu vou para o meu CSS para estilizar isso. Vou mirar a div com a classe do cartão. Então vou adicionar posição, largura relativa, 335 pixels, altura, 500 pixels. Então, depois disso, vou direcionar a div com a classe de imagem e adicionar posição absoluta, topo 0, esquerda 0 também. Então queremos que ele ocupe toda a largura e altura do cartão. Então vamos adicionar largura 100% e altura 100% também. Então, finalmente, vamos adicionar transição ou 0,5 segundos. Tudo bem, vamos continuar. Vou direcionar a imagem em si que fica dentro de nossa div e adicionar largura 100%. E agora você pode ver que a imagem tem a mesma largura que seu contêiner. Agora, queremos que a imagem encolha e se torne um pequeno círculo ao passar o mouse sobre ela. Então vamos fazer isso. Eu vou dizer ao passar o mouse sobre o div que tem a classe de cartão, Eu quero fazer algumas alterações na div com a classe de imagem. E eu vou ao site Clippy para criar a forma do círculo que queremos. Vou tentar criar o tamanho exato do círculo que eu quero na posição exata que eu quero. Então eu copiarei o código. Volta outra vez e cola-o aqui. Então eu vou voltar novamente para o site Clippy e eu vou fazer este círculo ocupar o tamanho completo para que possamos mostrar o tamanho completo do elemento. Então eu vou copiar o código novamente. Volte e vá aqui dentro da div de imagem, e cole o código aqui dentro da div com a classe de imagem. Então, o que isso fará é quando passarmos o mouse sobre o cartão, a div com a classe de imagem mudará a partir desta propriedade de caminho de clipe para esta propriedade de caminho de clipe onde será um círculo menor. E agora você pode ver quando eu passar o mouse sobre o cartão, a imagem encolhe até ficar menor. E ao passar o mouse para longe, ele volta para cobrir todo o tamanho do cartão. Muito bem, vamos voltar e continuar a trabalhar. Trabalharemos no conteúdo. Então eu vou segmentar a div com a classe de conteúdo. E vou adicionar posição absoluta, esquerda, 0, inferior 50 pixels porque queremos posicionar o texto acima da borda inferior em 50 pixels. Em seguida, para alinhar o texto no centro, vou adicionar texto align center. Agora você pode ver o conteúdo está localizado na parte inferior da div cartão. Vamos continuar. Vou mirar no H2. Então vou adicionar preenchimento e margem 0 também. Em seguida, vou adicionar texto transformar, maiúsculas. Em seguida, vou segmentar o parágrafo e adicionar margem inferior 25 pixels. Em seguida, o tamanho da fonte, 16 pixels e a transformação do texto. Capitalizar. Então eu vou apontar a etiqueta âncora. Adicionar exibição, bloco inline-. Decoração de texto. Nenhum. Cor de fundo, cor preta, branco. Preenchimento, cinco pixels da parte superior e inferior, e dez pixels da esquerda e da direita. Então, finalmente, vou adicionar texto transformar capitalize. Certo, agora temos o estilo do conteúdo do jeito que queremos. Vamos continuar. Queremos que esse conteúdo fique oculto e apareça somente quando passarmos o mouse sobre o cartão. Então eu vou aqui e mirar o H2, o parágrafo, e a etiqueta âncora. Em seguida, vou adicionar opacidade 0, em seguida, transição 0.3 segundos. E eu vou adicionar transformar traduzir Y 20 pixels. Definimos o Traduzir Y para 20 pixels aqui porque queremos que esses elementos se movam da parte inferior para sua posição original enquanto desaparecem. Quando passarmos o mouse sobre o cartão, será um efeito mais agradável do que apenas falhar. Então, finalmente, ao passar o mouse sobre o cartão, queremos que esses elementos apareçam novamente e desapareçam bem. Então eu vou dizer quando passarmos o mouse sobre o cartão, eu vou fazer algumas alterações no H2. Então eu vou copiar isso, colá-lo, e direcionar o parágrafo desta vez. Então eu também vou apontar a etiqueta âncora. Então, dentro disso, adicionarei uma opacidade novamente para que esses elementos apareçam novamente ao pairar. Em seguida, Transformar, Traduzir Y 0 para que eles se movam da parte inferior para sua posição original. E finalmente, atraso de transição 0,5 segundos. E agora, quando eu voltar e passar o mouse sobre a imagem, você pode ver que ela encolhe para se tornar um círculo. E o conteúdo aqui desaparece bem enquanto se move de baixo para sua posição, dando-nos este efeito realmente legal. 113. 117 - efeito de hover criativo usando o caminho de clip CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição, vamos criar este efeito agradável sobre a imagem usando a propriedade do caminho do clipe. Você pode ver quando eu passar o mouse sobre a imagem, ela encolhe do canto inferior esquerdo para o canto superior direito. E temos este texto que aparece abaixo dele. E este texto contém um H2, um parágrafo e um link. Então vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando um div e dando-lhe uma classe de cartão. Então, dentro dele, adicionarei outro com a classe de conteúdo. E dentro desta div conteúdo, vou adicionar um H2 e dizer imagem efeito hover. Então vou adicionar um parágrafo e adicionar algum texto Lorem Ipsum. Então, finalmente, vou adicionar uma tag âncora e dizer ler mais. Então eu vou para o meu CSS alvo a div com a classe de cartão. Quando eu adicionarei a largura relativa da posição, 400 pixels, altura, 400 pixels também. E finalmente, cor de fundo, preto. Então aqui você pode ver que temos um fundo preto com uma largura e uma altura de 400 pixels sentados no navegador. Tudo bem, vamos continuar e vamos voltar aqui e direcionar div com a classe de conteúdo. Então eu vou adicionar posição, largura absoluta, 60 por cento, Top, 50 por cento, esquerda, 50 por cento também. Então, a fim de centralizar o conteúdo, vou adicionar transformar, traduzir, 50 por cento negativos e 50 por cento negativos. Então eu vou adicionar cor, branco. E, finalmente, o centro de alinhamento de texto. E agora você pode ver o conteúdo div está centrado dentro do cartão. Vamos continuar trabalhando e vamos voltar para o meu CSS e direcionar o H2. Em seguida, vou adicionar margem, fundo 20 pixels e texto transformar. Capitalizar. Eu também vou direcionar o parágrafo. Adicione margem inferior 30 pixels. E transformação de texto. Capitalizar. Então eu vou apontar a etiqueta âncora. Adicionar exibição. Bloqueio interno, preenchimento, 10 pixels da parte superior e inferior, e dez pixels da esquerda e da direita. Depois, fronteira. Um pixel. Branco sólido. Decoração de texto, nenhum. Cor. Branco. Transição 0,5 segundos. Então, finalmente, o texto se transforma. Capitalizar. Certo, agora, ao passar o mouse sobre o link, queremos mudar a cor para preto e adicionar um fundo branco. Então vamos fazer isso. Eu vou aqui e dizer quando passar o mouse sobre o link, vou mudar sua cor para preto. E eu vou adicionar cor de fundo branco. E agora, quando eu passar o mouse sobre o link, temos esse efeito em que a cor de fundo muda para branco e a cor do texto muda para preto. Agora, vamos adicionar a imagem que fica em cima do conteúdo. Vou voltar ao meu HTML, ir aqui abaixo da div de conteúdo, e adicionar uma tag de imagem. Então vou adicionar a nossa imagem. Você vai encontrá-lo nos recursos para esta lição. Como podem ver, esta imagem está por todo o lado. Vamos voltar ao CSS e corrigir isso. Eu vou mirá-lo. Em seguida, adicione posição, absoluto , superior, 0, esquerda 0 também. Largura 100% e altura 100%. Quando um objeto caber coberto. E finalmente, transição 0,5 segundos. Então agora você pode ver que nossa imagem está agora sentada em cima do conteúdo e encobrindo-o. Agora queremos criar um efeito de pairar. Então, ao passar o mouse sobre a imagem, queríamos encolher do canto inferior esquerdo até o canto superior direito. Então eu vou aqui e dizer quando pairar sobre a imagem. Então irei ao site Clippy e escolherei a forma trapezoidal. Então eu vou mover este ponto aqui do canto inferior esquerdo para o canto superior direito. Em seguida, copie o código e volte para o meu CSS e cole-o. Então eu vou voltar para o site Clippy e fazer a imagem voltar para o seu tamanho real. Novamente. Copie o código, volte ao meu CSS e cole-o aqui dentro da tag de imagem. Então isso apenas dirá ao navegador que, ao passar o mouse sobre a imagem, queremos que ela mude deste tamanho completo para este tamanho, onde ficará completamente escondido, movendo-se do canto inferior esquerdo para o canto superior direito. Então, quando eu passar o mouse sobre a imagem, você pode ver que ela tem exatamente o mesmo efeito que queremos. Ele encolhe do canto inferior esquerdo para o canto superior direito. E, na verdade, podemos mudar isso muito facilmente. Por exemplo, digamos que queremos encolher do canto superior esquerdo para o canto inferior direito. Podemos fazer isso facilmente, voltando para o site Clippy. E eu vou mover este ponto aqui do canto superior esquerdo para o canto inferior direito. Então vou copiar o código. Volte para o seletor de imagem e cole-o aqui ao passar o mouse sobre a imagem. E agora, quando eu passar o mouse sobre a imagem, você pode ver que ela encolhe do canto superior esquerdo para o canto inferior direito, dando-nos este efeito legal. 114. 118 - efeito de split para menu criativo usando a propriedade de clipe CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar este cool e, em seguida, você efeito usando a propriedade de caminho de clipe. Você pode ver quando eu passar o mouse sobre os links no menu, este efeito acontece onde temos uma linha horizontal que se move através dos links em espécie de divide-os em duas metades, a metade superior e a metade inferior. E você pode ver a metade superior se move um pouco para o lado superior direito e a metade inferior se move para o lado inferior esquerdo. Então vamos começar a criar esse efeito. Eu vou aqui e adicionar uma UL então, e então uma etiqueta âncora dentro dela. E eu vou dizer para casa. Então eu vou aqui e adicionar dados, texto e dizer casa também. Você descobrirá mais tarde por que adicionamos o atributo de texto de dados aqui. Em seguida, vou copiar este item da lista, colá-lo novamente quatro vezes. E dizer sobre os serviços, equipe e contato. Tudo bem, eu vou para o meu CSS e apontar para a UL. Em seguida, adicionarei margem 0, preenchimento 0 também. Então eu vou mirar o LI e adicionar posição. Relativo, estilo de lista, nenhum. E, finalmente, margem, dez pixels da parte superior e inferior e 0 pixels da esquerda e da direita. Tudo bem, vou apontar a etiqueta âncora e adicionar posição relativa. Em seguida, exibir bloco, texto, alinhar, centro, margem, 0. Preenchimento, cinco pixels da parte superior e inferior, e dez pixels da esquerda e da direita. Então eu vou adicionar transformação de texto. Maiúsculas, transição, 0,5 segundos. Tamanho da fonte, 16 pixels, peso da fonte, 900. E finalmente, decoração de texto. Nenhum. E agora você pode ver que os links estão exatamente do jeito que queremos. Em seguida, queremos dividir os links em duas metades para que quando a linha passa por eles. O efeito de divisão acontecerá, e faremos isso usando a propriedade de caminho de clipe. Então, primeiro, vou direcionar o pseudo elemento antes da tag âncora e adicionar conteúdo, um texto de dados TTR. Então o que isso vai fazer é pegar o texto que temos no atributo de texto de dados e colocá-lo no conteúdo do pseudo elemento antes de cada link. Assim, o elemento pseudo antes do primeiro link terá um conteúdo de casa. O segundo link terá um conteúdo de cerca de, e assim por diante. Tudo bem, em seguida, queremos que este conteúdo fique perfeitamente em cima do texto original do link. Então eu vou adicionar posição, absoluto, superior, 0, esquerda, 0, largura 100%. Em seguida, adicionarei preenchimento, cinco pixels de cima e de baixo, e 0 pixels da esquerda e da direita. Então eu vou adicionar cor. Esta caixa de cor cinza escuro dimensionando a transição border-box, 0,5 segundos. Então agora você pode ver os pseudo elementos anteriores estão perfeitamente em cima dos links e eles têm essa cor cinza escuro. Tudo bem, agora o pseudo elemento antes será a metade superior. Então vamos para o site Clippy e criar o código responsável por isso. Então eu vou escolher a forma trapezoidal e mover os pontos até que eles representem exatamente a metade superior. Em seguida, vou copiar o código de volta para o elemento pseudo antes e colá-lo. Então agora você pode ver a metade superior do pseudo elemento antes é visível enquanto a parte inferior está oculta. Vamos realmente voltar e tornar a cor dos links transparente. Vou entrar no seletor de links e adicionar cor. Transparente. E agora você pode vê-lo claramente, a metade superior é visível e a parte inferior está escondida. Tudo bem, vamos fazer o mesmo para o pseudo elemento depois. A única diferença é que vamos esconder a metade superior e mostrar a parte inferior. Então eu vou copiar o pseudo elemento antes, colá-lo novamente. E a única coisa que mudará é a propriedade do caminho do clipe. Então eu vou voltar para o site Clippy e eu vou mover os pontos para mirar a metade inferior, não a de cima. Então eu vou copiar o código, voltar e colá-lo dentro do pseudo elemento após. E agora você pode ver o pseudo elemento depois está aparecendo na metade inferior. Tudo bem? Ao passar o mouse sobre os links, queremos que o pseudo elemento antes se mova para o canto superior direito e o depois pseudo elemento para mover para o canto inferior esquerdo. Então vamos fazer isso. Eu vou dizer ao passar o mouse sobre a tag âncora, vou fazer algumas alterações no pseudo elemento antes, que é a meia hora superior, mudar a cor para esta cor vermelha. E eu vou adicionar transformar, traduzir 10 pixels. Então ele irá mover dez pixels para a direita ao longo do eixo x, os 3 pixels negativos. Assim, ele será deslocado para o topo por três pixels. Então vou copiar isso de novo. E altere isso para 10 pixels negativos e 3 pixels positivos. E agora, quando eu passar o mouse sobre qualquer link, você pode ver a metade superior e a metade inferior estão se movendo e nos dando nosso efeito de divisão legal e também suas mudanças de cor. Para ler. A única coisa resta agora é a linha horizontal que passa pelos links e os divide. Vamos criar que usando o elemento pseudo antes dos itens da lista. Então eu vou mirá-lo. Em seguida, dentro que eu vou conteúdo cordas vazias. Posição, absoluta. Então, a fim de centralizá-lo verticalmente, eu vou adicionar 50 por cento top. Em seguida, Transformar, Traduzir Y negativo 50%. Em seguida, queremos que ele ocupe toda a largura do item da lista. Então vamos adicionar largura, 100%. Em seguida, altura, apenas um pixel. E cor de fundo. Esta cor cinza escuro. Então queremos que ele venha do lado esquerdo para o lado direito. Então eu vou adicionar esquerda negativo 100%. E, finalmente, a transição de 0,5 segundos. E agora você pode ver que temos essa linha fina que fica no lado esquerdo dos itens da lista. E quando passarmos o mouse sobre os itens da lista, queremos que essa linha se mova para a direita através dos links. Então eu vou dizer ao passar o mouse sobre os itens da lista, eu quero fazer algumas alterações para o elemento pseudo antes. Vou definir a propriedade esquerda para 100% em vez de 100% negativo. E agora, quando eu passar o mouse sobre os links, você pode ver a linha se move através dos links, dando-nos este efeito de divisão legal. Vamos voltar e esconder a linha fora do link. Voltarei aqui dentro do item da lista e adicionarei overflow oculto. Nós também queríamos dividir o efeito para ter algum atraso e acontecer um pouco depois que as linhas começam a se mover. Então eu vou entrar na metade superior e adicionar atraso de transição 0,25 segundos. E eu vou fazer o mesmo para a metade inferior também. E agora você pode ver que a linha horizontal está agora escondida. E quando passamos o mouse sobre o link, a linha se move e cospe, dando-nos o efeito exato que queremos. 115. 119 - efeito de hover creative botão para botão de treta em CSS: Olá a todos, bem-vindos a esta nova lição no curso. Nesta lição vamos criar outro efeito de botão usando a propriedade de caminho de clipe. Você pode ver que este botão é dividido desta forma em duas partes, uma parte branca e uma parte roxa. E ao passar o mouse sobre a parte branca, a cor de fundo do botão se expande e fica branca. E da mesma forma, ao passar o mouse sobre a parte roxa, ela também se expande e o fundo do botão torna-se roxo. Então vamos criar esse efeito. Vou começar aqui no meu HTML adicionando uma tag âncora. Então, dentro disso, vou adicionar um span e dizer botão. Em seguida, outra extensão abaixo disso. E diga botão também. Tudo bem, então eu vou para o meu CSS e alvo a tag âncora. Em seguida, adicione posição, largura relativa, 180 pixels, altura 60 pixels. Então eu vou direcionar os vãos dentro do link e adicionar posição absoluta para que possamos posicioná-lo em relação à tag âncora. Em seguida, vamos adicionar top 0, esquerda 0 também. Largura, 100%, altura, 100% também. Assim, as duas rodadas terão a mesma largura e altura que o link. Então vou adicionar cor, branco, cor de fundo, esta cor roxa. Então vamos centralizar o texto. Vou adicionar text-align, centro e linha altura, 60 pixels. Em seguida, vou adicionar texto transformar, letras maiúsculas espaçamento para pixels. Então, finalmente, tamanho da fonte, 22 pixels. E agora você pode ver os dois vãos sentados um acima do outro e estão ocupando toda a largura e altura da etiqueta âncora. Tudo bem, agora eu quero atingir o segundo intervalo. Então eu vou dizer span enth filho para atingir o segundo período. Então, dentro disso, vou mudar a cor de fundo para branco e a cor para a nossa cor roxa. Então eu adicionarei a transição 0,5 segundos. Então agora você pode ver que a segunda extensão tem um fundo branco e a cor do texto é roxo. Mas abaixo que fica a primeira extensão com o fundo roxo e texto branco. E a razão pela qual o segundo span está aparecendo no topo do primeiro é simplesmente porque veio depois do primeiro na marcação HTML. Mas se cortarmos essa parte específica do segundo período, a primeira aparecerá abaixo dela, e é isso que farei a seguir. Vou para o site Clippy e vou escolher a forma do ponto esquerdo desta vez. Então eu vou mover os pontos até eu ter a forma que eu quero. Então vamos tentar fazer com que mostre metade do espaço. Então vou copiar o código. Volte para o meu CSS e cole-o. E agora você pode ver que apenas esta parte à direita é visível na segunda extensão enquanto a parte esquerda foi cortada. E é por isso que a primeira banda agora está aparecendo abaixo dela. Muito bem, agora, ao pairar sobre a segunda extensão, que é a parte branca, queremos que ela fique maior novamente e ocupe o tamanho total do link. Então eu vou aqui e dizer span nth criança também, para atingir o segundo período. E ao passar o mouse sobre isso, eu quero exibir o tamanho total do segundo intervalo. Então eu vou voltar para o site Clippy e eu vou mover os pontos para a esquerda até que ele exibe o tamanho total do elemento. Então eu vou copiar o código, voltar e colá-lo aqui dentro sobre o segundo intervalo. E agora, quando eu voltar e passar o mouse sobre a parte branca, você pode ver que ela se expande para a esquerda e ocupa o tamanho total do link. Assim, seu tamanho muda do primeiro caso em que a parte direita é visível apenas para o segundo caso onde seu tamanho completo é visível. Muito bem, agora, ao pairar sobre a parte roxa, queremos que a parte branca encolha e desapareça para que a primeira extensão ou a parte roxa apareça completamente. Então vamos fazer isso. Eu vou aqui dizer “span nth child”. Um para atingir o fundo roxo. E ao passar o mouse sobre isso, queremos fazer algumas mudanças acontecerem na extensão que vem diretamente depois dela, que é o fundo branco. Então eu vou voltar para o site Clippy e eu vou mover todos os pontos para a direita para que o fundo branco vai encolher e desaparecer completamente. Então eu vou copiar este código, voltar e colado aqui. E agora, quando eu passar o mouse sobre a parte roxa, você pode ver a parte branca encolhe completamente para a direita, permitindo que a parte roxa apareça novamente. E ao pairar sobre a parte branca, ela cresce para a esquerda até ocupar o tamanho total do link. E que todos são o efeito exato que queremos. 116. Efeitos de javascript: Muitos de vocês me pediram para criar algumas aulas de efeitos de Javascript. Então, aqui estamos nesta seção, onde aprenderemos como usar animações Javascript e CSS juntas para criar alguns efeitos realmente interessantes que são impossíveis de criar usando apenas CSS Então, aqui estão os exemplos que vamos criar juntos. 117. Efeito de animação de texto colorido: Olá a todos. Bem-vindo a outra nova lição do curso. Nesta lição em particular, vamos criar esse efeito de foco de texto muito legal Você pode ver que quando passamos o mouse sobre esse texto, esse efeito acontece, como você pode ver, o texto brilha da esquerda para a direita e todas as letras têm cores diferentes Quando nos afastamos, esse efeito de iluminação desaparece. Criaremos esse efeito usando HTML, CSS e uma pequena ajuda do Javascript. Vamos começar a criar esse efeito. Vou entrar no meu HTML e adicionar um H dois, dar a ele uma classe de texto. Então, dentro dele, adicionarei texto em Javascript. Então eu vou para o meu CSS e tenho como alvo o corpo. Adicione exibição, flexione, justifique o conteúdo, centralize uma linha, centro de itens, altura mínima, fundo de 100 VH, essa cor cinza escuro Então, abaixo disso, vou direcionar o H dois e adicionar a posição relativa ao tamanho da fonte três. E M, espaçamento entre letras, 0,05 M. O texto padrão do cursor transforma maiúsculas e, finalmente , a espessura da fonte 500 Agora você pode ver que o H two parece muito melhor. Ok, agora vamos para o arquivo Javascript. O que queremos fazer com todos é agrupar cada letra do texto H dois em um espaço separado. A letra J será embrulhada em um espaço, depois a letra a, depois a letra e assim por diante. Em seguida, começaremos a estilizar esses vãos. Faremos isso usando Javascript. Vamos fazer isso e espero que você entenda o que quero dizer. Vou começar aqui selecionando o H dois e armazenando-o em uma variável. Vou criar uma variável, chamá-la de texto e dizer seletor de consulta de documento e direcionar o H dois que tem uma classe de texto Agora vamos começar a embrulhar cada letra em um espaço. Vou criar um novo nome de variável que ela abrange. Em seguida, definirei isso como igual ao texto no texto. O que o método innertext fará é extrair o texto dentro do H dois apenas para ver o que estamos fazendo Passo a passo, vou aqui e adicionarei extensões de registro do console. Agora, quando abrimos o console, você pode ver que imprimimos texto em Javascript, que é o texto dentro do H dois. Ok, agora queremos recuperar cada letra individualmente para que possamos envolvê-la em um intervalo E podemos fazer isso usando a função split. Vou aqui e adicionarei split, e adicionarei uma string vazia dentro dela A propriedade split é usada em strings para dividi-las e retorna em uma matriz que contém a palavra ou letras divididas, e as strings vazias aqui são o Por exemplo, se adicionarmos um espaço aqui dentro das strings vazias, você pode ver que nossa string está dividida em duas palavras no espaço aqui Mas como queremos todas as letras separadas, removeremos esse espaço aqui. Agora você pode ver que temos uma grande matriz que contém todas as letras como elementos da matriz. Tudo bem, agora queremos passar por cima dessas letras na matriz e começar a envolvê-las em espaços E faremos isso usando o método map. Vou aqui e adicionarei o mapa aqui como o primeiro parâmetro, adicionarei a letra no segundo parâmetro, adicionarei para o índice. O método map é basicamente um método que percorre a matriz, cria uma nova matriz com base na chamada uma função em cada elemento da matriz original O primeiro parâmetro aqui são os elementos da matriz. Em nosso exemplo, a letra aqui serão as letras dentro de nossa matriz de extensões Aqui está o índice do elemento. Para a primeira iteração do loop, a letra aqui será a letra J e I será zero Então, para a segunda iteração do loop, a letra será a segunda letra a e o índice será um E assim por diante e assim por diante. Em seguida, criarei a função do método map dentro dela. Eu vou dizer, volte. Em seguida, abrirei um modelo literal, adicionarei uma tag de extensão fecharei a tag de extensão dentro dela Vamos adicionar cada letra. Faremos isso adicionando o sinal de $1 e, em seguida, a letra dentro dos colchetes. O que acontecerá aqui todo mundo é que o método map percorrerá a matriz de letras, adicionará cada letra dentro de um intervalo retornará uma nova matriz a partir disso. Assim como você vê aqui, temos essa grande matriz e cada elemento é uma tag de extensão com uma letra dentro dela. Tudo bem, agora para finalizar isso, queremos extrair todos os elementos da matriz e convertê-los volta em uma string normal para injetá-los facilmente em nosso HTML E podemos fazer isso facilmente usando o método join. Vou aqui e adicionarei junção e, em seguida, cadeias vazias como separador Agora, se você observar a variável spans no console, poderá ver que elas são exibidas como uma string E agora podemos inseri-los facilmente dentro do cabeçalho HTML acessando aqui e adicionando texto innerHTML igual Agora, pessoal, quando inspecionamos o H dois, vocês podem ver que agora ele tem todos esses vãos Cada letra é embrulhada em um espaço. Agora vamos ao nosso CSS e selecionar as extensões dentro do H dois e adicionar cor Essa cor cinza mais clara, então faça a transição de 0,25 segundos. Então, abaixo disso, direi que ao passar o mouse sobre o H dois, vou direcionar a extensão e adicionar cor, essa cor verde clara Então, para obter o efeito de brilho, adicionarei sombra de texto, esse valor Agora, quando eu passo o mouse sobre o H dois, você pode ver que temos esse belo efeito de brilho Agora, queremos adicionar algum atraso de transição às letras. Vamos voltar ao Javascript. Acesse aqui dentro do intervalo e adicione um atraso na transição de estilo. Em seguida, usaremos literais de modelo para inserir algum código. Em seguida, adicione I vezes 40, depois milissegundos. Usamos o índice aqui para tornar o atraso de transição exclusivo. Para cada intervalo, será zero vezes 40 milissegundos para a primeira letra, uma vez 40, depois duas vezes 40 e assim por diante Agora, quando passamos o mouse sobre o H dois, você pode ver as letras brilharem uma após a outra Também vamos alterar a cor de cada letra usando a propriedade CSS do filtro. Vou aqui e adicionarei a rotação do filtro I vezes 30 graus. Isso fará com que cada extensão tenha uma cor diferente. Assim como você pode ver aqui. Todas as letras agora têm cores frias diferentes. Com isso pessoal, temos esse efeito muito legal e brilhante. 118. Menu de navegação usando javascript: Olá a todos. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse efeito de alternância do menu circular Você pode ver que quando eu clico nesse botão de alternância, esses seis links circulares aparecem Você pode ver que eles estão colocados ao redor do botão de alternância e, ao clicar novamente, eles voltam e se escondem atrás do botão de alternância Usaremos o script Java para criar esse efeito. Vou começar aqui no meu HTML adicionando um di e dando a ele uma classe de contêiner. Então, dentro dele, adicionarei outro div e atribuirei a ele uma classe de alternância Esse será o botão de alternância. Então, dentro dele, queremos adicionar o ícone do botão de alternância. E obteremos esses ícones um site chamado Íons ícones. Para incluir os ícones, vou usar e copiar esse código aqui. Em seguida, cole-o em nosso HTML. Em seguida, para selecionar o ícone de alternância, clicarei nos ícones e, em seguida, selecionarei e copiarei esse código aqui Em seguida, volte e cole aqui dentro do dif de alternância. Então, abaixo disso, queremos adicionar os itens do menu. Vou adicionar uma UL, depois uma L I. Dentro dela, queremos usar variáveis CSS. Aqui, adicionarei o estilo dois e adicionarei um. Essa variável será igual a um desse primeiro item da lista. Então, dentro disso, adicionarei uma etiqueta de âncora dentro dela. Queremos adicionar o ícone inicial. Vou voltar aqui e procurar por isso. Em seguida, copie esse código e cole-o aqui novamente. Agora você pode ver que temos o botão de alternância e o link inicial Ok pessoal, vou pausar a gravação e adicionar os outros links, assim como fiz com este Como você pode ver, adicionamos seis ícones aqui e aumentamos a variável de 1 a 6 e eles estão todos aqui Tudo bem, vamos ao nosso CSS e mirar no corpo. Em seguida, adicione altura mínima, tela flexível de 100 VH, justifique o centro do conteúdo, alinhe os itens, centro o fundo, gradiente linear de 45 graus dessa cor roxa para essa cor vermelha Então, abaixo disso, terei como alvo o div do contêiner. Adicione largura 270 pixels, altura 270 pixels. Em seguida, exiba de forma flexível, justifique o centro de conteúdo, alinhe os itens, centralize a posição relativa e um fundo vermelho temporário Agora você pode ver que temos o ícone da tag e os outros links próximos um do outro Ok, vamos trabalhar no botão de alternância. Eu vou mirar nele. Adicione largura 70 pixels, altura 70 pixels. Em seguida, o raio da borda branca do fundo 50% colore essa cor cinza escuro Em seguida, para centralizar o ícone dentro do círculo, adicionarei display Flex, Justify, centro de conteúdo, alinharei os itens ao centro e, em seguida, o tamanho da fonte 30 pixels Ponteiro do cursor z index 20. Então, finalmente, faça a transição de 0,3 segundos. Agora vamos trabalhar no efeito de clique. Ao clicar no botão de alternância, queremos que ele gire para ser um sinal x, não um sinal não um Ao clicar nesse botão, queremos adicionar uma classe na div do contêiner e estilizar o botão de alternância Com base nessa classe, vou para o arquivo Javascript e começarei selecionando a div do contêiner Eu direi que deixe o contêiner igual ao seletor de consulta de documento e selecione o contêiner Então, abaixo disso, vou direcionar rapidamente o div de alternância. Então eu vou aqui e digo para alternar Adicionar ouvinte de eventos. O evento que queremos ouvir é clique. Em seguida, adicionarei nossa função. Dentro disso, adicionarei uma lista de classes de contêiner, alternarei e adicionarei uma classe chamada Isso é tudo para o script Java, pessoal. Basicamente, quando clicamos no botão de alternância, uma classe chamada ativa é adicionada ao contêiner Vamos tentar isso. Você pode ver quando eu clico no botão de alternância, essa classe ativa é adicionada Ao clicar novamente, ele é removido. Ok, vamos voltar ao nosso CSS e selecionar o contêiner Div Então, quando o contêiner tiver uma classe ativa, teremos como alvo a classe de alternância e adicionaremos a rotação de transformação Agora você pode ver que quando eu clico no botão de alternância, ele gira 45 graus e se torna um Ao clicar novamente, ele retorna devido à remoção da classe ativa. Ok, vamos continuar. Vamos trabalhar na UL que contém todos os itens da lista. Tem uma classe de menu. Vou direcionar isso e adicionar a posição absoluta superior zero, zero esquerdo, depois largura 100% altura 100%. Em seguida, vou direcionar o L I dentro do menu e adicionar a posição absoluta no topo 00, largura 100% altura 100% E, finalmente, eventos de ponteiro Agora você pode ver que todos os itens da lista estão posicionados no canto superior esquerdo Abaixo disso, vamos segmentar a tag âncora dentro do item da lista Dentro disso, adicionarei largura 55 pixels, altura 55 pixels. Pinte este fundo cinza escuro, borda branca, raio de 50%, tamanho da fonte 22 pixels Em seguida, adicionarei o display flex justify content center, um centro de itens de linha Então, para posicionar os links abaixo do botão Alternar, adicionarei a posição absoluta superior 50% esquerda 50% Transformar traduzir menos 50% e menos 50% . Você pode ver que os links agora estão escondidos atrás do botão de alternância Também adicionarei eventos de ponteiro visíveis e, em seguida, farei a transição de 0,3 segundos. Ao clicar no botão de alternância, queremos que os botões apareçam novamente Selecionarei o contêiner quando o contêiner tiver uma classe ativa. Ou seja, quando clicarmos no botão, selecionarei as tags de ancoragem e adicionarei a zero Agora, ao clicar no botão de alternância, você pode ver os links se moverem para o Ao clicar novamente, eles se movem para trás e se escondem atrás do botão de alternância Agora, a única coisa que resta é fazer os links girarem em torno do botão de alternância Vou entrar aqui dentro dos itens da lista e adicionar a rotação de transformação Como temos seis itens da lista, adicionarei calc 360 graus por seis vezes v, que é a variável que adicionamos ao nosso HTML O primeiro LI será girado 360 graus dividido por seis vezes um, que é 60 O segundo será girado em 120 graus, e assim por diante, até que o último seja girado em 360 graus Agora você pode ver que, quando clicamos no botão de alternância, temos os seis ícones espalhados ao redor do botão de alternância Mas, como você pode ver, os ícones são girados para revertê-los. Podemos ir aqui e adicionar transformação, traduzir menos 50% e menos 50% e depois girar 360 graus negativos dividido por seis vezes a variável I. Isso reverterá todos os links girados volta para zero Agora você pode ver, ao clicar no botão, que os links agora estão exatamente do jeito que queremos, mas só precisamos remover o fundo vermelho. É isso, pessoal, para esta lição. Espero que tenham gostado e nos vemos na próxima. 119. Efeito de paralaxe de site com javascript: Olá pessoal, bem-vindos a esta nova lição do curso. Nesta lição, vamos criar um efeito de site de paralaxe interessante Você pode ver que temos esse cabeçalho que tem um logotipo e uma barra de navegação. Também temos essa imagem de fundo e esse título que diz site de paralaxe Também temos algum conteúdo fictício aqui abaixo do cabeçalho. Como você pode ver, apenas um título e um parágrafo. Mas dê uma olhada mais de perto, quando rolamos para baixo, você pode ver que temos esse efeito de paralaxe interessante no qual o título aqui se move para baixo enquanto Além disso, essa folha de árvore aqui no canto superior direito se move para o canto superior direito. Conforme essa colina aqui se move para o fundo, essas duas colinas se movem em direções diferentes, uma para a direita e outra para a esquerda, nos dando esse efeito muito legal. Vamos começar aqui em nosso HTML adicionando um cabeçalho dentro dele, adicionaremos um H dois e diremos um logotipo. Então, abaixo disso, adicionarei um elemento nav e darei a ele uma classe de navegação Em seguida, dentro dele, adicionaremos os links. Vou adicionar uma etiqueta de âncora e ficar em casa. Em seguida, adicionarei rapidamente as outras tags de ancoragem. Como você pode ver, temos o logotipo e a barra de navegação. Tudo bem, vamos ao nosso CSS e selecione o corpo e adicione o fundo, essa cor cinza claro, depois a altura mínima, 100 VH Então, abaixo disso, vou direcionar o cabeçalho e adicionar posição zero superior absoluto, zero esquerdo com 100% seguida, preencher 30 pixels da parte superior e inferior e 100 pixels da esquerda e da direita Em seguida, adicionarei display flex. Então, queremos que o logotipo e a barra de navegação estejam no lado esquerdo. Vou adicionar o Justify Content Flex. Inicie o Align Items Center para garantir que o cabeçalho fique visível Não importa quais elementos adicionemos, adicionarei um índice 100. Agora você pode ver que temos o logotipo e a barra de navegação à esquerda. Vou voltar e escolher o logotipo. Em seguida, adicionarei fonte de tamanho dois, cor M, essa cor verde. Então, para ter algum espaçamento entre o logotipo e o menu de navegação, adicionarei uma margem direita de 270 pixels, exatamente como você vê aqui Tudo bem, vamos trabalhar no menu de navegação. Vou direcionar as tags de âncora dentro da navegação e adicionar decorações de texto, sem cor, esse preenchimento de cor verde, seis pixels da parte superior e inferior e 15 pixels da esquerda e da direita Em seguida, adicionarei o raio da borda de 20 pixels, zero da parte superior e inferior e dez pixels da esquerda e da direita Em seguida, peso da fonte 600 e, finalmente, transição de 0,5 segundos. Agora você pode ver que os links estão muito melhores. Vou até aqui e digo que, ao passar o mouse sobre esses links, adicionarei o fundo, nossa cor verde e a cor branca Agora você pode ver que os links têm esse belo efeito de pairar. Ok, agora vamos trabalhar nas imagens que usaremos para criar o efeito de paralaxe Você pode ver aqui que temos sete imagens que, quando reunidas, nos fornecerão nosso plano de fundo completo. Temos cinco imagens para as colinas e uma imagem para a folha e outra para a planta. Obviamente, você encontrará todas essas imagens anexadas ao arquivo de recursos. Vou entrar aqui no meu HTML e adicionar uma nova seção, atribuir a ela uma classe de paralaxe Então, dentro dela, adicionarei uma imagem e, em seguida, adicionarei a primeira imagem , que é a colina. Também fornecerei a ele um ID de hill one para direcioná-lo no arquivo Javascript. Em seguida, adicionarei rapidamente todas as outras imagens. Agora você pode ver que adicionamos oito imagens, todas as imagens do nosso plano de fundo e você as vê aqui no navegador. Também adicionarei um H dois, fornecerei um ID de texto e direi um site de paralaxe Tudo bem, agora vou voltar ao meu CSS e direcionar o div de paralaxe que contém todas as imagens e adicionar a posição relativa Em seguida, justifique o centro de conteúdo e centro de alinhamento de itens Altura 100 VH. Agora você pode ver que todas as imagens são adicionadas uma ao lado da outra. Vamos continuar trabalhando. Vou voltar e adicionar overflow hidden para obter a forma exata que queremos Selecionaremos as imagens dentro div de paralaxe e adicionaremos Em seguida, zero superior, esquerda, largura zero 100% Finalmente, eventos de ponteiro, nenhum Agora você pode ver que temos esse histórico. Essas são apenas todas as nossas imagens juntas, elas formam esse plano de fundo. A razão pela qual isso está acontecendo tão perfeitamente é porque todas essas imagens foram projetadas para essa finalidade. É como se fosse apenas uma visualização dividida em várias imagens. Ok, vamos trabalhar nos dois que tinham um ID de texto. Vou mirar nele e adicionar posição. Tamanho absoluto da fonte cinco, cor EM branca. Em seguida, o texto oculta esse valor. Agora você pode ver que o H dois está exatamente do jeito que queremos. Ok, vamos adicionar um pouco de conteúdo. Para ter uma barra de rolagem, vou até meu HTML e adicionarei uma nova seção com uma classe de conteúdo Então, dentro dele, adicionarei um H dois e direi um site de rolagem paralaxe Em seguida, adicionarei um parágrafo e adicionarei um texto fictício Agora você pode ver que temos esse conteúdo. Vamos adicionar rapidamente alguns estilos aqui. Vou voltar ao meu CSS, direcionar o conteúdo e, em seguida, adicionar a posição relativa ao fundo, essa cor verde preenchendo 100 pixels Em seguida, vou direcionar o H dois dentro dele e adicionar o tamanho da fonte três, E, M, cor branca, margem inferior, dez pixels. Em seguida, selecionarei o parágrafo e adicionarei o tamanho da fonte: um M, cor branca, espessura 300. Agora você pode ver que a div de conteúdo está muito melhor. Você deve ter notado que escolhemos essa cor verde escura para combinar com a parte inferior do nosso plano de fundo aqui, elas estão muito próximas uma da outra. Incrível. Agora que concluímos o HTML e o CSS desse exemplo, é hora de trabalhar no script Java. Vou para o arquivo Java Script e, em seguida, começarei selecionando os elementos que queremos animar ou alterar Eu direi deixe o documento de texto, obtenha o elemento por ID. Vou selecionar o elemento com o ID do texto, que são os dois. Em seguida, selecionarei rapidamente os outros elementos que usaremos em nosso arquivo Javascript. Você pode ver que selecionamos outros quatro elementos, imagem da crença e três imagens das colinas. Ok, vamos trabalhar no efeito. Vou até aqui e digo janela, adicione rolagem do ouvinte do evento Em seguida, criarei uma função de retorno de chamada. Basicamente, esse código significa que qualquer código que adicionarmos aqui dentro dessa função de retorno de chamada será executado sempre que rolarmos a página Tudo bem, dentro da função, vou criar uma nova variável chamada value e definir seu valor para rolagem da janela. Essa será a distância vertical que a página percorreu Se voltarmos ao navegador e rolarmos um pouco , será essa distância aqui. Tudo bem, então vamos trabalhar nos elementos para mudar sua posição usando o valor da variável aqui. Vamos trabalhar primeiro no H dois que tem o ID do texto, vou dizer, estilo de texto, margem superior. Isso será igual a. Usaremos modelos literais aqui. Ao adicionar esses dois símbolos, adicionaremos o cifrão e abriremos colchetes para adicionar um código executável dentro dele Então, direi valor vezes 2,5. Depois, fora das chaves, adicionarei pixels O que acontecerá aqui é que, toda vez que rolarmos a página, o Javascript obterá o valor da rolagem y multiplicará por 2,5 O resultado será definido como uma margem superior para os dois H. Sempre que rolamos para baixo na margem, valor superior aumentará, fazendo com que os dois H se movam para a parte inferior. Vamos tentar isso bem rápido. Você pode ver que quando eu rolo para baixo, os dois H se movem para baixo. Ao rolar para cima, ele se moverá para o topo novamente. Tudo bem, vamos trabalhar na folha aqui. Queremos que ele se mova para o canto superior direito fora da página ao rolar para baixo. Então, vou dizer que o estilo de folha superior é igual a, usarei literais de modelo também usarei literais de modelo e multiplicarei o valor por menos 1,5. Desta vez , isso definirá o topo com um valor negativo, fazendo com que a folha se mova para o Por exemplo, se eu for ao meu navegador, você pode ver que, ao rolar, a folha se move para o topo Tudo bem, vamos voltar e movê-lo para a direita também. Vou duplicar esse código, depois mudar de cima para a esquerda e mudar menos 1,5 para 1,5 desse jeito Quando eu rolo a página para baixo, ela se move para o canto superior direito. Agora, não só o topo. Acho que você entendeu. Vou adicionar rapidamente o outro código para as imagens restantes. Como você pode ver, eu basicamente fiz a mesma coisa com as imagens de Three Hills. Acabei de mudar a posição deles. Mudei a posição deste para a direita, pois adicionei um valor positivo à esquerda. Quanto a este, ele se moverá para a esquerda , pois tem um valor negativo à esquerda. Para o último aqui, ele se moverá para baixo, pois tem um valor superior positivo. Como você pode ver aqui, pessoal, quando eu rolo para baixo os elementos que selecionamos, movo e mudo sua posição. Temos essas duas colinas no centro que se separam uma da outra, enquanto essa colina aqui se move para o fundo de todos. Isso é tudo para o efeito de paralaxe. Você pode ver que a ideia por trás disso é muito simples. Espero que tenham gostado e nos vemos na próxima aula. 120. Design de cartão expansível usando javascript: Olá a todos. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse cartão de perfil animado. Você pode ver que temos esse cartão e, quando clicamos nesse botão de alternância, você pode ver que o cartão se expande e essa Além disso, observe que o botão de alternância gira de apontar para baixo para apontar para cima quando clicamos nele Vamos ver como podemos criar esse cartão. Vou entrar aqui no meu HTML adicionando um div com uma classe de cartão Em seguida, vou ao meu CSS e seleciono o div do cartão. Em seguida, adicione a largura relativa da posição, 350 pixels, altura 85 pixels de fundo. Essa borda em cor azul marinho tem raio de 20 pixels. Finalmente, faça a transição de 0,5 segundos. Agora você pode ver que tínhamos essa experiência na marinha. Vamos voltar ao nosso HTML. Queremos criar o botão de alternância. Na parte inferior, adicionarei uma classe de alternância Então, dentro dele, adicionarei uma extensão. Então eu vou voltar e mirar no div de alternância. Essa será a parte inferior. Vou adicionar posição, largura absoluta 70 pixels, altura 60 pixels, fundo branco. Em seguida, para posicioná-lo na parte inferior, adicionarei 60 pixels negativos na parte inferior. A transformação esquerda de 50% traduz x menos 50% Em seguida, adicionarei borda inferior esquerda, raio 35 pixels e borda inferior direita, raio de 35 pixels Então, finalmente, ponteiro do cursor. Agora você pode ver que temos essa parte branca na parte inferior. Mas se dermos uma olhada no nosso exemplo, você pode ver que a curva aqui é mais suave Vamos voltar e criar isso. Usaremos o pseudo elemento anterior. Para fazer isso, selecionarei o pseudo-elemento anterior do div de alternância e adicionarei conteúdo cadeias de caracteres vazias, posição, largura absoluta 35 pixels Em seguida, coloque um fundo vermelho temporário. Em seguida, adicionarei 34 pixels negativos à esquerda e, em seguida, bordarei o raio superior direito de 35 pixels Então, abaixo disso, adicionarei a sombra da caixa 11 pixels como um deslocamento horizontal Em seguida, menos dez pixels como deslocamento vertical, zero como valor de desfoque e dez pixels como valor de dispersão e, em seguida, verde Agora você pode ver que temos essa cor verde que adicionamos usando a propriedade box shadow. Tudo bem, eu vou aqui e mudo a cor vermelha para transparente. Em seguida, queremos criar a mesma peça no lado direito. Vou copiar esse bloco de código, colá-lo e mudar da esquerda aqui para a direita. Em seguida, mude a borda para a esquerda. Também altere o deslocamento horizontal aqui para menos 11 pixels Agora você pode ver que o temos aqui à direita. Em seguida, entrarei aqui dentro do botão de alternância e mudarei do fundo de branco para a cor azul marinho escuro Também altere a cor da sombra da caixa para azul marinho em vez de verde. Agora você pode ver que temos essa parte da Marinha na parte inferior. Ok, agora vamos criar a seta que será posicionada nessa parte da Marinha Nós o criaremos usando a extensão dentro do botão de alternância. Selecionaremos essa posição de adição, largura absoluta de dez pixels, altura de dez pixels. Em seguida, contorne os três pixels inferiores, em branco sólido. Em seguida, também adicionaremos a borda direita. Em seguida, para centralizá-lo, adicionaremos 50% superiores à esquerda, 50% Em seguida, transformaremos translação negativa 50% menos 70%. Então , para girá-lo, adicionaremos rotação de 45 graus Em seguida, adicionarei a transição de 0,5 segundos. Tudo bem, agora, ao clicar nesse botão de alternância, queremos que essa extensão gire e aponte para Faremos isso usando Javascript. Vou até o arquivo Javascript e começo direcionando o cartão Vou criar uma nova variável, nomeá-la e selecionar o cartão. Também terei como alvo o div de alternância. Então, abaixo disso, ao clicar no div de alternância, queremos adicionar uma classe ao div do cartão e, em seguida, estilizar o intervalo com base Então, ao clicar novamente, queremos remover essa classe. Basicamente, alternaremos uma classe ao clicar no botão de alternância Vou até aqui e digo alternar, Adicionar ouvinte do evento e ouvir o Em seguida, criaremos uma função de retorno diremos alternar lista de cartões e nomearemos a classe Agora, ao inspecionar o div do cartão, ao clicar no botão de alternância, você pode ver que uma classe ativa foi adicionada ao Ao clicar novamente, ele é removido. Tudo bem, agora, ao clicar no botão de alternância, queremos girar a seta Vou para o meu CSS e direcionarei o cartão. Quando o cartão tiver uma classe ativa, selecionaremos o intervalo dentro do div de alternância Dentro dele, adicionaremos transformação, traduziremos menos 50% e menos 70%, depois giraremos e alteraremos o grau de rotação para 225 Agora você pode ver a seta girar ao clicar no botão de alternância Ok, vamos continuar. Vou até aqui e direcionarei o cartão quando o cartão tiver uma classe ativa, adicionarei altura de 420 pixels Agora, ao clicar no botão de alternância, você pode ver a carta se expandir e sua Ao clicar novamente, ele encolhe. Vamos ao nosso HTML dentro do carro, adicionarei outro div com uma classe de conteúdo dentro dele Adicionaremos outro div com uma classe de caixa de conteúdo. Dentro disso, adicionarei um H dois e direi Paul Smith. Em seguida, adicione uma tag BR e, em seguida, um intervalo, digamos, desenvolvedor criativo. Em seguida, voltarei ao meu CSS e direcionarei o div de conteúdo. Em seguida, adicione posição, inserção absoluta, transbordamento oculto. Abaixo disso, vou segmentar a caixa de conteúdo div e adicionar preenchimento relativo à posição, 20 pixels, centro de alinhamento de texto, índice z dez, flexibilidade de exibição, centro de justificação 20 pixels, centro de alinhamento de texto, índice z dez, flexibilidade de exibição, centro de conteúdo e centro Então, abaixo disso, vou mirar nos dois. Em seguida, adicione cor, branco, espessura da fonte 500, tamanho da fonte 1,25 M. Transformação do texto , espaçamento entre letras maiúsculas de 0,05 M e, em seguida, altura da linha 1,1 M. Em seguida, selecionarei a extensão dentro do H dois e adicionarei o tamanho da fonte 0,75 M, a espessura da fonte Em seguida, o texto transforma em maiúsculas. Agora você pode ver que o texto aqui está muito melhor. Tudo bem, vamos voltar ao nosso HTML. E abaixo do H dois, adicionarei uma nova, atribuirei a ela uma classe de caixa de imagem, depois voltarei ao nosso CSS e direcionarei a caixa de imagem. Em seguida, adicione a largura relativa da posição, 250 pixels de altura. Fundo branco de 250 pixels. Então, para posicionar o conteúdo verticalmente, vou até aqui dentro da caixa de conteúdo div e adicionarei uma coluna de direção flexível Então eu vou aqui e adiciono a margem superior a 20 pixels. Em seguida, a sombra da caixa é menos dez pixels, dez pixels, dez pixels. Então, essa cor finalmente contorna cinco pixels, branco sólido. Em seguida, removerei esse plano de fundo. Em seguida, vamos voltar ao nosso HTML e, dentro da caixa de imagem div, adicionarei uma imagem e adicionarei nossa imagem Em seguida, voltarei ao nosso CSS e direcionarei essa imagem. Em seguida, adicione posição, adicione soluto, zero superior esquerdo zero largura 100% altura 100% Em seguida, encaixe a capa do objeto Agora você pode ver que a imagem aqui está exatamente do jeito que queremos. Por fim, vamos adicionar o botão na parte inferior. Vou voltar ao nosso HTML e adicionar um botão, depois dizer contrate-me. Em seguida, voltarei ao nosso CSS e direcionarei o botão. Em seguida, adicione a margem relativa da posição, 20 pixels superiores, o preenchimento de dez pixels e 35 pixels Em seguida, raio de borda de 25 pixels, contorno, ponteiro sem cursor, tamanho da fonte um M. Transformação do texto, espaçamento entre letras maiúsculas, 0,1 M, espessura da fonte 500 , cor Em seguida, adicionaremos essa sombra de caixa aqui. Agora, todos que você pode ver, temos esse botão. E, ao fazer isso, criamos esse design interessante. Espero que você goste desta lição e nos vemos na próxima. 121. Sem título: Olá pessoal. outra nova lição para você no curso. Nesta lição, criaremos esse interessante efeito de animação do caminho do clipe. Você pode ver que temos esse grande título no centro da página e esses dois círculos nos cantos superior esquerdo e inferior direito. Quando rolamos a página, esses dois círculos ficam maiores até cobrirem o título. O legal é que as partes do título cobertas pelos círculos têm esse belo traçado ao redor delas. À medida que rolamos até o topo, o título fica branco. Novamente, usaremos o script Java para alterar o valor do caminho do clipe na rolagem Vamos começar a criar esse efeito. Vou entrar aqui no meu HTML e adicionar uma seção. Então, dentro dele, adicionarei nossos H dois e direi scroll. Em seguida, adicionarei um div com uma classe de círculo um, outro div com uma classe de círculo dois Em seguida, vou para o meu CSS, direciono o corpo e adiciono altura de 200 VH para ter uma barra de rolagem, exatamente como você vê Então, abaixo disso, vou direcionar a seção e adicionar o zero superior esquerdo, zero de largura, 100% de altura, 100 H. Em seguida, o fundo é cinza escuro. Agora você pode ver que a seção tem uma altura de 100 VH. Mas quando rolamos, você pode ver que rolamos para a direita na seção. Mas queremos que ele fique conosco mesmo quando rolamos. Podemos fazer isso acessando nosso CSS e adicionando a posição fixa. Agora você pode ver que não importa o quanto rolemos, a seção permanece exatamente onde queremos que seja fixada em sua posição. Vou voltar ao meu CSS e focar nos dois. Em seguida, adicione a posição absoluta superior a 50%. Em seguida, transforme Traduza 50% de largura negativa, 100% de texto, alinhe a cor central em branco Então, finalmente, tamanho da fonte 18 EM. Agora você pode ver que o H two parece muito melhor. Ok, vamos trabalhar nos círculos. Agora vou focar na primeira div com a classe de círculo. Em seguida, adicione a largura absoluta da posição, 100 de altura, 100% de fundo. Essa cor verde. Agora você pode ver temos esse fundo verde que cobre todo o corpo, pois tem uma largura e uma altura de 100%. Agora, queremos recortar esse fundo verde para que a única parte visível seja o círculo no canto superior esquerdo. Vou voltar aqui e adicionar círculo de trajetória de clipe de 150 pixels como raio Em seguida, a 0,00 no eixo x e zero no eixo y, que eventualmente será o canto superior esquerdo Assim, todo mundo que você pode ver, a parte visível do fundo verde é esse círculo verde. Ok, vamos fazer rapidamente a mesma coisa com o círculo inferior direito. Vou copiar esse código, colá-lo e direcionar o círculo dois div Em seguida, basta alterar a cor de fundo para essa cor laranja. E também altere a posição da peça recortada para 100% e 100% para que ela apareça no canto inferior direito Agora você pode ver que temos esse círculo laranja aqui no canto inferior direito. Tudo bem, agora, ao percorrer a página, queremos que esses círculos fiquem maiores Vamos ao nosso arquivo de script Java e fazer isso. Começarei selecionando o primeiro círculo. Então, vou dizer, vamos circular um documento igual, obter o seletor de consulta E vou mirar no primeiro círculo que tem uma classe de círculo um. Então eu vou duplicar isso e mirar no segundo círculo desta vez Então eu vou aqui e digo Window Add Event listener. Então eu vou ouvir o evento Scroll. Em seguida, criarei uma função de retorno de chamada dentro dela. Vou criar uma nova variável, nomeá-la, valor de rolagem. E vou definir isso igual à rolagem da janela Y. Basicamente, esse valor é a distância da barra de rolagem até o topo da janela À medida que rolamos para baixo, esse valor aumenta. Mas quando rolamos para cima, ela diminui. É um valor variável e vamos usá-lo para alterar o raio dos círculos Quando rolarmos a página, vou até aqui e direi: circule um caminho de clipe de estilo igual. Em seguida, criarei um novo modelo literal para adicionar o valor do caminho do clipe Em seguida, adicionarei um círculo. Em seguida, abra um bloco de código. E 150 mais o valor de rolagem variável vezes 0,75 pixels a 0,0 Como você pode ver a todos, o valor do caminho do clipe do primeiro círculo ao rolar a página será 150 pixels, que é seu valor inicial, mais o valor de rolagem da página multiplicado por 0,75 Como sabemos, o valor de rolagem da página aumenta à medida que rolamos a Isso levará a um aumento geral no valor do raio do círculo Vamos tentar isso. Como você pode ver, quando rolamos para baixo, ele aumenta e quando rolamos para cima, diminui. Legal. Muito rápido. Vamos fazer o mesmo com o círculo laranja. Vou voltar aqui e copiar esse código. Cole e selecione o segundo círculo. Em seguida, basta alterar a posição do círculo para ficar no canto inferior direito em 100% e 100%. Agora quando eu volto e percorro a página, você pode ver que o círculo laranja também fica maior. Ok, agora queremos tornar as duas cores H transparentes e ter um traçado ao redor das letras. Vou para o meu HTML e copiarei e colarei os dois H dentro dos dois divs. Em seguida, vou voltar ao meu CSS e mirar no H dois dentro do primeiro mergulho circular. Em seguida, vou mirar no H dois dentro da segunda div do círculo. Dentro disso, adicionarei cores, texto transparente da web, cinco pixels e essa cor cinza. Quando eu volto e rolo para baixo, você pode ver que quando os círculos se cruzam com o H dois, o H dois tem esse efeito que está acontecendo porque adicionamos esse traço ao redor dos H dois dentro dos O H dois branco no centro aqui é o que está fora dos dois círculos. 122. Animação em rolagem usando javascript 1: Olá pessoal. Bem-vindo a mais uma nova lição do curso. Neste curso, vamos criar uma animação no efeito de rolagem usando Javascript. Você pode ver que temos esta página da web que contém várias seções. Ao percorrer a página, você pode ver que temos um título e um parágrafo em cada seção que é animada na página Quando chegamos ao ponto dessa seção, também quando eu passo pela seção, seu conteúdo desaparece novamente. Depois de rolar para cima e passar, o conteúdo aparece mais uma vez. Essa é uma forma muito comum de animar elementos em um site Vamos aprender como podemos fazer isso. Primeiro de tudo, você pode ver aqui em nosso HTML que temos cinco seções. Cada seção tem uma classe única, segundo um, segundo segundo, terceiro e assim por diante até o quinto segundo. Como você pode ver, as seções 1 a 4 têm um conteúdo muito simples, apenas um H dois e um parágrafo E todos os títulos e parágrafos em cada seção têm uma classe de animação Então aqui, na quinta seção, temos um div com uma classe de imagens Dentro dela, temos três imagens. Cada imagem tem uma classe de animação, assim como os parágrafos e os títulos dentro das outras seções Então, em nosso CSS, temos alguns estilos básicos para melhorar a aparência da página. Definimos a altura mínima de cada seção como 100 VH para que ela ocupe toda a altura da janela de visualização Também centralizamos o conteúdo e adicionamos alguns estilos básicos , como algumas cores de fundo e cores diferentes para cada seção Você tem os arquivos de recursos desta lição. Baixe-os e dê uma olhada nesses estilos. Ok, agora vamos começar a trabalhar no efeito de rolagem. Eu irei para o meu arquivo de script Java. E primeiro de tudo, vamos focar em todas as seções. Então, vou criar uma variável chamada It sections. Em seguida, definirei isso como igual ao seletor de consulta de documentos. Tudo o que vou atingir são as seções. Então, abaixo disso, direi que rolagem da janela é igual a Eu criarei uma nova função. Essa função aqui será executada sempre que percorrermos a página. Dentro dessa função, queremos percorrer todas as seções uma a uma e afetá-las usando o código Javascript. Eu direi seções. Para cada loop aqui, vou selecionar. Percorreremos as seções. Cada seção será nomeada sec. Em seguida, criarei uma função de retorno de chamada. Dentro dela, criarei uma nova variável chamada distância de rolagem Defina aquela igual à rolagem da janela y. Essa variável, todos, é a distância percorrida É a distância da parte superior da barra de rolagem até a parte superior da página. Então, abaixo disso, vou criar uma nova variável, chamá-la de sec distance e defini-la como secsettp Essa propriedade superior de deslocamento é a distância da borda externa da seção, a borda superior de sua matriz, que é o corpo nesse caso Vamos pegar a segunda seção aqui como nosso exemplo. O deslocamento da parte superior da segunda seção é a distância da borda superior da segunda seção até a parte superior da página Na verdade, é igual à altura da primeira seção. Quanto à terceira seção, a parte superior deslocada será igual à altura da primeira e da segunda seções juntas Tudo bem, vamos continuar. Vamos voltar ao navegador. E o que queremos fazer aqui, pessoal, é que, ao percorrer a página, quando chegarmos, por exemplo, à segunda seção aqui, queremos adicionar alguns estilos a essa seção que criarão o efeito de animação que queremos E quando aprovarmos, esses estilos serão removidos. O mesmo acontece com a terceira seção, exatamente aqui, e a quarta, e assim por diante. Queremos usar as variáveis que criamos aqui para ajudar o navegador a detectar quando atingimos uma classe específica. Em seguida, adiciona os estilos que queremos. Vamos fazer isso. Vou aqui e direi que se distância de rolagem for maior ou igual à distância de segundos, direi classe de segundos, adição de lista. Vou adicionar uma classe chamada Show Animate. Como você pode ver a todos, se a distância percorrida for igual à distância da seção até o topo da página Essa instrução if será executada, mas vamos até o navegador e veremos quando essa condição acontece. A distância da seção é um valor fixo, como dissemos para a segunda seção, é igual à altura da primeira seção. Nunca muda, a menos que alteremos a altura da primeira seção. Enquanto isso, a distância de rolagem é um valor variável. Isso muda enquanto rolamos a página em algum momento em que esses dois valores são exatamente iguais. É aqui que a condição if se torna verdadeira. Isso acontecerá quando rolarmos até que a borda superior da segunda seção toque a borda superior do navegador Nesse caso, a distância de rolagem é igual à distância da seção até a parte superior da página. Vamos inspecionar a página. Quero que todos dêem uma olhada aqui na segunda seção. Você pode ver que quando eu chego ao topo da segunda seção, a condição if se torna verdadeira. E uma nova classe chamada show animate é adicionada à segunda seção Quando chegamos à terceira seção, a classe também é adicionada a ela. Isso acontece com todas as seções, como você pode ver. Ok, essa é a ideia principal, pessoal. Usaremos essa classe para estilizar as seções. Vou voltar aqui no meu CSS e direcionar elementos com a classe de animate. Lembre-se de todos: todos os títulos, parágrafos e imagens em nosso HTML têm uma classe de animação Basicamente, todos os elementos têm essa classe. Ok, vamos voltar ao nosso CSS. E dentro da div animada, adicionarei opacidade Desfoque do filtro, cinco pixels e, em seguida, faça a transição de 0,5 segundos. Agora você pode ver que todos os elementos estão ocultos, já que adicionamos opacidade zero a todos Agora, quando rolamos para uma seção, queremos torná-la visível novamente. Voltarei ao meu CSS e direi quando a seção tiver uma classe de show animate. E, como você sabe, isso acontece quando rolamos até a seção. Vou direcionar o div animado e adicionar um de opacidade. Em seguida, filtre o desfoque de zero pixels. Agora, ao voltar e percorrer a página, você pode ver que, quando chegamos a uma seção, o conteúdo desaparece e fica visível Vamos até o topo da página e recarregue-a. Você pode ver que, quando recarregamos, o conteúdo da primeira seção fica invisível Mas queremos que ele apareça quando recarregarmos. Não queremos esperar até rolar a página. Podemos fazer isso acessando nosso HTML e adicionando uma classe de show animate à primeira seção aqui Agora, quando eu recarrego a página, você pode ver que o conteúdo está visível Agora, pessoal, podemos adicionar alguns efeitos diferentes a cada seção. Vamos tentar isso. Vou até meu CSS e vou focar na classe animate dentro da segunda seção Em seguida, adicione transform translate x 100%. Então eu vou duplicar isso rapidamente Quando a segunda seção tiver uma classe de show animate, alterarei a tradução x de volta para zero Ele retorna à sua posição. Agora, quando vou até a segunda seção, você pode ver os slides do conteúdo da direita para a esquerda. Graças à propriedade de tradução que mudamos. Ok, vamos adicionar mais estilos às outras seções. Vou copiar esse código, colá-lo e direcionar a terceira seção aqui. Aqui. Em seguida, alterarei a função de tradução para escala e adicionarei um valor de 0,7. Então, aqui, adicionarei a escala um de volta a um. Em seguida, vou colar isso novamente e direcionar para a quarta seção. Então eu vou ajustar a rotação aqui para 30 graus, depois aqui de volta para zero graus. Em seguida, colarei o código novamente e direcionarei para a quinta seção que contém as imagens. Deixe translate x como 100% aqui. Em seguida, adicione rotação negativa de 90 graus. Em seguida, coloque-o novamente em zero graus aqui. Agora, quando eu volto, recarrego e percorro a página, você pode ver que, quando chegamos a uma nova seção, os elementos aparecem suavemente, dando um efeito muito legal Agora, esse efeito é sutil e você pode usá-lo dessa maneira. Mas na próxima lição, veremos mais alguns truques simples que podemos adicionar para tornar esse efeito ainda mais dinâmico. Mas, por enquanto, quero que você brinque e experimente diferentes efeitos de animação nos elementos. Experimente todos os efeitos diferentes que aprendemos ao longo deste curso. Divirta-se. 123. Animação em rolagem usando javascript 2: Na última lição, criamos essa animação no efeito de rolagem. Você pode ver que o conteúdo aparece bem ao rolar Mas, como você pode ver quando rolamos para cima, o conteúdo não é animado. Ele tem os efeitos de animação apenas uma vez. Se inspecionarmos a página, você poderá ver que, ao percorrer a página, a classe show animate será adicionada E uma vez adicionado, não é removido. Vamos tentar algo em nosso script Java. Vou aqui e digo outra coisa, depois copiarei, colarei e removerei a classe. Desta vez, o que isso fará é que, quando a distância percorrida for menor que a distância da seção, a classe será removida Isso acontece quando rolamos até o topo e passamos pela parte superior da seção. Vamos até o navegador e veremos se vou inspecionar a página E quando eu rolo para baixo, você pode ver que a classe foi adicionada. E ao rolar até o topo, você pode ver que a classe foi removida, os elementos foram removidos da página Agora, esse é um efeito muito mais legal. Ok, vamos tentar outra coisa. Vamos adicionar um pouco de atraso de transição aos parágrafos para que eles apareçam um pouco depois dos títulos Vou até meu CSS e seleciono o parágrafo que tem uma classe de animação, que é basicamente todos os parágrafos da página Em seguida, adicionarei um atraso de transição de 0,2 segundos. Agora você pode ver que, quando percorremos a página, os parágrafos aparecem um pouco depois dos títulos Vamos também adicionar algum atraso de transição às imagens para que elas apareçam uma após a outra. Vou para o meu CSS e direcionarei a segunda imagem dentro da quinta seção. Em seguida, adicione o atraso de transição de 0,2 segundos. Em seguida, duplique esse código e altere o atraso da transição para 0,4 segundos. Agora, quando volto e percorro a quinta seção, você pode ver as imagens aparecerem uma após a outra, nos dando o efeito que queremos. Mas se você notou que os elementos não aparecem até chegarmos ao topo da seção, será muito melhor se pudermos fazê-los aparecer um pouco mais cedo, para que não precisemos rolar até a borda superior da seção. Podemos fazer isso adicionando a classe. Antes de chegarmos ao topo da seção, vou para o meu Javascript. Vá aqui e diga que quando a distância de rolagem for maior ou igual à distância da seção -150, o Cs será adicionado, a classe será adicionada 150 pixels acima da borda superior da seção Assim, todos podem ver os elementos aparecerem um pouco mais cedo. E com isso, terminamos este exemplo. Espero que tenha gostado e aconselho você a tentar implementar o que aprendeu neste exemplo e usá-lo para criar suas próprias ideias. 124. Animação de estrada em modo noturno usando javascript: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar essa interessante animação rodoviária. Você pode ver que temos essa cena que contém um fundo, um sol e dois carros se movendo um contra o outro. O fundo também está se movendo, dando uma sensação realista. Se clicarmos no sol, você pode ver que ele se transforma em lua e a cena fica escura. Isso é basicamente um modo escuro, e vamos implementá-lo usando Javascript. Acho que esse é um exemplo muito legal e espero que você goste. Vamos começar aqui em nosso HTML adicionando uma seção, dando a ela uma classe de cena. Então, dentro dela, adicionarei outra div, a classe do sol. Abaixo disso, adicionarei outro com uma classe de BG. Dentro dela, adicionaremos as imagens do carro. Vou adicionar a primeira imagem e atribuir a ela uma classe de carro. Então, abaixo disso, adicionarei a segunda imagem e darei a ela uma classe de carro dois. Você encontrará essas imagens nos arquivos de recursos desta lição. Agora você pode ver que temos apenas essas duas imagens de carros da polícia em nosso corpo. Tudo bem, vamos ao nosso CSS e direcionar a seção de cena. Vou adicionar posição, altura relativa, transbordamento de 100 VH, ocultando o gradiente linear Em seguida, adicionarei essa cor azul clara. Em seguida, adicionarei branco e branco. Agora você pode ver que temos esse belo gradiente de azul claro na parte superior até branco na parte inferior, o nos dá uma cena próxima ao céu Tudo bem, vamos trabalhar na criação do sol. Vou atacar o Div com a classe do sol. Adicione posição, largura absoluta de 100 pixels, altura de fundo de 100 pixels, raio da borda branca 50% Em seguida, 100 pixels superiores à esquerda, 55% Agora você pode ver que temos esse círculo branco aqui sentado na parte superior do nosso corpo Vamos aqui e adicionar a transformação, traduzir x menos 50% para deslocá-la um pouco para a esquerda. Em seguida, sombreie a caixa de 0,050 pixels como valor de desfoque e branca como sua Em seguida, faça a transição de 0,2 segundos. Finalmente, ponteiro do cursor. Agora o sol fica com essa sombra embaçada. Vamos trabalhar na div de fundo. Vou direcionar a div com a classe B, G e adicionar posição, largura absoluta, 100% da div da cena Então, altura de apenas 280 pixels. E para posicioná-lo na parte inferior, adicionarei o zero inferior. Em seguida, adicionarei o URL de fundo. E vou adicionar essa imagem de fundo que você pode ver aqui. Você o encontrará nos recursos desta lição Você pode ver que temos esse plano de fundo aqui na parte inferior com uma altura de 280 pixels. Vamos voltar e adicionar o tamanho do plano de fundo de 1.500 pixels. Em seguida, repita o plano de fundo, repita. Agora você pode ver que a imagem de fundo parece muito melhor. Ok, vamos animá-lo. Vou criar uma nova animação. Dê um nome, anime BG dentro dele. Em 0%, adicionarei posição de fundo x zero pixels. Então, em 100%, alterarei o valor x da posição de fundo para menos 1.500 pixels Para que a imagem se movesse para a esquerda. Em seguida, vou até aqui dentro da div BG e adiciono animação animada G de 25 segundos linear, Agora você pode ver a posição do fundo ao longo da linha horizontal mudar, dando a sensação de que a imagem está se movendo. Tudo bem, agora vamos trabalhar no estilo das imagens do carro Vou mirar no primeiro carro e adicionar 20 pixels para deslocá-lo um pouco até a largura máxima superior de 200 pixels e, em seguida, um índice. Agora você pode ver que o primeiro carro agora está menor e posicionado no canto inferior esquerdo da estrada Também adicionarei alguns estilos ao segundo carro. Vou selecioná-lo, adicionar posição, fundo absoluto. 50 pixels para deslocá-lo um pouco acima do primeiro carro. Em seguida, a largura máxima também é de 200 pixels. Agora você pode ver que a segunda imagem também está aqui no canto inferior da estrada. Tudo bem, vamos voltar e mudar suas posições. Queremos que o primeiro carro apareça do lado esquerdo da estrada. Vou voltar aqui e adicionar 200 pixels negativos. Queremos que a segunda imagem apareça do lado direito. Vou adicionar 200 pixels negativos à direita. Agora você pode ver que os dois carros não estão mais visíveis , pois o primeiro se moveu para a esquerda fora da estrada e o segundo se moveu para a direita fora da estrada. Agora vamos criar a animação que fará com que eles se movam na estrada. Vou criar uma nova animação, chame-a de carro. Então, com 0% da duração da animação, adicionarei transform translate x zero pixels. Então, em 90% e 100%, adicionarei translate x calc 100 V mais 200 pixels O primeiro carro se moverá da esquerda para a direita até cruzar a estrada e sair da estrada Vou subir aqui dentro do primeiro carro e adicionar um carro de animação, 18 segundos lineares, infinitos. Agora você pode ver que o primeiro carro está vindo da esquerda, fora da estrada, se movendo ao longo do caminho até cruzar a estrada Vamos fazer o mesmo rapidamente com o segundo carro. Vou copiar essa animação, colar e mudar o nome da animação para carro dois. Em seguida, deixarei o valor de translação como está, mas adicionarei rotação y 180 graus para que a imagem seja girada 180 graus ao longo do eixo y. Em outras palavras, ele será virado verticalmente. Então, aqui vou alterar o valor de translação x para menos 100 VW -200 pixels Ele se moverá do lado direito ao longo da estrada para o lado esquerdo e, em seguida, cruzará o lado esquerdo também. Vou entrar aqui dentro do segundo carro e adicionar animação. Carro dois, 12 segundos lineares, infinitos. Agora você pode ver que o segundo carro está vindo do lado direito e se movendo até o lado esquerdo. E os dois carros se encontram no meio da estrada, o nos dá esse efeito muito legal. Agora é hora de trabalhar para mudar a cena para o modo noturno. Ao clicar no mergulho solar, colocaremos abaixo a classe que criará o modo noturno Vou até o arquivo Javascript, criarei uma nova variável, criarei uma nova variável, chamarei de Sun e adicionarei um seletor de consulta de documentos E selecione o div com a classe Sun. Então eu vou duplicar isso e focar na seção da cena. Abaixo disso, direi Sun Add Event listener. Vou ouvir o evento de cliques. Em seguida, adicionarei uma função de retorno de chamada que será executada sempre que clicarmos no Sol Então, dentro disso, direi Sun class List Toggle. E vou adicionar uma classe chamada Night. Agora, se eu inspecionar a página e começar a clicar no Sun, você poderá ver que a aula noturna é adicionada e removida toda vez que clicamos na div Sun Tudo bem, agora vamos ao nosso CSS e começar a mudar os estilos da página com base nessa classe. Eu vou até aqui e vou focar na seção da cena. Então, quando a seção da cena tiver uma aula noturna, adicionarei um fundo, essa cor azul marinho escuro. Agora, quando eu volto e clico no Sol, você pode ver a cor de fundo mudar para essa cor azul marinho. Tudo bem, vamos voltar e duplicar o alvo do seletor, o sol Em seguida, adicione 45% à esquerda em vez de 55%, ele se move um pouco para a esquerda Em seguida, queremos remover a sombra da caixa que ela tem. Então, vou definir todos os seus valores como zero. Agora você pode ver ao clicar no Sol, ele se move para a esquerda e a sombra na parte inferior é removida. Tudo bem, agora queremos convertê-lo em uma forma de lua. Vou duplicar esse seletor mais uma vez. Em seguida, alveje o pseudo-elemento anterior do sun div e adicione conteúdo strings vazias, posicione o topo absoluto menos 20 pixels para deslocá-lo um pouco para o topo e, em seguida, 20 pixels para a esquerda para deslocá-lo para a Em seguida, adicionarei com 100% de altura, 100% de fundo, um fundo vermelho temporário. Então, finalmente, o raio da borda 50%. Agora, quando eu volto e clico no Sol, você vê que temos esse círculo vermelho que cobre uma grande parte do sol Se mudarmos a cor desse círculo vermelho para a mesma cor do fundo, obteremos a forma da lua. Eu vou voltar e fazer isso rapidamente. E agora, ao clicar no mergulho solar, você pode ver todo mundo. Ela se transforma em forma de lua e toda a cena se transforma em uma cena noturna, nos dando o efeito exato que queremos. 125. banner animado de site usando javascript: Olá pessoal, bem-vindos a mais uma nova lição do nosso curso. Nesta lição, vamos criar esse efeito. Você pode ver que temos um grande texto flutuando na página dentro desse círculo que o circunda No fundo, temos esse grande número de estrelas que brilham e se movem lentamente, nos dá esse efeito muito legal Criaremos essas estrelas automaticamente usando Javascript. Vamos começar dentro do meu HTML. Vou adicionar uma seção e , dentro dela, adicionarei um H dois e direi bem-vindo ao nosso. Em seguida, adicionarei uma tag BR, depois um intervalo e direi. Em seguida, vou para o meu CSS, direciono a seção e adiciono Display, Flex, Justify, Content Center, Align items, altura central, fundo de 100 VH, essa cor azul marinho Então, para criar o círculo ao redor do texto, usaremos o pseudo-elemento B quatro desta seção Vou selecionar isso e adicionar conteúdo: sequências vazias, posição absoluta com 30 VW de altura 30 V também Em seguida, borda cinco, B sólido. Essa cor laranja. Então raio da borda 50% Agora você pode ver que temos esse círculo laranja no centro Vamos adicionar o anel branco ao redor. Vou adicionar box shadow 0001v como uma propriedade de propagação e, em seguida, a mesma cor azul marinho do plano de fundo Então eu vou duplicar isso e mudar a propagação para 1,3 V, depois mudar a cor para branco E agora você pode ver que temos esse anel branco ao redor do círculo laranja. Ok, vamos adicionar alguns estilos ao título. Agora vou selecioná-lo e adicionar posição, tamanho absoluto da fonte oito, cor branca, espessura da fonte 400. Em seguida, envie um texto para o centro da linha, altura da linha dois, E M, índice z cinco, transforme a inclinação y menos sete graus. Agora você pode ver que temos o texto centralizado e inclinado um pouco no eixo y. Então, para ter a forma de texto que queremos, precisaremos adicionar alguma sombra de texto. Então, vou adicionar sombra de texto. Esse valor, se observarmos esse valor, está aumentando gradualmente os valores da sombra do texto de um pixel para cinco pixels com essa cor cinza claro. E como você pode ver, parece muito melhor. Tudo bem, vamos estilizar o espaço, que é a palavra site. Vou direcioná-lo e, em seguida, adicionar a espessura da fonte 700 para torná-lo mais ousado Em seguida, tamanho da fonte três, M. Finalmente sombra de texto, esse valor que contém um aumento no valor da sombra dividido em dez incrementos de um pixel para dez pixels São dez aumentos. Agora você pode ver que o H dois está exatamente do jeito que queremos. Agora é hora de criar a animação flutuante do H two. Vou criar uma nova animação. flutuando dentro dela em 0% e 100%, adicionarei inclinação de transformação de menos sete graus do jeito que está Em seguida, traduza y menos 20 pixels, vou duplicar isso E com 50% vou mudar a tradução para 20 pixels. Então eu vou até aqui e adiciono uma animação flutuante de 5 segundos, aliviando o infinito. Agora você pode ver o texto animado de cima para baixo e se movendo exatamente da maneira que queremos. Tudo bem, agora é hora de criar as estrelas no fundo. Faremos isso usando Javascript. Eu vou até lá e, em primeiro lugar, vou direcionar a seção dizendo let section equal document query seletor Então, abaixo disso, criarei uma nova variável chamada J e a definiremos igual a zero. Em seguida, criarei um loop while e direi que while j é menor que 200. Dentro do loop, criaremos as estrelas. Começarei criando uma nova variável chamada estrela e direi documento. Criar elemento, acabamos de criar uma tag. Em seguida, criaremos algumas variáveis que usaremos posteriormente. Para estilizar as estrelas, criarei uma variável chamada x e a definirei igual ao ponto matemático do piso matemático aleatoriamente vezes a largura da janela. largura da janela aqui retorna a largura interna da janela em pixels. Em seguida, pegamos esse valor e o multiplicamos pelo resultado do método matemático aleatório Que retorna um número maior ou igual a zero, menor que um. Em seguida, pegamos o resultado disso e o arredondamos para um número inteiro Usando o método do piso, usaremos qualquer valor que obtivermos daqui para posicionar as estrelas. Eu direi que o estilo de estrela à esquerda é igual a x pixels. Usaremos o valor x para posicionar as estrelas à esquerda. Então eu vou duplicar essas duas linhas de código. Altere o nome da variável para y e, em seguida, altere a largura da janela para a altura interna para obter um valor com base na altura da janela. Então aqui eu vou mudar da esquerda para cima e x para y. Então vamos criar a largura e a altura das estrelas. Vou criar uma nova variável, nomeá-la de tamanho e definir igual a um ponto matemático aleatoriamente vezes quatro. Em seguida, usaremos esse tamanho para definir a largura e a altura das estrelas. Eu direi estilo de ponto estrela, largura do ponto, um pixel plus size. Observe que devemos adicionar um aqui porque o valor do tamanho pode, na verdade, ser zero. Como a matemática aleatória aqui pode retornar 0,0 vezes quatro é zero. O tamanho nesse caso será zero e a largura será zero. Isso não é bom. Para evitar essa situação, precisamos adicionar uma aqui. Legal, vou duplicar isso e mudar a largura para a altura Agora que definimos o posicionamento e as dimensões das estrelas, vamos anexá-las à nossa seção Eu vou aqui e direi a seção anexar criança. E vamos acrescentar o elemento estrela. Então, no final do loop, diremos J plus, para que o loop continue criando elementos até que j aqui seja igual a 200, o que, por sua vez, criará 200 elementos. Agora, se formos inspecionar nossa página e direcionar a seção, você pode ver dentro dela temos todas essas marcas oculares que criamos Na verdade, existem 200 deles e todos eles têm estilos aleatórios, como você pode ver. Tudo bem, para vê-los na página, vamos ao nosso CSS e começar a estilizá-los. Vou selecionar as marcas oculares dentro da seção e adicionar a posição. Fundo absoluto, raio da borda branca 50% Agora você pode ver que as estrelas estão visíveis agora Tudo bem, vamos usar a propriedade box shadow para fazê-los brilhar Vou adicionar a sombra da caixa e, em seguida, adicionar esse valor no qual o valor do desfoque aumenta gradualmente Agora você pode ver que as estrelas estão brilhando. Tudo bem, agora vamos trabalhar no efeito de animação das estrelas. Vou criar uma nova animação com o nome de estrela. Então, dentro dela, com 0% da duração da animação, adicionarei opacidade Então, em 10%, adicionarei um de opacidade. Então eu vou duplicar isso. Aos 90%, deixarei a opacidade como está. Então, em 100% , vou voltar para zero. Então eu vou até aqui e adicionarei estrelas de animação. Linear, infinito. Como você pode ver, nada aconteceu porque não definimos a duração da animação. Vamos fazer isso usando Javascript para obter valores aleatórios para cada estrela. Vou entrar aqui dentro do arquivo Javascript e criar uma nova variável, nomeie-a como duração. E vamos defini-lo igual à matemática aleatoriamente vezes dois. Então, abaixo disso, adicionarei duração de animação em estilo estrela igual à duração de um segundo. Assim, todo mundo que você pode ver, as estrelas agora estão animadas, já que definimos uma duração de animação aleatória para cada uma delas aqui. 126. Animação de navegação de aba em javascript: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar essa guia de navegação simples. Você pode ver que temos esse círculo que tem esse sinal de mais dentro dele. Ao clicar nele, ele gira até que o sinal de mais se torne um sinal x. Além disso, essa navegação horizontal simples aparece. Observe que a navegação aparece em duas etapas. Primeiro, essa parte circular se move para baixo do círculo. Em seguida, ele se expande e se transforma no menu de navegação. Ao clicar novamente, o menu é retraído primeiro. Em seguida, a parte circular se move para o topo e desaparece. Além disso, temos esse espaço aqui que separa o círculo e a navegação Aprenderemos como criar isso. Isso provavelmente parece um exemplo simples, mas acredite, tem alguns truques muito legais. Vamos começar a criá-lo. Vou entrar aqui no meu HTML e adicionar um, dar a ele uma classe de navegação. Então, dentro dele, adicionarei outro div com uma classe de alternância Em seguida, vou para o meu CSS e direciono o div de navegação. Então, vou apenas adicionar a posição relativa. Então, abaixo disso, vou direcionar a classe de alternância e adicionar largura relativa da posição, 75 pixels 75 pixels também. Fundo desta cor rosa. Em seguida, ponteiro do cursor e, em seguida, vamos criar o ícone de adição dentro usando o pseudo-elemento anterior Vou direcioná-lo e adicionar conteúdo. O sinal de adição então posiciona tamanho absoluto da fonte três, cor EM branca. Em seguida, faça a transição de 1,5 segundos. Agora você pode ver que tínhamos esse sinal positivo. Tudo bem, para centralizar, vou entrar aqui dentro do tundlativo e adicionar display, Flex, justify, centro de conteúdo, uma linha, centro de itens, uma linha, centro de itens, Você pode ver que está centralizado. Agora, ao clicar nesse div, queremos que ele gire até que o sinal de mais se torne um x, como sempre Faremos isso alternando uma classe ao clicar na opção e estilizá-la com base Vou até meu arquivo de script Java e criarei uma nova variável, batizada de alternância Em seguida, atacarei rapidamente o div com a classe de alternância Então, abaixo disso, direi para adicionar ouvinte de eventos. Em seguida, criarei uma função de retorno de chamada. Dentro dela, direi alternar lista de classes, Alternar e uma classe Alternar e Agora, cada vez que clico no div de alternância, aqui você pode ver uma classe chamada ativa adicionada e, em seguida, removida do div de Tudo bem, então eu vou voltar para o meu alvo CSS, o Toggle Div Quando ele contém uma classe chamada ativa, selecionarei o pseudoelemento B fore, que é o sinal de adição Vou adicionar a rotação de transformação de 225 graus. Agora, quando eu clico no botão de alternância di, você pode ver que o sinal de mais gira e se torna um x, já que a classe ativa foi adicionada Então, ao clicar novamente, a classe ativa é removida e, portanto, o código aqui não está funcionando. É por isso que o x gira novamente para um sinal de mais. Ok, vamos trabalhar no menu que aparece ao clicar no botão de alternância Vou para o meu HTML e, abaixo do div de alternância, adicionarei outro div com uma Agora temos dois divs dentro do div de navegação. Em seguida, vou ao meu CSS e seleciono o menu div. Em seguida, adicione 60 pixels de largura. Altura de 60 pixels também. Em seguida, fundo branco. Agora você pode ver que temos esse fundo branco. Agora vou até aqui dentro do div de navegação e adicionarei display Flex, Justify Content Center, Align Items Center Agora você pode ver que eles estão sentados um ao lado do outro. Queremos posicionar o fundo branco em relação ao piquin Como o pinkue tem um valor de posição relativo, entrarei aqui no menu e adicionarei a posição absoluta E, como você pode ver, agora está posicionado em relação ao fundo rosa Ok, eu também adicionarei o raio da borda de 50%. Em seguida, adicionarei transform translate y negative 30 pixels para deslocá-lo para o topo Em seguida, subo até aqui dentro do botão, mergulharei e adicionarei um raio de borda Em seguida, transforme translate Y negativo em 30 pixels também. Para fazer com que o círculo rosa apareça em cima do branco, adicionarei um índice dez. OK. Agora, ao clicar no botão de alternância, queremos mostrar o menu novamente Vou até aqui e direcionarei o toggle div quando ele tiver uma Vou selecionar o menu de mergulho usando esse seletor que seleciona os irmãos dos Então, dentro disso, adicionarei largura de 360 pixels, 70 pixels. Em seguida, transforme translate Y zero para que ele retorne à sua posição. Agora, quando clico no botão de alternância div, você pode ver que o menu aparece aqui com essa nova largura Ok, queremos que o menu apareça sem problemas. Vou voltar aqui dentro do menu div e adicionar a transformação de transição de 0,5 segundos. Com 0,5 segundos, então altura de 0,5 segundos também. Você pode estar se perguntando por que não usamos apenas 0,5 segundo para todas as propriedades. Mas, em vez disso, fizemos o que fizemos para facilitar o controle do atraso de transição de cada propriedade e nos ajudar a criar nosso efeito. Para entender isso, vou aqui e adicionarei atraso de transição de 0 segundos para a propriedade de transformação. Essa linha aqui ocorrerá imediatamente ao clicar no botão de alternância. Em seguida, 0,5 segundos para a propriedade de largura e 0,5 segundos para a altura também. Agora, quando eu clico no mergulho emaranhado, você pode ver o círculo se mover primeiro para baixo Então, sua largura e altura aumentam ao mesmo tempo, dando o efeito que queremos. Mas ao clicar novamente, tudo desmorona ao mesmo tempo Podemos deixar como está ou adicionar alguns atrasos na transição para torná-la mais agradável. Vamos tentar isso. Vou entrar aqui dentro do menu div e adicionar atraso de transição de 1 segundo para a transformação e, em seguida, 0,5 segundo para a largura e altura Quando a classe ativa for removida, essa propriedade de atraso de transição será aplicada. A largura e a altura esperarão 0,5 segundos antes de encolher e, em seguida, a transformação ocorrerá depois disso, exatamente como você pode ver aqui Agora, queremos criar a parte que separa o Toggle dive e Vou subir até aqui dentro do mergulho do Toggle e adicionar borda de dez pixels sólidos e da mesma cor do corpo Agora você pode ver que as duas partes estão separadas usando essa borda. Tudo bem, agora vamos adicionar os ícones que devem aparecer no menu. Vou ao site de ícones de íons que usamos em uma lição anterior e, em seguida, clicarei em Uso. Venha aqui e copie esse código. Em seguida, cole-o no meu HTML antes do final da tag body. Em seguida, dentro do menu div, adicionarei um U, L, depois um L I dentro dele e adicionarei o estilo I igual a 0,1 segundos. Usaremos essa variável na propriedade de atraso de transição e, em seguida, adicionarei uma tag âncora Então eu vou duplicar isso cinco vezes. Eu farei o terceiro LI. Só precisaremos dele para fins de estilo. Também mudarei a variável para 0,2 segundos na segunda LI e também na quarta LI. Em seguida, vou ao site dos ícones e procuro a página inicial, copio o código. Volte e cole aqui dentro da primeira etiqueta âncora. Em seguida, pauso a gravação e adiciono rapidamente os outros ícones Agora você pode ver que adicionamos os outros ícones e eles estão aqui no navegador. Tudo bem, vamos ao nosso CSS e selecione o UL dentro do menu. Adicione posição, exibição relativa, flexione, justifique o conteúdo, centralize um centro de itens de linha e, em seguida, separe 35 pixels Finalmente, altura da linha 80 pixels. Em seguida, selecionarei o L I dentro do UL e adicionarei o estilo de lista, sem cursor, ponteiro, transforme traduza Y menos 30 pixels Em seguida, adicionarei a transição de 0,25 segundos, depois a opacidade zero e, finalmente, o atraso de transição var I. Em seguida, direi quando o div de alternância tiver uma classe ativa ou, em outras palavras, quando clicarmos no div de alternância, eu os selecionarei Então, dentro disso, adicionarei opacidade, uma transformação, traduzirei Y zero pixels. Como você pode ver, ao clicar no botão de alternância, os ícones aparecem aqui, mas queremos que eles apareçam somente depois que o menu aparecer Vou voltar aqui e adicionar atraso de transição, calcular 0,75 segundos mais a variável Vai demorar um pouco, assim como você vê aqui. Ok, vamos estilizar esses ícones bem rápido. Primeiro, queremos adicionar algum espaçamento aqui no centro. Selecionarei o terceiro filho dos itens da lista que esvaziamos. Em seguida, adicionarei 30 pixels de largura. Em seguida, vou direcionar as tags de ancoragem dentro da LI e adicionar o tamanho da fonte do bloco de exibição 1.7 EM, decoração de texto n e, finalmente, colorir essa cor cinza abaixo dela. Ao passar o mouse sobre o LI, selecionarei a etiqueta de âncora e adicionarei nossa cor rosa Agora você pode ver que os ícones estão muito melhores e, ao passar o mouse sobre eles, a cor muda para rosa Com isso, pessoal, terminamos esse efeito bacana. Espero que você aprenda algumas dicas legais com isso, e nos vemos na próxima. 127. mover uma imagem de fundo com rolagem usando javascript: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse efeito. Você pode ver que temos esse conteúdo no centro e esse plano de fundo. Quando rolamos a página, você pode ver o fundo se mover da esquerda para a direita. Ao rolar para cima, ele se move para trás da direita para a esquerda. Esse é um efeito muito legal que você pode usar em seus projetos. Vamos ver como podemos fazer isso. Vou começar aqui no meu HTML e adicionar uma div. Dê a ele uma classe de BG. Então, abaixo disso, adicionarei outra div com uma classe de conteúdo Então, dentro dele, adicionarei um H dois, digamos Plano de fundo, movendo a rolagem. Então, abaixo disso, adicionarei um parágrafo e adicionarei este texto. Em seguida, vou para o meu CSS e direcionarei o Div com a classe BG Em seguida, adicione a posição fixa e, em seguida, o zero superior esquerdo, zero de largura, 100% de altura e 100% de URL de fundo. Em seguida, adicionaremos a imagem padrão. Em seguida, adicionarei a repetição da rodada. Repita o tamanho do plano de fundo, 700 pixels. Agora você pode ver que a imagem de fundo está exatamente como queremos. Em seguida, vou direcionar o div com a classe de conteúdo e adicionar largura relativa da posição de 1.000 pixels Em seguida, coloque uma margem de 100 pixels na parte superior e inferior e automaticamente na esquerda e na direita. Em seguida, adicionarei um índice, preenchimento branco de fundo, 50 pixels Em seguida, box shadow 010 pixels, 30 pixels, R Gb00 00.1 Tudo bem, então vou direcionar o H dois dentro da div de conteúdo e adicionar o tamanho da fonte dois M e, em seguida, seguida Em seguida, vou direcionar os parágrafos dentro do div de conteúdo e adicionar tamanho de fonte 1,2 M, altura da linha 1,6 M. Tudo bem, vamos para o arquivo Javascript e começar criando uma nova variável, chamando-a de padrão e direcionando o div BG dentro Então, abaixo disso, direi janela. Adicione um ouvinte de eventos. E eu vou ouvir o evento Scroll. Em seguida, criarei uma função de retorno de chamada. Dentro disso, direi posição do plano de fundo do estilo padrão e definirei isso como igual à rolagem da janela em pixels. O que isso fará é que, quando rolarmos a página, a propriedade da posição de fundo aumentará um valor igual à distância de rolagem y. Vamos tentar isso. Você pode ver que, ao percorrer a página, a imagem de fundo está se movendo enquanto rolamos e, quando rolamos para cima, ela se move na direção inversa 128. Efeito de foco e desfoque no texto: Olá pessoal. Bem-vindo a outra nova lição do curso. Nesta lição, vamos criar esse belo efeito. Você pode ver que temos esse título no centro e um fundo desfocado na parte Ao passar o mouse sobre o título, esse efeito acontece. O título fica maior e fica desfocado, enquanto o fundo se move para trás e fica claro Quando passamos o mouse para longe, o título volta ao foco novamente enquanto o fundo retorna ao estado desfocado Esse é um efeito muito legal e realmente simples. Vamos ver como podemos criá-lo. Vou entrar aqui no meu HTML e adicionar uma seção. Então, dentro dele, adicionarei um H dois e direi foco. Então, abaixo disso, adicionarei uma imagem. Basta adicionar nossa imagem. Isso é tudo para o HTML. Vamos ao nosso CSS e direcionar a seção, a posição de adição, largura relativa, 100% de altura, 100 VH para ocupar a altura total do corpo Em seguida, exiba Flex, justify, content Center, Align Então, finalmente, transborde escondido. Em seguida, vou direcionar a imagem e adicionar posição, largura absoluta 140%, altura 140%, parte superior negativa 20% e esquerda negativa 20% também Então, para ter esse efeito desfocado na imagem, adicionaremos desfoque de filtro de dez pixels Então, finalmente, adicionarei a transição de 2 segundos. Agora você pode ver que a imagem está embaçada, exatamente como queremos. Ok, vamos voltar e mirar nos dois. Em seguida, adicione a cor relativa da posição. Fonte branca de tamanho dez, texto EM transformado em maiúscula, depois sombra de texto de 05 pixels, 25 pixels e, em seguida, essa cor. Em seguida, adicionarei a espessura da fonte 800 para que o título apareça na frente da imagem. Adicionaremos um índice dois. Finalmente, transição de 2 segundos Agora você pode ver que temos nosso rumo. Ok, vamos trabalhar no efeito de flutuação do título. Direi que, ao passar o mouse sobre o título, adicionarei desfoque de filtro de dez pixels Então, abaixo disso, adicionarei escala de transformação 1.2. Agora você pode ver que, quando eu passo o mouse sobre esse título, esse efeito acontece Ele fica maior e embaçado graças ao código, nós o adicionamos aqui Depois de terminar o título, vamos criar o efeito flutuante da imagem de fundo Direi que, ao passar o mouse sobre a imagem, selecionarei a imagem usando esse seletor, que nos faz selecionar os irmãos do Nesse caso, a imagem é irmã dos H dois. Em seguida, adicionarei o zero superior, zero esquerdo, largura 100%, altura 100% finalmente , filtrarei o desfoque de zero pixels E agora você pode ver que, quando passamos o mouse sobre o título, a imagem fica menor, pois reduzimos sua altura e largura de 140% para 100%. Além disso, o efeito desfocado desapareceu, pois o alteramos para zero em vez Isso acontece junto com o efeito de cabeçalho, nos dando o efeito exato que queríamos. 129. Foco no texto e efeito de desfoque: Olá a todos. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse efeito de texto interessante. Você pode ver que temos esse texto que está embaçado. Quando passamos o mouse sobre qualquer letra da palavra, a letra entra em foco e podemos vê-la claramente Além disso, temos essas quatro bordas ao redor das letras que aparecem ao passar o mouse e desaparecem ao se afastar Vamos começar e ver como podemos criar esse efeito. Vou entrar aqui no meu HTML e adicionar um H dois. Então, dentro dele, adicionarei uma extensão, uma etiqueta dentro dessa extensão. Usaremos essa tag para criar as quatro bordas ao redor de cada letra. Em seguida, adicionarei a primeira letra. Depois, copiarei e colarei isso quatro vezes e mudarei as letras para formar a palavra foco. Então eu vou para o meu CSS e tenho como alvo o corpo. Em seguida, adicione Display Flex, Justify, content, Align items center in height Em seguida, adicionarei um gradiente linear de fundo de 45 graus, essa cor azul a essa cor amarela Agora você pode ver que tínhamos esse gradiente de cor bacana. Então, abaixo disso, vou direcionar o H dois e adicionar posição relativa da tela, espaço flexível 15 pixels, a fim de separar as letras por 15 pixels Em seguida, pinte a fonte branca tamanho quatro, E, M, ponteiro do cursor Então, finalmente, o texto transforma em maiúsculas. Então, abaixo disso, vou direcionar os vãos dentro do H dois e adicionar a posição relativa Agora vamos criar as quatro bordas ao redor das letras. Faremos isso usando o elemento dentro dos vãos. Vou focar nos quatro pseudoelementos do conteúdo adicionado. vazias, posição absoluta w, dois pixels de altura, oito pixels, fundo branco Agora você pode ver que temos essa pequena linha branca no canto superior esquerdo de cada letra. Vamos continuar. Vou voltar e adicionar a zero, menos cinco pixels à esquerda. Agora, depois de criar a linha vertical, vamos criar a linha horizontal. Vou selecionar o pseudo-elemento posterior do elemento e adicionar conteúdo: cadeias de elemento e adicionar conteúdo caracteres vazias (posição absoluta) com oito pixels de altura, dois pixels, fundo branco Em seguida, adicionarei o zero superior esquerdo, menos cinco pixels. Agora você pode ver que temos essa linha horizontal. Ao fazer isso, criamos o canto superior esquerdo. Vamos agora criar os outros três cantos. Faremos isso duplicando essa borda superior esquerda usando a propriedade box shadow Vou entrar aqui dentro do pseudo-elemento anterior e adicionar sombra zero da caixa como valor horizontal, 53 pixels como valor vertical e branco Agora você pode ver que temos essa linha vertical no canto inferior esquerdo. Vamos criar sua linha vertical. Vou copiar isso. Cole aqui e altere 53 pixels para 60 pixels. E agora você pode ver que duplicamos a borda no canto superior esquerdo até o canto inferior esquerdo Tudo bem, adicionarei rapidamente os outros valores de sombra da caixa. Vou aqui e adicionarei 37 pixels como valor horizontal, 53 pixels como valor vertical e branco. Então, aqui vou adicionar 30 pixels como valor horizontal e 60 pixels como valor vertical, branco. Agora você pode ver que temos a borda no canto inferior direito. Vamos também adicionar a borda final no canto superior direito. Vou aqui e adicionarei 36 pixels como valor horizontal, zero como valor vertical e branco. Em seguida, abaixo, adicione 30 pixels como valor horizontal, zero como valor vertical e branco. Agora você pode ver que as quatro bordas estão exatamente do jeito que queremos. Criamos todos eles usando a propriedade box shadow. Vamos criar o efeito flutuante. Agora. Vou aqui e adicionarei opacidade aqui também Então eu vou aqui e digo que, ao passar o mouse sobre os vãos, selecionarei o pseudo-elemento anterior do elemento Também farei o mesmo com o pseudoelemento after e adicionarei um de opacidade Agora você pode ver que as quatro bordas estão ocultas e, quando passamos o mouse sobre qualquer letra, você pode vê-las aparecerem novamente. Agora vamos trabalhar no efeito de desfoque. Vou entrar aqui dentro dos vãos e adicionar desfoque de filtro, cinco pixels. Então, abaixo disso, direi que, ao passar o mouse sobre os vãos , adicionarei o desfoque do filtro zero filtro Agora, quando eu passo o mouse sobre qualquer letra, você pode ver que a letra sobre a qual passamos o mouse entra em foco e fica muito clara Finalmente, vamos adicionar algumas transições. Vou entrar aqui dentro dos intervalos e adicionar a transição de 0,5 segundos. Então, aqui, ao passar o mouse, adicionarei a transição de 0 segundos, para que a transição aconteça somente ao passar o mouse longe das letras, não ao passar o mouse sobre elas, como você vê É isso aí, todo mundo que você pode ver, criamos esse efeito muito simples, mas muito legal. 130. Efeito de animação glassmorfismo criativo: Olá pessoal, bem-vindos a mais uma nova lição do curso. Nesta lição, vamos criar essa animação bacana de morfismo de vidro Você pode ver que tínhamos esse círculo semitransparente no centro Temos um quadrado vermelho e um círculo branco que se movem pelo círculo semitransparente Se focarmos apenas no círculo branco aqui, você pode ver que ele se move da esquerda para a direita atrás do círculo semitransparente e fica embaçado ao cruzar o Ao voltar da direita para a esquerda, ele se move na frente do círculo semitransparente e se torna visível novamente. Isso também acontece com o quadrado vermelho. Mas o momento é diferente. Esse é um exemplo muito legal. Vamos começar a criá-lo. Vou entrar aqui dentro do meu HTML e adicionar um Di e dar a ele uma classe de carregador Então, dentro dele, adicionarei três vãos. Usaremos essas extensões para criar as três formas diferentes em nosso efeito Em seguida, vou ao meu CSS e seleciono Body Add, Display, Flex, Justify, centro de conteúdo, Align items, centro em altura, 100 VH, o fundo, essa Em seguida, selecionarei a unidade do carregador que contém os três vãos e adicionarei largura relativa da posição, 150 pixels Altura 150 pixels. Em seguida, uma cor de fundo vermelha temporária. Agora você pode ver que temos esse quadrado vermelho no centro da janela. Tudo bem, vamos voltar e selecionar os vãos dentro do carregador Mergulhe e adicione a posição absoluta para posicioná-las em relação à div do carregador A largura 100% altura 100% ocupa toda a largura e altura do mergulho da carregadeira Em seguida, uma cor de fundo azul temporária. Agora você pode ver que temos esse quadrado azul que está cobrindo o vermelho. Na verdade, esses são três quadrados azuis. Não um, mas eles estão empilhados um em cima do outro. Depois, vou voltar aqui e adicionar o raio da borda 50% para transformar esses três vãos em um círculo, como você vê Tudo bem, agora vamos trabalhar no círculo semitransparente no centro Vou selecionar o primeiro filho dos vãos e adicionar um fundo, essa cor semitransparente, para vê-lo claramente Eu vou até aqui e removerei esse fundo azul, esse fundo vermelho. Agora você pode ver que temos esse círculo semitransparente. Ok, vamos trabalhar no quadrado vermelho que se move ao longo do círculo semitransparente Agora vamos criá-lo usando o segundo intervalo dentro do div do carregador Vou focar nisso e adicionar o fundo, nossa cor vermelha, depois o raio zero da borda para formar um quadrado Novamente, já que fizemos todos os círculos de extensão adicionando raio da borda de 50% aqui dentro do seletor de extensão Agora você pode ver que temos esse quadrado vermelho que cobre o círculo semitransparente Tudo bem, vamos criar o efeito de morfismo de vidro para o círculo semitransparente Vou até aqui e adicionarei desfoque do filtro de fundo, dez pixels, depois um índice dois para que cubra o fundo vermelho para ver o efeito claramente. Vou entrar aqui dentro do fundo vermelho e adicionar transform translate negative 50 pixels e menos 50 pixels e Agora você pode ver que a parte do quadrado vermelho que está atrás do círculo está embaçada e o círculo agora tem uma forma de morfismo de vidro Tudo bem, vamos voltar e remover isso. Então, vamos trabalhar no efeito de animação do quadrado vermelho. Vou criar uma nova animação, chamá-la de animar dentro dela Com 0% da duração da animação, adicionarei transform translate negative 150 pixels no eixo x e 50 pixels no eixo y. Em seguida, escale 0,4 para torná-lo menor. Então, finalmente, gire zero graus. Em seguida, copiarei isso, colarei e com 50% da duração da animação. Vou alterar a propriedade de tradução para 150 pixels no eixo X e menos 50 pixels no eixo Y. Então, ele se moverá para o lado superior direito. Também alterarei o grau de rotação para 180 graus, para que ele gire enquanto se move pelo círculo Então, finalmente, abaixo disso, com 100% da duração da animação, vou movê-la de volta à sua posição original. E vou mudar a rotação para 360 graus. Tudo bem, vou subir aqui dentro do quadrado vermelho e adicionar animação animada de 4 segundos como duração da animação Então, entre com facilidade e infinito. Agora você pode ver o quadrado vermelho animado e se movendo pelo círculo semitransparente E você pode ver que quando ele cruza o círculo, fica embaçado à medida que se move atrás dele Agora, quando ele retornar, queremos que fique visível novamente no topo do círculo, não embaçado Então, podemos fazer isso indo aqui no início da animação e adicionando o índice Z um. Então, com 50%, também o definiremos como um. O que isso fará é deixar o quadrado vermelho embaçado na primeira metade da animação Então eu copiarei tudo isso. Cole-o e, com 50.000 1%, mudarei o índice Z para três Além disso, em 100%, adicionarei o índice Z três. O que isso fará é fazer o quadrado vermelho apareça no topo do círculo, não fique embaçado durante a segunda metade da animação, exatamente como você vê Está embaçado na primeira metade, pois o índice Z é um, que é menor que dois, o valor do círculo Não fica embaçado na segunda metade, pois tem um valor de índice Z de três, que é maior que o do círculo. Legal. Agora, depois de entender isso, podemos criar facilmente o círculo branco que também se move pelo círculo semitransparente Vou apenas copiar o círculo vermelho. Cole e selecione a terceira extensão. Em seguida, mudarei a cor do fundo para branco e a removerei, para que ainda seja um círculo. Agora você pode ver que temos esse círculo branco que se move junto com o quadrado vermelho. Vamos aqui e adicionar um atraso na animação. Negativos 2 segundos. Escolhemos 2 segundos porque é metade da duração da animação, que é de 4 segundos. Para que os dois vãos se cruzem com um tempo perfeito Assim como você vê aqui quando um deles está à esquerda, o outro está à direita, e eles se encontram no centro, nos dando esse efeito de morfismo de vidro muito legal 131. Efeito de hover de cartão empilhado: Olá pessoal. Bem-vindo a esta nova lição do nosso curso. Nesta lição, vamos criar esse efeito em que temos três cartas empilhadas umas sobre as outras, dentro desse círculo E ao passar o mouse sobre qualquer um deles, eles aparecem aqui, um ao lado Então, vamos começar a criar esse exemplo. Vou entrar aqui no meu HTML e adicionar um div com a classe do contêiner Então, dentro dele, adicionarei outro div com a classe do cartão Também adicionarei estilo, declararei uma variável, vamos definir seu valor como menos um Em seguida, copiarei e colarei duas outras divs com a mesma classe e apenas alterarei o valor da variável para 0,1. Em seguida, irei para o meu CSS Selecione o corpo e adicione Display Flex, Justify, Content center, Align items, altura mínima, fundo de 100 VH, fundo de 100 VH, essa cor roxa escura e faça Então, abaixo disso, vou direcionar o pseudo-elemento anterior do corpo para criar o grande círculo e adicionar conteúdo As cordas vazias posicionam o zero absoluto , zero esquerdo, largura, 100%, altura, 100%, índice z, menos dois fundos, essa transição de cor amarela é de 0,5 segundos. Agora você pode ver que temos um fundo amarelo que está preenchendo toda a janela. Já que sua altura e largura são 100% do corpo. Vamos voltar e fazer disso um círculo. Vou adicionar um círculo de trajetória de clipe de 250 pixels como raio. Em seguida, no centro, como sua posição. Agora você pode ver que a única parte mostrada do fundo amarelo é esse círculo no centro. Em seguida, vou direcionar o div do contêiner que está agrupando todos os três cartões, adicionarei a largura relativa da posição 1.100 pixels, altura 400 pixels e um fundo vermelho temporário Agora você vê esse fundo vermelho que está no topo do círculo amarelo. Ok, vamos selecionar as cartas. Vou direcionar os divs com uma classe de cartão e adicionar largura 300 pixels e altura de 400 pixels Plano de fundo, posição branca absoluta para calcular 50% -200 pixels Para que fique centralizado verticalmente. Em seguida, 50% à esquerda e raio de borda de dez pixels. Então, para centralizá-lo horizontalmente, adicionaremos transform translate x negative 50%. Agora você pode ver que as cartas estão dentro do fundo vermelho, mas estão empilhadas umas sobre outras e é por isso que aparecem como Mas vamos voltar e ver nossas três cartas. Vou aqui e adicionarei translate Y 50 pixels vezes a variável. Lembro-me de que os valores das variáveis são -10,1. Isso significa que a primeira carta se moverá para o topo ao longo do eixo y em 50 pixels, pois seu valor será negativo uma vez 50, o que é menos 50 Além disso, o segundo permanecerá como está, pois seu valor será zero vezes 50, que é zero. Finalmente, a terceira carta se moverá para baixo em 50 pixels. Tudo bem, vamos também adicionar rotação de 40 graus para todas as três cartas Agora você pode ver que as três cartas estão giradas e a primeira foi movida para o topo O segundo está no centro e o terceiro está na parte inferior. Assim como expliquei, vamos remover rapidamente nosso fundo vermelho. Vamos também voltar e adicionar inclinação de menos 20 graus no eixo x e menos dez graus no eixo y. Então, finalmente, escala 0,6 Agora você pode ver que quase temos o efeito que queremos. A única coisa que resta agora é adicionar um pouco de sombra na caixa para separar as cartas. Vou adicionar sombra de caixa de 25 pixels, 20 pixels, 100 pixels, essa cor cinza. E agora eles estão separados. Mas, como você pode ver, a terceira div está no topo, depois a segunda, depois a primeira, mas o contrário. Queremos que a primeira div esteja no topo, depois a segunda e depois a terceira Podemos fazer isso facilmente usando a propriedade do índice Z. Vou voltar e adicionar um índice negativo uma vez a variável da primeira div, que será menos uma vezes menos um, que será um para a segunda, será zero para a terceira, será menos uma vezes um, que é menos um Ele terá o menor índice z e estará na parte inferior da pilha, como você pode ver aqui Então, finalmente, adicionarei a transição de 0,5 segundos. Vamos adicionar um pouco de transparência à segunda e terceira cartas para que elas tenham um bom efeito de três D. Selecionaremos a segunda carta e adicionaremos a opacidade 0,8 , depois a terceira carta e alteraremos a opacidade para 0,6. Agora você pode ver que elas parecem Tudo bem, vamos trabalhar no efeito flutuante. Agora vou aqui e digo que, ao passar o mouse sobre o contêiner, que lembra o fundo amarelo, vou mirar que lembra o fundo amarelo, nas cartas e adicionar a posição absoluta z, índice um, opacidade um Em seguida, transforme translate x negative 50% e isso substituirá todas as transformações que vimos acima aqui E só aplique essa função de translação aqui, a rotação, a inclinação, tudo isso será removido E isso significa que as cartas serão empilhadas umas sobre as outras, novamente, como você vê aqui Ok, agora queremos adicionar algum espaçamento entre eles. Digamos que queremos adicionar 350 pixels entre cada cartão. Podemos voltar aqui e somar, então, ao lado desses 50% negativos, adicionaremos mais calc 350 pixels vezes a variável E o que isso fará com todos é adicionar 350 pixels negativos ao primeiro cartão, zero ao segundo cartão, que ele permaneça em sua posição e 350 pixels ao terceiro cartão. E isso, em troca, separará cada um deles por 350 pixels, exatamente como você pode ver aqui. Agora é hora de adicionar conteúdo a esses cartões. Vou voltar ao meu HTML dentro do div do cartão e adicionar outro div com uma classe de conteúdo Vou adicionar estilo. Em seguida, adicionarei uma variável J com o valor um. Então, dentro desse div, adicionarei um H dois e direi o cartão um Em seguida, adicionarei um parágrafo e adicionarei algum texto dentro dele. Em seguida, copiarei esse conteúdo Div, colarei novamente e alterarei a variável J para dois e o cartão um para o cartão dois Então eu vou colar aqui também. E mude J para três e a carta um para a carta três. Você pode ver que temos o conteúdo aqui dentro dos três cartões. Vamos ao nosso CSS. Vou entrar aqui dentro do carro e adicionar display, Flex, centro de conteúdo Justify, uma linha, centro de itens E agora você pode ver que o conteúdo está centralizado dentro do carro Div. Vamos continuar. Selecionarei o conteúdo e adicionarei preenchimento relativo à posição, 25 pixels de cor cinza escuro, transição de 0,5 segundos e opacidade zero Então, abaixo disso, direi que ao passar o mouse sobre o contêiner Div, vou direcionar o conteúdo e adicionar Em seguida, o atraso de transição é de 0,2 segundos vezes a variável J. O primeiro div de conteúdo terá um atraso de transição de 0,2 segundos. O segundo será atrasado em 0,4 segundos. E o terceiro será atrasado em 0,6 segundos, como você pode ver aqui. Com isso, terminamos esta lição. Espero que tenham gostado e nos vemos na próxima. 132. Efeito de mouse de button de 4 linhas usando CSS: Ei, aí pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de passar o mouse sobre o botão Você pode ver que o botão tem quatro linhas ao redor. E quando passamos o mouse sobre ela, as quatro linhas se juntam e encolhem até desaparecerem Em seguida, esse fundo brilhante aumenta até cobrir o botão Aprenderemos como podemos criar esse brilho de fundo usando a propriedade box shadow Vamos começar. Começarei aqui no meu HTML adicionando um div e atribuindo a ele uma classe de contêiner Então, dentro disso, adicionarei uma etiqueta de âncora. Então, dentro dele, adicionarei quatro extensões para as quatro linhas. Eu vou até aqui e digo Button. Em seguida, copiarei essa tag âncora e a colarei novamente para criar outro botão Então eu vou para o meu CSS. Começarei adicionando alguns estilos gerais de redefinição. Vou adicionar margem zero, preenchimento, tamanho de caixa zero, caixa de borda, família de fontes, areias, Em seguida, vou direcionar o corpo e adicionar display Flex, justify, centro de conteúdo para centralizar div do contêiner horizontalmente Em seguida, adicionarei itens de linha e centralizarei verticalmente. Em seguida, adicionarei a altura mínima, 100 VH. Então, finalmente, coloque de fundo essa cor cinza escuro. Em seguida, vou direcionar o div do contêiner e adicionar display Flex para controlar o alinhamento dos botões. Em seguida, adicionarei uma lacuna de 150 pixels para separar os botões. Finalmente, flexione, embrulhe, embrulhe. Agora vou direcionar as etiquetas de ancoragem e adicionar posição em relação à posição das quatro linhas em relação à etiqueta âncora Em seguida, adicionarei decoração de texto sem transformação de texto, preenchimento em maiúsculas, 20 pixels da parte superior e inferior e 35 pixels da esquerda e da direita Em seguida, adicionarei uma borda sólida de dois pixels. Essa bela cor azul, depois pinte nossa fonte de cor azul fonte de cor tamanho de 20 pixels. Espaçamento entre letras de quatro pixels, finalmente transição de 0,5 segundos. Agora você pode ver que os botões estão muito mais bonitos. Agora, ao passar o mouse sobre os links, queremos alterar a cor do texto para branco e remover as bordas Vou direcionar o link ao passar o mouse sobre ele. Vou adicionar a cor branca para alterar a cor do texto para branco em vez de azul. Em seguida, adicionarei uma borda, dois pixels sólidos e transparentes para remover a borda. Agora você pode ver que, quando passamos o mouse sobre os links, obtemos o efeito que queremos Agora vamos criar as quatro linhas que cercam os links usando os quatro espaços que criamos dentro de cada Vou direcionar os vãos dentro dos links e adicionar posição absoluta para posicioná-los em relação aos links E controlaremos cada um deles individualmente. Em seguida, adicionarei o fundo, nossa cor azul. Agora vamos focar no primeiro e no terceiro trechos. Eu vou dizer que abranja a enésima criança uma, depois a enésima criança três Vou adicionar largura 40 pixels, altura quatro pixels. Essas serão as linhas horizontais. Em seguida, copiarei isso, colarei e direcionarei o segundo e o quarto intervalos. Em seguida, alterarei a largura para quatro pixels e a altura para 40 pixels. Então, essas serão as linhas verticais. Agora você pode ver as linhas aparecerem aqui, mas elas estão empilhadas umas sobre as outras Vamos voltar e controlar a posição deles. Vou até aqui e vou escolher o primeiro filho e adicionar os 50% superiores menos dois pixels Para que a primeira linha seja centralizada verticalmente. Em seguida, para movê-lo para a esquerda do link, adicionaremos 50 pixels negativos à esquerda. Em seguida, adicionarei a transição de 0,5 segundos. Relaxe. Agora você pode ver que a primeira linha está posicionada à esquerda do link Tudo bem, agora, ao passar o mouse sobre o link, queremos que essa primeira linha volte para o centro do link e diminua Ao mesmo tempo, eu vou até aqui. E ao passar o mouse sobre o link, vou mirar na primeira linha e adicionar 50% à esquerda para movê-la de volta ao centro Também adicionarei escala de transformação x zero, para que a linha encolha enquanto volta para o centro Agora, ao passar o mouse sobre o link, você pode ver a primeira linha voltar para o centro enquanto Para fazer a linha encolher para o lado esquerdo, vou aqui e adicionarei a origem da transformação à esquerda Agora, ao passar o mouse para longe do link, queremos que a linha espere um pouco antes de voltar para sua posição Vou entrar aqui dentro do bloco CSS de primeira linha e adicionar um atraso de transição de 0,25 segundos. Então, ao passar o mouse sobre o link, adicionarei um atraso de transição de 0 segundos Para que o atraso aconteça somente ao passar o mouse para longe do link, não ao passar o mouse sobre Tudo bem, agora temos uma coisa que resta: adicionar pouco de sombra à linha para obter esse belo efeito de brilho Voltaremos aqui dentro de todos os espaços e adicionaremos a sombra 00 da caixa, valor de desfoque de dez pixels e a cor da nossa cor azul Em seguida, copiarei esse valor, colarei quatro vezes aumentarei gradualmente o valor do desfoque para cada valor É assim que podemos obter esse efeito embaçado, como você vê Ok, agora vamos fazer o mesmo com as outras três linhas. Eu vou aqui e copiarei isso. Cole três vezes. Então eu vou mirar na terceira linha. Mude da esquerda para a direita porque queremos que ela seja posicionada no lado direito Em seguida, mudarei a origem da transformação para a direita em vez de para a esquerda. Eu também vou mudar da esquerda aqui para a direita. Agora você pode ver que a terceira linha está posicionada à direita do link Ao passar o mouse sobre o link, ele volta para o centro e Ok, agora vamos mirar na segunda linha. Queremos centralizá-lo horizontalmente, não verticalmente. Então, vamos mudar o topo aqui para a esquerda. E mudaremos da esquerda aqui para o topo para movê-lo para o topo acima do link. Também mudaremos a origem da transformação para o topo. Quando recarregamos a página, você pode ver que ela agora está posicionada acima dos links Agora vamos voltar e continuar o efeito de flutuação. Vou até aqui e vou mirar na segunda linha e mudar da esquerda para o topo. Em seguida, mudarei a escala X para a escala Y para fazê-la encolher verticalmente Agora você pode ver que estamos obtendo o efeito que queríamos. Vamos fazer o mesmo rapidamente com a quarta linha, que será posicionada abaixo dos links Vou mirar aqui, aqui, e mudar de cima para a esquerda, da esquerda para baixo. Em seguida, também mudarei a origem da transformação para a parte inferior. Ao passar o mouse, mudo da esquerda para baixo, escala X para escala Y. Agora você pode ver que todas as quatro linhas foram criadas e agora temos o efeito exato que queríamos Agora é hora de criar o plano de fundo que aparece após o encolhimento das linhas para encobrir os links E faremos isso usando o pseudo elemento anterior. Vou até aqui e direcionarei o pseudo-elemento anterior, o link E adicione strings vazias de conteúdo, posição absoluta para posicioná-la em relação aos links Em seguida, adicionarei o zero superior zero esquerdo, pois queremos que ele cubra completamente os links. Vou adicionar largura 100% altura 100% Depois vou adicionar fundo, nossa cor azul. Agora você pode ver que temos o fundo azul. Agora vamos voltar e continuar. Vou aqui e adicionarei a escala de transformação zero. Em seguida, faça a transição de 0,5 segundos, índice z menos um. Então eu vou aqui. Ao passar o mouse sobre o link, selecionarei o pseudo-elemento anterior e adicionarei um atraso de transição de 0,5 segundos na escala de transformação , pois queremos que o plano de fundo Depois que as quatro linhas se juntarem, para obter esse efeito brilhante, adicionaremos uma sombra de caixa de 0010 pixels, nossa cor azul Em seguida, copiarei, colarei duas vezes e aumentarei o valor do desfoque de acordo Vou alterá-lo para 30 pixels, depois 60 pixels. Agora, ao passar o mouse sobre o link, você pode ver que depois que as quatro linhas se juntam, temos esse belo fundo brilhante que aumenta e cobre E esse é exatamente o efeito que procurávamos. 133. Animação criativa em 4 ciclos: Olá pessoal, bem-vindos a esta nova lição do curso. Nesta lição, vamos criar esses círculos legais, animações. Você pode ver que temos essas formas e elas são animadas de uma forma muito boa. Temos esse círculo branco que se move horizontalmente da direita para a esquerda e depois volta em um loop infinito Acima disso, temos esse semicírculo azul que está girando. E acima disso, temos essa pequena bola branca que desliza perfeitamente acima dela Esse será um ótimo exemplo de animação. Vamos ver como podemos criá-lo. Vou entrar aqui no meu HTML e adicionar uma div. Dê a ele uma classe de contêiner. Então, dentro disso, adicionarei outro div com uma classe de carregador Então, dentro disso, adicionarei a última div, darei a ela uma classe de bola Em seguida, vou para o meu CSS e começarei adicionando alguns estilos gerais de redefinição Vou adicionar margem zero, preenchimento zero e, em seguida, tamanho da caixa, caixa de borda Então, abaixo disso, vou direcionar o corpo e adicionar display flex, justificar o centro de conteúdo, alinhar itens, centralizar a altura, fundo de 100 VH, essa cor azul marinho, finalmente transbordar oculto Em seguida, vou direcionar o Div com a classe de carregador e adicionar largura relativa da posição de 200 pixels Altura de 200 pixels também. Em seguida, adicionarei um fundo vermelho temporário. Agora você pode ver que temos esse fundo vermelho centralizado dentro do corpo Usaremos esse carregador di para criar a parte azul que estava girando em nosso exemplo aqui Tudo bem, agora vamos criar esse fundo azul usando o pseudo-elemento anterior Vou direcionar o pseudo-elemento anterior do div do carregador e adicionar conteúdo, cadeias de caracteres vazias, posição de largura absoluta 200 pixels, altura de 100 pixels Em seguida, coloque como fundo nossa cor azul. Agora você pode ver que temos esse fundo azul, mas queremos mudar esse fundo para um semicírculo. Vamos fazer isso. Vou aqui e adicionarei a borda inferior esquerda com raio de 100 pixels, o mesmo que a altura do fundo azul Em seguida, limite também o raio inferior direito de 100 pixels. Agora você pode ver que o fundo azul está exatamente do jeito que queremos. Tudo bem, agora vamos criar a segunda parte do nosso desenho. Esse círculo branco aqui que está se movendo horizontalmente para frente e para trás Vou voltar aqui e mirar no div do contêiner. Em seguida, adicionarei a posição relativa. Então, abaixo disso, vou direcionar o pseudo-elemento anterior do div do contêiner para criar o círculo branco Em seguida, adicionarei strings vazias de conteúdo, posição com largura absoluta de 200 pixels, altura de 200 pixels Em seguida, fundo branco. Para fazer um círculo, adicionarei o raio da borda 50%. Para ver esse fundo branco, até aqui dentro do carregador e adicionarei o índice Z negativo Você pode ver que temos esse círculo branco que se parece exatamente com o que queremos. Como queremos localizar o círculo branco abaixo do azul, voltaremos aqui e adicionaremos 200 pixels. Agora você pode ver que ele foi movido para a parte inferior do fundo vermelho. Agora queremos que o fundo azul esteja exatamente acima do círculo branco. Podemos fazer isso entrando aqui dentro do pseudo-elemento anterior mergulho do carregador e adicionando o zero inferior Incrível, vamos remover esse fundo vermelho. Não queremos mais isso. Vou entrar aqui dentro do div do carregador e remover o fundo vermelho Ok, vamos criar a terceira parte que é esse grande círculo rosa. Farei isso usando o pseudo-elemento after do contêiner Vou direcionar o pseudo-elemento posterior do contêiner e adicionar conteúdo, strings vazias, posição absoluta Em seguida, adicionarei 800 pixels de largura. Altura de 800 pixels, bem como fundo, essa bela cor rosa. Para torná-lo um círculo, adicionarei o raio da borda 50%. Agora você pode ver que temos esse enorme círculo rosa Vamos centralizá-lo horizontalmente. Vou aqui e adiciono 50% à esquerda e depois transformo traduzir x menos 50% Agora você pode ver que o círculo rosa está centralizado dentro da página e agora está cobrindo o fundo branco Queremos posicioná-lo abaixo do fundo branco. Vou voltar aqui e adicionar os 400 pixels principais. Agora, o fundo do ping está localizado abaixo do círculo branco, mas, como você pode ver, todo o desenho está localizado na parte inferior. Seria melhor se pudéssemos colocá-lo um pouco no topo Farei isso entrando no div do contêiner e adicionando transform translate y negative 100 pixels para deslocá-lo para o topo, como você vê aqui Tudo bem, estamos quase terminando. A única coisa que resta aqui é a pequena bola branca no topo. Começarei mirando nele e definirei sua posição como absoluta Em seguida, adicionarei largura 40 pixels, altura 40 pixels, fundo branco e raio da borda de 50% Agora você pode ver que ele está posicionado em relação ao div do carregador Para ver isso claramente, vou até aqui dentro do div do carregador e adicionarei o fundo vermelho novamente Agora você pode ver que a bola branca está posicionada aqui no canto superior esquerdo do carregador Tudo bem, vamos mudar sua posição para ficar exatamente no topo do círculo branco. Vou voltar para a divisão da bola e adicionar 50% transform translate y negative 100% Agora temos todas as nossas peças juntas e a única coisa que resta é animá-las uma por uma Começaremos com a pequena bola branca. Queremos movê-lo horizontalmente na parte superior do semicírculo azul Ele deve se mover da direita para a esquerda, frente e para trás em um loop infinito. Primeiro, vou aqui e adicionarei translate x negative 40 pixels. Para que a pequena bola branca se mova para a esquerda e seja posicionada no início do semicírculo azul, como você Agora vamos criar a animação. Vou até aqui e criarei uma nova animação. Dê um nome: Animate ball inside. Vou adicionar três estágios para a animação. Em 0%, adicionarei transform translate Y negativo 100% para que ele mantenha sua posição vertical. Em seguida, traduza x menos 40 pixels. Então, com 50% da duração da animação, copiarei isso, colarei e alterarei a tradução x para 200 pixels. Essa é a largura do semicírculo azul. A bola se moverá totalmente para a direita em 100%. Queremos que ela volte novamente, então vou deixá-la como está com menos 40 pixels. Então eu vou subir aqui dentro da div da bola e adicionar animação Anime a bola por 4 segundos. Facilidade em nosso infinito. Ótimo. Agora você pode ver que a bola branca está se movendo infinitamente da direita para a esquerda Exatamente acima do semicírculo azul. A luz que queremos. Tudo bem, vamos dar uma olhada rápida no semicírculo azul para ver como podemos animá-lo Você pode ver aqui que ele está girando da esquerda para a direita e vice-versa. Ok, vamos voltar e criar a animação. Vou até aqui e criarei uma nova animação. Nomeie isso de semicírculo. Em seguida, criarei três estágios para essa animação. Com 0% da duração da animação, adicionarei a rotação de transformação de 50 graus. Em seguida, adicionarei mais dois estágios. Vou copiar isso e colar novamente duas vezes. O segundo estágio será de 50%. Vou alterar o valor de rotação para menos 50 graus. Então, no final da duração da animação, deixarei os graus de rotação como estão. Então eu vou subir aqui dentro do carregador e adicionar semicírculo de animação Facilidade em nosso infinito. Agora você pode ver que o fundo vermelho está girando no centro e o semicírculo azul está girando Agora vamos voltar e remover o fundo vermelho. Não precisamos mais disso. Eu farei isso rapidamente. Agora só resta uma coisa : animar o círculo branco Vou até aqui abaixo do círculo branco e criarei uma nova animação. Dê um nome, anime um círculo. Com 0% da duração da animação, adicionarei transform translate x 15 pixels. Depois, copiarei isso e criarei outros dois estágios. O primeiro está em 50%, depois altere a tradução x para menos 15 pixels em 100% Vou deixar o valor de tradução x como está. Então eu vou até aqui e adiciono animação Animate Circle 4 segundos. Facilidade em nosso infinito. Agora você pode ver que o círculo branco está se movendo horizontalmente entre o semicírculo azul e o rosa, nos dando o efeito nos dando Ok pessoal, isso é tudo para esta lição. Foi muito divertido e espero que tenham gostado. Nos vemos na próxima. 134. Animação de glass líquido colorido: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar essa bela animação. Você pode ver que temos esse copo de água. E a água dentro dela está descendo para esvaziar o copo, depois subindo para enchê-lo novamente. E isso acontece repetidamente. Vamos começar a criar esse exemplo. Vou começar aqui no meu HTML adicionando uma seção dentro dele. Vou adicionar um, dê a ele uma classe de vidro. Em seguida, outro mergulho dentro dela com uma classe de interior, dentro dela, nosso último mergulho com uma classe de líquido Em seguida, copiarei esse div com uma classe de vidro e colarei novamente. Em seguida, vou para o meu CSS e direciono para a seção. Em seguida, adicione o display flex, justifique o conteúdo, centralize os itens de uma linha, altura central, fundo de 100 VH, essa cor cinza escuro Então, abaixo disso, vou direcionar o vidro di e adicionar a posição relativa. Abaixo disso, vou direcionar o div interno dentro do div de vidro e adicionar posição ( largura relativa de 200 pixels, altura de 400 pixels, fundo nessa cor cinza Em seguida, vou até aqui dentro da seção e adicionarei lacuna de 40 pixels para separar os dois óculos , então vamos continuar. Vou aqui e adicionarei um raio de borda de 40 pixels. Em seguida, contorne oito pixels, branco sólido. Tudo bem, vamos dar uma olhada no nosso exemplo. Queremos criar essa parte superior circular aqui na parte superior do vidro. E faremos isso usando o pseudo-elemento anterior do div interno Então, vou direcioná-lo e adicionar conteúdo cadeias de caracteres vazias, posição de largura absoluta 175 pixels, altura de 30 pixels Em seguida, contorne dez pixels sólidos. Essa cor cinza, você pode ver que temos esse retângulo cinza. Vamos continuar. Vou voltar aqui e adicionar raio da borda de 50% Para centralizá-lo horizontalmente, adicionarei 50% à esquerda e depois transformo traduzir x menos 50% Agora você pode ver que temos essa Ok, agora queremos movê-lo um pouco para o topo. Vou voltar aqui e adicionar 15 pixels negativos no topo. Vamos também ir até aqui e alterar a cor da borda para transparente em vez de branca. Surpreendente. Agora, a parte superior do copo está exatamente do jeito que queremos. Uma última coisa, vamos adicionar um pouco de sombra na parte inferior. Vou voltar aqui e adicionar sombra de caixa, valor horizontal zero e 15 pixels como valor vertical. Em seguida, valor de desfoque zero e uma cor cinza escuro como a cor da sombra Agora temos essa bela sombra na parte inferior. Ok, se olharmos nosso exemplo, você pode ver que temos essa parte semitransparente que dá ao vidro uma aparência realista Vamos voltar e fazer isso. Eu farei isso usando o pseudo-elemento after do div interno Vou direcioná-lo e adicionar conteúdo na posição vazia das strings, no topo absoluto de 70 pixels à esquerda, 30 pixels de largura 50 pixels e altura 250 pixels. Então, finalmente, coloque de fundo essa cor cinza semitransparente. Agora você pode ver que temos esse fundo cinza semitransparente que queremos Tudo bem, vamos criar o líquido dentro do copo. Faremos isso usando o líquido. Vou direcioná-lo e adicionar a posição absoluta superior de 50 pixels à esquerda, cinco pixels, cinco pixels e cinco pixels inferiores. Em seguida, coloque de fundo essa cor azul clara. Agora você pode ver que temos esse fundo azul que cobre o vidro. Mas agora queremos adicionar algumas curvas aqui na parte inferior para combinar com o vidro Vou voltar aqui e adicionar um raio de borda de 30 pixels. O raio inferior da borda também é de 30 pixels. Agora você pode ver que o líquido div está exatamente do jeito que queremos Tudo bem, vamos voltar e dar uma olhada no nosso exemplo. Você pode ver que temos essa parte circular superior aqui. Vamos criá-lo bem rápido. Vou focar no pseudo-elemento anterior do div líquido e adicionar conteúdo Cadeias vazias, posição, largura absoluta 100%, altura 20, raio da borda 50%. Em seguida, coloque o fundo nessa cor azul mais escura Você pode ver que temos esse fundo azul circular. Mas vamos deslocá-lo um pouco para o topo. Vou aqui e adicionarei dez pixels negativos. Surpreendente. O copo está exatamente do jeito que queremos. E terminamos o desenho. Mas agora precisamos animá-lo. Vamos voltar e fazer isso. Vou criar uma nova animação, batizada de Animate Liquid Então, no início da duração da animação em 0% a 20%, adicionarei 50 pixels do início da animação a 20% da duração da animação. O líquido azul permanecerá como está. Ele não se moverá porque não alteramos seu valor máximo. Então, com 50% da duração da animação, com 70%, definiremos a propriedade principal em 320 pixels. A propriedade superior mudará de 50 pixels para 320 pixels durante a duração da animação de 20% a 50% da duração da animação. Em seguida, ele ficará parado por um tempo em 320 pixels a partir da duração da animação de 50% a 70%. Finalmente, abaixo disso, no final da duração da animação em 100%, voltaremos a parte superior para 50 pixels. Tudo bem, vamos até aqui dentro do div líquido e adicionar animação animada líquida, 5 segundos lineares, 5 segundos lineares, Agora você pode ver que depois de recarregar a página, o líquido dentro do copo espera um pouco depois se move para o fundo Espera um pouco na parte inferior e depois volta para o topo novamente. Isso continua em um loop infinito. Vamos voltar e mudar a cor do segundo líquido. Vou mirar no segundo copo e direcionar o líquido dentro dele e adicionar um fundo, essa cor amarela. Também adicionarei um atraso de animação de 2,5 segundos. Vou copiar isso, selecionar Colar e direcionar o pseudo-elemento anterior, que é a parte superior aqui Em seguida, adicionarei o fundo, essa cor amarela mais escura Agora você pode ver as mudanças de cor nos dando essa cor amarela. E como você pode ver, quando um copo está sendo enchido, o outro fica vazio, nos dando o efeito exato que queremos. 135. Animação de carregamento de fronteira fantasia: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de carregamento. Você pode ver que temos esses círculos elásticos que estão girando e nos dando esse belo efeito ondulado Aprenderemos como fazer isso usando a propriedade border radius Então, vamos começar. Vou entrar aqui dentro do meu HTML e adicionar uma Div com uma classe de carregador Dentro disso, adicionarei três vãos e , abaixo disso, adicionarei um H dois e adicionarei carregamento dentro dele Então eu vou para o meu CSS e tenho como alvo o corpo. Adicione o centro de conteúdo Display, Flex, Justify para centralizar o carregador E alinhe os itens no centro para centralizá-los verticalmente. Em seguida, adicionarei altura, 100 VH e fundo essa cor cinza escuro Em seguida, vou direcionar o carregador e adicionar a largura relativa da posição, 200 pixels, altura 200 pixels Em seguida, exiba flex, justifique conteúdo, alinhe o centro Então, vou mirar nos vãos dentro do carregador. Adicione posição absoluta, depois zero superior esquerdo zero largura 100% altura 100% raio da borda 50% e, em seguida, borda de dois pixels em branco sólido Agora você pode ver que temos os três vãos como círculos brancos que estão posicionados um em cima do outro Tudo bem, agora vamos direcionar cada extensão e alterar o raio da borda de cada uma para dar a ela uma aparência elástica agradável Vou definir o primeiro intervalo aqui, dizendo loader span nth child one Então, dentro disso, adicionarei o raio da borda. Para controlar totalmente a aparência dessa borda, usaremos um site chamado Fancy Border Radius Você pode ver que temos essa forma que podemos controlar facilmente para obter a forma que queremos. Vamos brincar um pouco com isso. Digamos que queremos esse raio. Vou copiá-lo e colá-lo aqui. Agora você pode ver que o primeiro vão agora tem essa bela borda elástica. Ok, agora vou copiar o primeiro seletor, colá-lo e direcionar o segundo Selecione, cole mais uma vez e mire na terceira. Em seguida, voltarei ao sofisticado site do gerador de bordas e gerarei um novo raio de borda, apenas aleatório Então eu vou colar aqui dentro do segundo espaço. Ok, vou voltar e gerar outro valor e colá-lo aqui dentro do terceiro intervalo. Agora você pode ver que temos três bordas diferentes um raio de borda diferente Tudo bem, agora vamos criar a animação. Vou criar um novo. Dê um nome para girar. E dentro dela, no início da duração da animação em 0%, adicionarei a rotação de transformação de zero graus. Então, com 100% da duração da animação, adicionarei a rotação de transformação em 360 graus. Em seguida, vou até aqui dentro do seletor de extensão e adiciono rotação da animação, duração da animação de 5 segundos e, em seguida, linear, infinita Agora você pode ver que as três bordas estão girando junto com os três vãos Tudo bem, para obter o efeito ondulado elástico que queremos, podemos brincar um pouco com as bordas, por exemplo Podemos fazer uma borda girar na direção inversa. Vamos tentar isso. Vou voltar aqui dentro do segundo intervalo e adicionar a direção inversa da animação. Acho que você pode ver que já estamos obtendo um bom efeito. Podemos deixar como está ou podemos tentar outra coisa. Vou entrar no terceiro seletor e adicionar a duração da animação de 3 segundos em vez de cinco, para que ela gire Agora você pode ver que está se movendo mais rápido, nos dando esse belo efeito. Muito legal. Só nos resta uma coisa adicionar alguns estilos simples aos dois H. Vou direcioná-lo e adicionar a cor branca e a espessura da fonte 500. Agora parece muito melhor. E pronto, pessoal, por esse exemplo simples, mas bonito. Nos vemos nos próximos vídeos. 136. Carregador incandescente rotativo: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de carregamento. Também temos esse carregador com esse círculo brilhante que está girando, nos dando nosso Vamos ver como podemos criá-lo. Vou começar aqui no meu HTML adicionando uma seção. Depois, dentro dela, adicionarei uma div, dê a ela uma classe de carregador Em seguida, vou para o meu CSS e direciono para a seção. Em seguida, adicione display, flexione, justifique o centro de conteúdo e também o centro de alinhamento de itens Em seguida, altura mínima, 100 VH e fundo nessa cor azul marinho. Tudo bem, então vou direcionar o div do carregador e adicionar posição, largura absoluta de 150 pixels, 150 pixels, fundo vermelho por enquanto raio da borda de 50%. Tudo bem, agora você pode ver que temos esse círculo vermelho posicionado no centro do navegador Vamos aprender algo novo nesta lição, que é gradiente CSS Queremos mudar o fundo desse círculo para um gradiente de duas cores azuis Em vez dessa cor vermelha, usaremos este site para gerar o gradiente. Este site nos ajuda a criar um gradiente de cores. Você pode ver que temos essas duas cores que podemos usar para gerar o gradiente. Vou mudar essa primeira cor para essa cor azul marinho. Essa é a cor da nossa seção. E a segunda cor que queremos é azul claro. Vou colocá-lo aqui. Eu também vou jogar com esse controle deslizante aqui. Para alterar a intensidade do gradiente, quero essa forma de gradiente. Podemos ir aqui e copiar esse código. Em seguida, volte para o meu CSS dentro do disco do carregador e altere a cor de fundo de vermelho para esse novo valor que copiamos do nosso site Agora você pode ver que a cor de fundo do círculo agora foi alterada para esse gradiente frio Tudo bem, agora vamos continuar. Iremos aqui e direcionaremos o pseudo-elemento anterior do div do carregador e adicionaremos conteúdo a strings vazias Então, queremos esconder uma parte dessa forma aqui. Para obter a forma final que queremos, voltarei aqui e adicionarei 20 pixels inseridos na parte superior, 20 pixels na direita, depois zero na parte inferior e zero na esquerda também Então eu vou adicionar novamente o vermelho por enquanto. Também adicionarei o raio da borda 50%. Agora você pode ver que temos esse círculo vermelho que está cobrindo nossa forma Tudo bem, vamos voltar e mudar a cor de fundo para a mesma cor azul marinho que usamos no fundo da seção. Agora você pode ver que temos essa forma circular exatamente do jeito que vencemos. Tudo bem, vamos criar o pequeno círculo brilhante que será posicionado aqui. Vou voltar e direcionar o pseudo-elemento after div do carregador e adicionar conteúdo cadeias de caracteres vazias, posição de largura absoluta Altura de 40 pixels também. Em seguida, coloque de fundo nossa cor azul claro e raio de borda 50% Agora você pode ver que temos esse círculo azul aqui Agora queremos posicioná-lo aqui. Vou voltar e no topo 50 pixels, à direita, menos oito pixels. Agora você pode ver que está posicionado no lugar exato que queremos Vamos voltar e dar a ele esse belo efeito brilhante. Faremos isso usando a propriedade box shadow. Vou adicionar a sombra zero da caixa como deslocamento horizontal, outro zero como deslocamento vertical Em seguida, um valor de desfoque de cinco pixels. Finalmente, essa cor azul clara. Agora você pode ver que temos essa sombra muito pequena. Para obter o efeito de brilho que queremos, podemos usar um truque simples Copiaremos esse valor de sombra da caixa, colaremos algumas vezes, digamos três vezes. Em cada vez, aumentaremos o valor do desfoque Gradualmente, vamos alterá-lo para 25 pixels aqui, depois 50 pixels e 75 pixels. Ao fazer isso, você pode ver que temos esse belo efeito de brilho Sempre que quiser criar um efeito brilhante, você pode usar a propriedade box shadow e aumentar gradualmente o valor do desfoque, como acabamos Tudo bem, agora vamos criar a animação de rotação. Vou criar uma nova animação. Nomeie como girar dentro dele em 100%. Vou adicionar transformação, girar 360 graus Então, aqui dentro do div do carregador, adicionarei animação. Gire 2 segundos, linear, infinito. Agora você pode ver que o carregador está girando em um loop infinito 137. Animação de texto criativa usando a propriedade Caminho de clipe: Olá pessoal, bem-vindos a esta nova lição do curso. Nesta lição, nós vamos aprender como criar essa bela animação de texto. Você pode ver que a tela está dividida horizontalmente em duas A metade superior tem um fundo verde e a inferior tem um fundo branco. Além disso, o texto aqui está passando da parte superior para a parte inferior e mudando de Feliz Ano Novo 2031 para adeus 2030 Além disso, a cor está mudando de branco para verde. Usaremos a propriedade clip path para criar essa divisão do navegador Vamos começar e fazer isso agora. Vou começar aqui no meu HTML adicionando uma seção. Então, dentro dele, adicionarei um div. Dê a ele uma classe de caixa e outra classe de caixa um. Então, dentro dessa div, adicionarei um H dois Dentro dela, vou adicionar um intervalo, dizer adeus. Em seguida, outro período próximo a esse, digamos 2030. Em seguida, copiarei esse div, colarei novamente e mudarei a caixa um para a caixa dois No primeiro período, adicionarei Feliz Ano Novo. Dentro do segundo período, adicionarei 2031 Tudo bem, agora vou para o meu CSS e mirarei no corpo. Em seguida, adicionarei Overflow hidden. Em seguida, vou focar na seção que contém os dois divs. Vou adicionar largura relativa da posição, 100% de altura 100 VH. Em seguida, vou direcionar a caixa div e adicionar posição zero superior absoluta, zero à esquerda e, em seguida, largura 100%, altura 100% As duas divs terão toda a altura e largura da seção Agora vamos recarregar a página. Você pode ver que, como definimos a posição das caixas divs como absoluta, o texto está empilhado um sobre o outro no canto superior esquerdo da seção Vamos voltar e centralizar o texto dentro da página. Vou voltar aqui e também adicionar display Flex, justify, content center e Align items center Agora você pode ver que o texto está centralizado dentro da página. Ok, vamos voltar e mirar na segunda caixa que tem a classe da caixa dois e adicionar fundo, essa cor verde. Agora você pode ver que a segunda caixa tem essa cor verde e está escondendo a primeira caixa embaixo dela porque veio depois dela em nosso HTML Ok, agora queremos que apenas a metade superior da segunda caixa seja exibida, que significa que queremos dividi-la em duas metades e ter apenas a metade superior visível Podemos fazer isso facilmente usando a propriedade clip path. Vou acessar o clipe do site e selecionar a forma trapezoidal Então, como queremos cortar a metade inferior, farei isso rapidamente. Em seguida, copiarei o código aqui, voltarei e colarei dentro da segunda caixa div Agora você pode ver que a segunda caixa está perfeitamente recortada e, como o texto dentro dela está perfeitamente centralizado, ela também é cortada em duas metades Tudo bem, agora vamos adicionar alguns estilos ao H dois. Vou direcioná-lo, adicionar tamanho de fonte de 45 pixels. Queremos fazer com que os dois espaços dentro de cada cabeçalho estejam em duas linhas, como vemos aqui em nosso exemplo Temos Feliz Ano Novo em uma linha e 2031 fica abaixo dela Isso também é o mesmo para o segundo título. Esse é o motivo pelo qual adicionamos dois vãos dentro do H dois. Vamos voltar e fazer isso. Vou entrar aqui dentro do H two e adicionar display flex Em seguida, flexione a coluna de direção. Agora eles estão separados em duas linhas. Podemos ver claramente que, se voltarmos aqui e adicionarmos transform translate y negativo 70%. Agora você pode ver que, como deslocamos o H dois para o topo, agora vemos o segundo H dois e o primeiro está escondido embaixo dele Se quisermos ver o primeiro H dois, podemos voltar e mudar isso para 70% em vez de 70% negativos. Agora você pode ver que temos até 2030. E o segundo H dois está oculto desde que recortamos a segunda caixa, então não está aparecendo Tudo bem, vamos voltar e definir a propriedade de tradução de volta para 70% negativos. Também adicionarei texto, um centro de linha para centralizar o texto. Ok, vamos mudar a cor do H dois que está aparecendo aqui. Vou mirar no H dois dentro da segunda caixa e adicionar a cor branca. Tudo bem, agora vamos mirar na segunda extensão do H dois. Esse é o ano para adicionar alguns estilos a ele. Eu direi span nth child two e adicionarei a altura da linha um e o tamanho da fonte dois Tudo bem, vamos criar a animação que move o texto para cima e para baixo. A ideia da animação é traduzir animadamente a função Y para mover os dois H verticalmente Como vimos quando jogamos com o valor H dois. Vou até aqui e criarei uma nova animação. Dê um nome, anime dentro dele. Queremos que o texto comece a se mover de cima para baixo. Mas queremos que fique um pouco na metade superior depois passe para a metade inferior. Sente-se um pouco na metade inferior e volte para a metade superior e assim por diante. Eu direi que em 0% da duração da animação, em 45% adicionarei transform translate y negative 70% para que o texto permaneça em sua posição desde o início da duração da animação até 45% antes de se mover. Então, abaixo disso, em 55% 90%, adicionarei transform translate Y 70%. Isso significa que de 45% da duração da animação para 55% a posição mudará da superior negativa de 70% para a parte inferior 70%. De 55% a 90% ela permanecerá nessa nova posição na Em seguida, queremos movê-lo de volta ao topo. Eu direi que em 100% adicionarei transform translate y negative 70% novamente. Em seguida, vou subir aqui dentro do seletor H two e adicionar animação animada de 3 segundos Facilidade em nosso infinito. Agora você pode ver que o texto está se movendo de cima para baixo, frente e para trás, proporcionando esse belo efeito de animação. A única coisa que resta agora é mudar a cor do texto para verde. Quando ele se mover para baixo, voltarei aqui e, dentro do seletor H dois, adicionarei cor, nossa cor verde Tudo bem, pessoal, isso é tudo para esta lição. Espero que você aprenda algo com isso, e nos vemos em outro. 138. desenhar uma linha em torno de um button com um ícone de lápis: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de passar o mouse sobre o botão Você pode ver que temos esse botão e esse lápis no canto superior esquerdo. E quando eu passo o mouse sobre o botão, a caneta desenha uma borda ao redor do botão e a preenche com um fundo cinza escuro Tudo bem, vamos ver como podemos criar esse efeito. Vou começar aqui no meu HTML adicionando uma tag âncora. Eu vou dizer Button. Depois disso, adicionarei quatro extensões. Cada extensão será uma linha das quatro linhas que criam a borda ao redor do link. Em seguida, vou para o meu CSS e tenho como alvo o corpo. Em seguida, adicione display Flex, justify, conteúdo, centro de itens de linha A e, em seguida, na altura 100 Então, abaixo disso, vou direcionar a tag âncora e adicionar preenchimento relativo à posição, 20 pixels da parte superior e inferior e 40 pixels da esquerda e da direita Em seguida, adicionarei tamanho de fonte de 24 pixels, espessura da fonte, cor em negrito, essa cor cinza escuro. Em seguida, o texto transforma a decoração de texto em maiúsculas, espaçamento entre letras de dois pixels Agora vamos trabalhar na criação das quatro linhas que cercam o link Faremos isso usando os quatro intervalos. Vou definir o primeiro período dizendo span nth child one Também terei como alvo o terceiro período. Em seguida, adicionarei largura, 100% de altura, fundo de três pixels, nossa cor cinza escuro. Essas serão as linhas horizontais, como você pode ver aqui. Vamos agora reposicionar essas duas linhas. Desta vez, vou focar no primeiro período sozinho. E adicione o zero superior zero esquerdo também. Agora você pode ver que a primeira linha está posicionada na parte superior, acima do link Agora vamos animá-lo da esquerda para a direita. Ao passar o mouse, voltarei aqui e adicionarei escala de transformação x zero Então, abaixo disso, ao passar o mouse sobre, selecionarei o primeiro intervalo Novamente, adicione escala de transformação x um. Novamente, também adicionarei a transição de 0,2 segundos. E agora você pode ver que a linha superior agora está oculta e, ao passar o mouse sobre o link, ela aumenta Mas queremos que ele aumente da esquerda para a direita. Podemos fazer isso voltando aqui e adicionando a origem da transformação à esquerda. Tudo bem, vamos fazer o mesmo com o resultado final. Vou copiar esses dois blocos de código, colá-los e selecionar o terceiro intervalo. Então, para posicioná-lo na parte inferior, vou aqui e mudo de cima para baixo. Também mudarei a origem da transformação para a direita, porque queremos que ela aumente da direita para a esquerda. Também adicionaremos atraso de transição de 0,4 segundos. Agora você pode ver que a linha na parte inferior está aumentando da direita para a esquerda após a linha superior Tudo bem, agora vamos criar as duas linhas nos dois lados. Vou até aqui e copiarei esse alvo, o segundo e o quarto intervalos. Em seguida, alterarei a largura para três pixels. E altere a altura para 100% Agora você pode ver que temos as duas linhas aqui. Vamos reposicionar essas duas linhas. Vou voltar aqui e copiar esses dois blocos de código. Cole-os e selecione o segundo intervalo. Em seguida, vou mudar da esquerda aqui para a direita, transformar a origem no topo. Em seguida, altere a escala x para a escala y aqui. Também selecionarei o segundo intervalo e alterarei a escala x para a escala y. Também adicionarei um valor de atraso de transição de 0,2 segundos. Essa linha será dimensionada entre a primeira e a terceira linha, como você pode ver aqui. Vamos criar rapidamente a quarta linha. Vou copiar esse código, colar e selecionar a quarta linha aqui, aqui. Em seguida, mudarei aqui para a esquerda e transformarei a origem em baixo. Vou aqui e alterarei atraso da transição para 0,6 segundos. Agora você pode ver quando eu passo o mouse sobre o link, as quatro linhas se juntam uma após a outra, criando esse efeito agradável Agora vamos criar o fundo cinza escuro. Vou criar isso usando o pseudo-elemento anterior da tag âncora Vou selecionar isso e adicionar conteúdo. Cadeias vazias, posição absoluta, zero superior, zero esquerdo e, em seguida, largura 100% Altura 100% Então essa cor cinza escuro. Agora você pode ver que temos esse fundo cinza escuro que cobre a etiqueta da âncora Tudo bem, vamos trabalhar no efeito de flutuação. Vou voltar aqui e adicionar a escala de transformação zero. Em seguida, um índice menos um. Então, ao passar o mouse sobre o link, selecionarei o pseudo-elemento anterior e adicionarei a escala de transformação um Em seguida, faça a transição de 0,5 segundos. Finalmente, a transição demora 0,8 segundos para que o fundo apareça após a animação de quatro linhas. Agora, quando eu volto e passo o mouse sobre o link, você pode ver o fundo cinza escuro se expandir do centro até cobrir o link Mas queremos que ele aumente a partir do canto superior esquerdo, não do centro. Vou voltar aqui e adicionar a origem da transformação no canto superior esquerdo, assim, você pode ver a escala do plano de fundo no canto superior esquerdo. Também vamos alterar rapidamente a cor do texto do link para branco. Selecionarei o link ao passar o mouse sobre ele, adicionarei a cor branca Transição de 0,2 segundos e, em seguida, atraso de transição de 0,8 segundos. Assim, o texto muda para branco. Tudo bem, agora vamos adicionar o ícone de lápis ao nosso link. Faremos isso usando a incrível biblioteca de fontes. Vou pesquisar a fonte awesome D. Depois vou clicar aqui. Em seguida, copiarei a tag do link. Volte para o meu HTML e cole aqui dentro do meu HTML. Então, para obter o código do ícone do lápis, voltarei aqui e clicarei neste link. Para ir até a biblioteca de ícones, selecionarei os ícones e procurarei por lápis, clicarei nesse primeiro ícone e copiarei seu Unicode Em seguida, voltarei ao meu CSS, selecionarei o pseudo-elemento after da tag âncora e adicionarei Em seguida, colarei o Unicode do lápis adicionarei a família de fontes Fonte incrível. É assim que você pode adicionar um ícone de fonte incrível dentro de pseudoelementos Em seguida, adicionarei a posição absoluta superior zero, cor zero à esquerda, essa cor cinza escuro. Agora você pode ver que temos esse ícone de lápis aqui, mas queremos deslocá-lo um pouco para o topo. Vou voltar e mudar o topo para 22 pixels negativos. Tudo bem, vamos agora criar a animação para este lápis, vou criar uma nova animação, nomeá-la, desenhar dentro dela. Com 0% da duração da animação, adicionarei 22 pixels negativos à esquerda, 100%. Isso fará com que o lápis comece no canto superior esquerdo do link e, em seguida, copiarei isso. Cole cinco vezes. Então, com 20% da duração da animação, deixarei o topo como está e, em seguida, mudo para a esquerda para 100%. O lápis se moverá para o canto superior direito. Então, com 40% da duração da animação, queremos que o lápis esteja no canto inferior direito. Vou mudar o topo para 100% -22 pixels. Vou mudar a esquerda para 100%. Em seguida, com 60%, queremos que esteja no canto inferior esquerdo, mudarei a parte superior para calc 100% -22 pixels Vou sair para a esquerda, pois é zero. Então, com 80% , queremos que ele retorne à sua posição original. No canto superior esquerdo, vou deixar como está. Finalmente, em 100%, queremos que ele esteja localizado no canto inferior direito. Vamos mudar a parte superior para 100% -22 pixels e a esquerda para 100%. Depois, subo até aqui e, ao passar o mouse sobre a etiqueta âncora, selecionarei o pseudo-elemento posterior que é o pseudo-elemento Vou adicionar um desenho de animação linear de 1 segundo para frente porque queremos que isso aconteça apenas uma vez Agora, quando eu passo o mouse sobre o link, você pode ver o lápis se movendo pelos cantos do link e , em seguida, passando pelo canto inferior direito junto com o fundo cinza, dando nosso belo efeito 139. Efeito de foco no menu de cor de fundo criativo: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de foco do menu Você pode ver que temos esse menu vertical. Quando passamos o mouse sobre qualquer link, os outros links ficam semitransparentes Além disso, o texto do link vem junto dos dois lados e aparece em segundo plano. E, finalmente, a cor de fundo muda para cada link. Esse é um efeito muito legal. Vamos ver como podemos fazer isso. Começarei aqui no meu HTML adicionando uma UL e , dentro dela, adicionarei uma L I. Dentro dela, adicionarei um link e adicionarei texto. Vou adicionar a página inicial dentro do texto do link. Em seguida, copiarei esse LI, colarei quatro vezes e adicionarei sobre Serviços, Equipe e Contato. Em seguida, vou para o meu CSS, direciono o corpo e adiciono display, Flex, Justify, centro de conteúdo, alinhamento de itens, altura central, 100 VH e, finalmente, estouro oculto e Vou direcionar a posição de adição U L em relação a ela. Abaixo disso, vou direcionar os itens da lista, adicionar estilo de lista, nenhum texto, um centro de linha. Em seguida, vou direcionar o link e adicionar cor. Esta decoração de texto em cor cinza escuro, nenhum tamanho de fonte, três preenchimentos EMS, cinco pixels na parte superior e inferior e 20 pixels na esquerda e na direita Em seguida, exiba a fonte flexível embutida com espessura 700, transição de 0,5 segundos Então, ao passar o mouse sobre qualquer link, queremos que os outros links tenham um fundo transparente Vou até aqui e digo que, ao passar o mouse sobre a UL, selecionarei a etiqueta de âncora e essa cor transparente Agora, ao passar o mouse sobre a UL, todos os links terão essa cor transparente Agora queremos que o link sobre o qual estamos passando o mouse tenha uma cor preta e um fundo branco Vou voltar aqui e direcionar o UL, depois o L I ao passar o mouse sobre o link, adicionarei a cor preta e depois o fundo branco Agora, quando eu passo o mouse sobre qualquer link, todos os outros links têm um fundo semitransparente, exceto o link sobre o qual estamos passando o mouse Ok, vamos começar a trabalhar na criação do texto grande que aparece em segundo plano. Faremos isso usando o pseudo elemento anterior. Selecionarei o pseudo-elemento anterior da tag âncora e adicionarei Digamos que passe o mouse para adicionar a posição absoluta superior 50% à esquerda 50% e depois transformar Traduza menos 50% e menos 50% e depois pinte vermelho. Exiba, flexione, justifique o centro de conteúdo, um centro de itens de linha, depois o tamanho da fonte cinco, EMS e, em seguida, um índice negativo, para que apareça abaixo ou atrás dos links do menu Também adicionarei o peso da fonte. 900 e, finalmente, o texto transforma em maiúsculas. Agora você pode ver que tínhamos essa grande palavra vermelha no fundo. Tudo bem, agora vamos voltar e continuar. Eu vou aqui e mudo a cor para essa cor cinza semitransparente Para que o texto grande se junte e tenha o efeito que queremos, precisamos separar as letras. Vamos fazer isso. Vou adicionar espaçamento entre letras, 500 pixels. Agora você pode ver que as letras estão separadas. Tudo bem, eu também vou aqui e adicionarei a opacidade zero e, em seguida, o espaçamento entre letras de transição 0,5 segundos abaixo disso Quando passarmos o mouse sobre o link, selecionaremos o pseudo-elemento anterior e adicionaremos o atributo de conteúdo que capturaremos o texto dos dados dentro do link sobre o qual estamos passando o Em seguida, adicionaremos opacidade, espaçamento de uma letra com apenas dez pixels, para que as letras E eu vou até aqui e removerei a palavra flutuante da propriedade do conteúdo Agora você pode ver que quando eu passo o mouse sobre qualquer link, temos esse efeito em que o texto do link se junta no fundo Ok, vamos adicionar uma cor de fundo também para o texto em segundo plano. Queremos uma cor de fundo diferente para cada link. Vamos direcionar cada link individualmente. Vou direcionar o primeiro link dizendo L I child one. Em seguida, vamos focar antes do pseudo-elemento do link dentro dessa primeira LI Dentro disso, vou adicionar um fundo, essa bela cor azul claro. Agora, ao passar o mouse sobre o primeiro link, você pode ver que temos esse fundo azul claro que aparece junto com o Mas queremos que ele tenha toda a largura e altura do corpo. Vou entrar aqui dentro do plano de fundo e adicionar largura 100 V e altura 100 H. Agora, o fundo ocupa toda a largura e altura do corpo. Tudo bem, vamos fazer o mesmo com os outros links. Vou pausar o vídeo e fazer isso rapidamente. Como você pode ver, acabei de selecionar todos os outros links e adicionar uma cor de fundo diferente para cada link. Agora, quando eu passo o mouse sobre qualquer link, você pode ver que existem diferentes cores de fundo que aparecem nos dando, isso mesmo O efeito exato que queremos. 140. animação de chuva de nuvens: Olá pessoal. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar outra boa animação, Uma nuvem que está chovendo. Você pode ver que temos essa nuvem se desenhando e gotas de chuva estão caindo dela. Essa é uma animação muito legal. Vamos ver como podemos criá-lo. Vou começar aqui no meu HTML adicionando um, dando a ele uma classe de contêiner. Então, dentro dele, adicionarei outro div com a classe de nuvem abaixo dele Vou adicionar uma terceira divisão com uma classe de chuva. Dentro disso, adicionarei um intervalo. Criaremos as gotas de chuva usando esse vão, mas precisaremos de muitos vãos para criar essas gotas Eu vou fazer isso muito rápido. Você pode ver que eu adicionei muitos espaços aqui. Eu adicionei 20 extensões para todas as entregas. Agora vou ao meu CSS, seleciono o corpo e adiciono Display, Flex, Justify, centro de conteúdo, alinhamento de itens, centro, altura mínima, fundo de 100 VH, essa Então, abaixo disso, vou direcionar o contêiner e adicionar posição de altura relativa de 400 pixels com 320 pixels. Para criar a linha na parte inferior, adicionarei a borda inferior de três pixels em branco sólido. Ok, vamos criar a nuvem. Agora vou direcionar o div com a classe de nuvem e adicionar altura relativa da posição, 100 pixels, largura de 100% para ocupar toda a largura do contêiner Em seguida, os 50 pixels superiores e o fundo branco. Finalmente, contorne o raio de 100 pixels para ter algumas curvas nos cantos Agora temos essa forma e essa será a base da forma da nuvem. Ok, vamos continuar. Vou voltar aqui e selecionar o pseudo-elemento anterior da nuvem div e adicionar conteúdo, cadeias de nuvem div e adicionar caracteres vazias, posição de largura absoluta selecionar o pseudo-elemento anterior da nuvem div e adicionar conteúdo, cadeias de caracteres vazias, posição de largura absoluta de 110 pixels. Altura de 110 pixels também. Em seguida, contorne o raio de 50% para que seja um círculo. Em seguida, adicionarei fundo vermelho por enquanto. Agora você pode ver que temos esse fundo vermelho localizado à esquerda da nuvem div Vou aqui e adicionarei 50 pixels negativos para deslocá-los para os 40 pixels superiores e empurrá-los um pouco para a direita. Agora você pode ver que ele mudou aqui para essa nova posição. E essa será a segunda parte da forma da nuvem. Vamos começar a trabalhar na terceira parte. Vamos criá-lo com um pequeno truque interessante usando a propriedade box shadow. Vou aqui e adicionarei sombra de caixa, 90 pixels como um deslocamento horizontal, zero como um deslocamento vertical porque não queremos que ela se mova Então zero como valor de desfoque, já que não queremos que fique desfocado E 30 pixels como valor de dispersão. Esse valor positivo de dispersão aumentará o tamanho da sombra, então teremos um círculo maior. Em seguida, adicionaremos uma cor azul por enquanto. Agora você pode ver que temos esse grande círculo azul localizado à direita do primeiro círculo, acredite ou não, mas a forma da nuvem já está concluída. Tudo o que precisamos fazer agora é mudar as cores desses dois círculos para branco para ter a forma de nuvem que queríamos. Vou fazer isso rapidamente agora você pode ver que, ao fazer isso, a forma da nuvem fica exatamente do jeito que queremos. Ok, vamos trabalhar na criação das gotas. Vou selecionar a chuva e adicionar posição, exibição relativa, flexionar, justificar, centro de conteúdo, z index Em seguida, selecionarei os vãos dentro do mergulho e adicionarei largura, dez pixels de altura Fundo de pixels vermelho por enquanto. Raio da borda com margem de 50%, depois margem zero na parte superior e inferior e dois pixels na esquerda e na direita Agora você pode ver que temos esses pequenos círculos vermelhos que serão as gotas da nuvem. Tudo bem, vamos criar a animação que moverá essas gotas. Vou criar um novo. Dê um nome e, dentro dele, em 0% da duração da animação, adicionarei transform translate Y zero scale one. Então eu vou copiar isso, colar duas vezes. Então, com 70%, mudarei a função de tradução para 288 pixels e deixarei a escala como está Então, em 100%, também mudarei a tradução de Y para 288 pixels, a função de escala para zero Vou até aqui e direi animação em 5 segundos, linear, infinita, e transformar a origem na parte inferior. Agora você pode ver as gotas caindo da nuvem, chegando ao fundo e depois diminuindo até que desapareçam Porque definimos a função de escala aqui como zero. Mas agora queremos que as gotas caiam aleatoriamente, uma após a outra Podemos fazer isso alterando a duração da animação para cada período, mas levará muito tempo para selecionar cada período individualmente e alterar duração da animação um por vez. Podemos usar variáveis CSS para nos ajudar a fazer isso. Voltarei aqui no meu HTML e, no primeiro espaço, adicionarei o estilo de dois traços, e é assim que definimos uma variável em CSS Em seguida, o nome da variável, digamos segundos. Em seguida, adicionarei 11 como um número de segundos para o primeiro período. Também farei o mesmo para todos os outros períodos e alterarei o valor dos segundos a cada vez Agora você pode ver que eu adicionei valores diferentes para os segundos em todos os períodos O que podemos fazer agora é voltar ao nosso CSS. E dentro do seletor de intervalo, adicionarei o cálculo da duração da animação 15 segundos dividido pela variável que declaramos, que é O que acontecerá aqui é que, para cada período, a duração da animação será calculada usando essa linha de código, 15 dividida por qualquer valor que adicionamos ao intervalo em nosso HTML. Como adicionamos valores diferentes, obteremos valores diferentes para cada duração da animação. 141. Animação criativa de carregador brilhante: Olá a todos. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de carregador brilhante Você pode ver que temos esses círculos brilhantes que brilham e depois desaparecem Usaremos a propriedade box shadow para fazer isso. Então, vamos dar uma olhada e ver como podemos fazer isso. Começarei aqui no meu HTML adicionando uma seção e, dentro dela, adicionarei uma div, darei a ela uma classe de carregador Então, dentro disso, adicionarei uma extensão. Usaremos variáveis CSS. Aqui, adicionarei estilo, nomearei a variável I. Definirei seu valor como um e precisaremos desse valor. Posteriormente, em nossos estilos CSS, farei o mesmo com todas as outras extensões Você pode ver agora que temos 20 vãos e esses serão os pequenos círculos ou lâmpadas que brilham Também adicionei valores diferentes para a variável. Esses valores aumentam de um para 20 no último período. Tudo bem, agora vou para o meu CSS. Selecione a seção e adicione display Flex, Justify Content Center, Align items, centralize na altura, 100 VH e, em seguida, coloque o fundo nessa Em seguida, vou direcionar o div do carregador e adicionar altura relativa da posição de 120 pixels Largura de 120 pixels também. Abaixo disso, vou direcionar os vãos dentro do div do carregador Adicione a posição zero superior absoluta, zero esquerdo também, a largura 100% para ocupar toda a largura da carregadeira e também a altura de 100% Em seguida, adicionarei um fundo azul temporário. Agora você pode ver que temos esse fundo azul com largura e altura de 120 pixels. Isso ocorre porque definimos a largura e a altura em 100% do contêiner, o carregador div, que por sua vez tem uma largura e uma altura de 120 pixels Na verdade, esse fundo azul não é um plano de fundo único, mas 20 planos de fundo que se cobrem ou cobrem o mesmo espaço, e cada um deles representa uma extensão que adicionamos em nosso HTML Pode não fazer nenhum sentido agora, mas veremos tudo claramente em um momento. Para criar nosso efeito, precisaremos girar cada extensão um grau diferente para que todas as extensões apareçam Como temos 20 vãos, podemos dividir 360 graus por 20 e obteremos 18 Para que todos os vãos apareçam, precisaremos girar o primeiro vão em 18 graus, depois o segundo em 36 e o terceiro em 54 graus, e assim por diante Cada vez que aumentamos o grau de rotação em 18. Vamos fazer isso bem rápido. Vou aqui e adicionarei a rotação de transformação 18 graus vezes a variável v. O que acontecerá aqui é que, para cada extensão, ela será girada em um grau igual a 18 vezes qualquer valor que sua variável tenha Por exemplo, o primeiro vão será girado um grau igual a 18 vezes um, que é 18 O quinto intervalo será girado por um valor igual a 18 vezes cinco, que é 90 graus, e assim por diante Mas você não quer me ouvir só falar sobre isso. Vamos realmente ver com o que vamos acabar. Bom. Agora você pode ver que temos essa forma em que todas as extensões são visíveis, pois foram giradas em um grau calculado que faz com que todas apareçam Vamos criar os pequenos círculos que estão presos a esses vãos Nós os criaremos usando o pseudo elemento anterior. Vou selecioná-lo aqui e adicionar conteúdo. Cadeias vazias, posição zero superior absoluta, zero esquerdo com 15 pixels Altura, 15 pixels também. Em seguida, o raio da borda 50% e o fundo, essa cor azul claro Agora você pode ver que temos esses pequenos círculos. Vamos remover esse fundo azul porque não precisamos mais dele. Agora você pode ver claramente todos os círculos conectados aos 20 vãos Ok, agora vamos fazê-los brilhar bem rápido. Vou aqui e adicionarei a sombra da caixa. Esse valor, o que acabei aumentar gradualmente o valor do desfoque para a propriedade box shadow E é isso que lhe dá um efeito brilhante, como o que você vê aqui Ok, agora vamos criar a animação que aplicaremos a esses círculos. Vou criar uma nova animação, batizada de Animate. Então, dentro dela, e com 0% da duração da animação, adicionarei a escala de transformação um. Então, em 80% e 100%, adicionarei a escala de transformação zero. No início da duração da animação. Com 0%, os círculos estarão em tamanho real. Então, de 0% a 80%, o tamanho dos círculos diminuirá até se tornar zero. Então fica em zero de 80% a 100%. Ok, vamos até aqui e adicionar essa animação. Vou adicionar animação animada de 2 segundos linear, infinita. Agora você pode ver que os círculos estão diminuindo até desaparecerem E então eles aumentam de tamanho novamente, nos dando esse efeito agradável, brilhante e brilhante que parece lâmpadas E esse já é um bom efeito que podemos usar em nossos projetos. Mas agora vamos experimentar algumas coisas legais. Podemos usar a propriedade de atraso da animação para manipular quando a animação do círculo começa, e isso pode nos dar alguns efeitos interessantes Vamos tentar. Vou aqui e adicionarei tempo de atraso de animação de 0,1 segundo ou variável. Cada período terá um atraso de animação diferente de acordo com o valor da variável. Vamos experimentá-lo. Você pode ver que temos esse belo efeito legal que parece que os círculos estão girando em torno um do outro Tente outro valor, vou mudar 0,1 segundo para 0,2 segundos. Agora você pode ver que estamos obtendo outro efeito interessante que divide o círculo em duas metades que giram uma após a outra Aqui está uma sugestão. Que tal você brincar um pouco com o atraso da animação e os valores da duração da animação e ver quais efeitos interessantes você pode obter. 142. Efeito de hover de animação de menu: Olá pessoal. Bem-vindo a outra nova lição do curso. Nesta lição, vamos criar outro novo efeito de foco no menu Você pode ver que temos esse menu vertical em que seus links têm uma borda esquerda. E quando passamos o mouse sobre a borda esquerda, você pode ver que ela se move para o lado direito do link, e o traçado do link é preenchido pela cor, dando esse efeito interessante Começarei aqui no meu HTML adicionando uma UL, depois uma L I dentro dela e uma tag âncora dentro dela Em seguida, adicionarei texto de dados para o primeiro link e adicionarei dentro do link. Então eu vou copiar isso e colar quatro vezes. Vou mudar o texto de cada link. Agora você pode ver que temos sobre serviços, equipe e contato. Ok, agora vamos ao nosso CSS e direcionar o corpo. Vou adicionar display flex, justify, content center, alinhar itens, centralizar , min, altura, fundo de 100 VH Em seguida, vou direcionar o U L e adicionar posição relativa da tela, coluna de direção flexível e a lacuna de 30 pixels Em seguida, vou direcionar o L I e adicionar estilo de lista relativo à posição N. Em seguida, vou direcionar o link e adicionar posição relativa ao tamanho da fonte para EMS, decoração de texto, espaçamento sem letras Dois pixels, altura da linha, um texto EM transformado em maiúsculas. Para tornar o texto um esboço, adicionarei cores transparentes O traçado do texto, um pixel, essa cor cinza. Agora você pode ver que a cor do link é transparente e temos um contorno cinza ao redor do texto Ok, vamos continuar. Selecionarei o pseudo-elemento anterior do link e adicionarei o atributo de conteúdo ao nosso texto de dados Agora você pode ver que temos o texto dos dados aqui. Ao lado de cada link, voltarei e adicionarei a posição absoluta. Agora que definimos a posição como absoluta, o texto dos dados está logo acima do link de texto. Parece que eles são uma coisa, mas vamos adicionar cor, essa cor azul. Agora você pode ver que o texto dos dados tem essa cor azul e o texto do link original está abaixo ou abaixo dele como um Também vou voltar e adicionar borda direita, oito pixels sólidos, nossa cor azul. Também adicionarei traçado de texto, um pixel, nossa cor azul. Agora você pode ver que temos essa borda azul à direita. E o texto também tem um traçado azul em vez de cinza. Ok, agora queremos ocultar o pseudo-elemento anterior, esse texto azul, e fazer com que ele apareça apenas quando passarmos o mouse sobre o link Vou aqui e adicionarei 0% de largura e, em seguida, estouro oculto. Finalmente, faça a transição de 1 segundo. Agora você pode ver que o pseudo-elemento anterior tem uma largura de zero e está oculto e o contorno do texto do link original está visível. Novamente, voltarei ao meu CSS e direi que, ao passar o mouse sobre o link, selecionarei o pseudoelemento antes e adicionarei largura 100%. Agora, quando eu passar o mouse sobre qualquer link, você pode ver que a largura do e está oculto e o contorno do texto do link original está visível. Novamente, voltarei ao meu CSS e direi que, ao passar o mouse sobre o link, selecionarei o pseudoelemento antes e adicionarei largura 100%. Agora, quando eu passar o mouse sobre qualquer link, você pode ver que a largura do pseudo-elemento anterior aumenta novamente para encobrir o esboço do link. Enquanto está ficando maior, a borda à direita está se movendo junto com ela, nos dando esse belo efeito. Mas dá para ver que a fronteira está bem próxima ao link. Será melhor se houver algum espaço entre o link e a borda Podemos fazer isso adicionando algum espaço ao redor do texto do link, bem como do texto dos dados. Vou para o meu HTML e dentro do texto de dados antes do texto do link, adicionarei um espaço ininterrupto que é um caractere especial em HTML que adiciona espaços no texto HTML. Vou adicionar outro antes do texto do link e outro depois dele. Agora você pode ver que a borda se deslocou um pouco para a esquerda e, ao passar o mouse sobre o link, ela também tem algum espaço à direita E isso faz com que pareça muito melhor. Ok, vou fazer isso bem rápido para todos os outros links. Agora, quando eu passo o mouse sobre qualquer link, você pode ver que a borda está se movendo da direita para a esquerda Junto com o crescimento do pseudo-elemento anterior, nos dá um efeito muito legal 143. Pontos criativos em CSS carregando animação: Olá a todos. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de carregamento. Você pode ver que temos esse efeito em que temos oito círculos, quatro deles são fixos e os outros quatro estão girando em torno deles, nos dá esse efeito interessante Vou começar aqui no meu HTML adicionando um div, dando a ele uma classe de caixa Então, dentro dele, adicionarei outro div com uma classe de carregador Então, dentro disso, adicionarei uma extensão e adicionarei estilo. Em seguida, usaremos variáveis CSS aqui. Vou adicionar I como nome de variável e atribuir a ela o valor um. Em seguida, copiarei essa extensão e adicionarei outras sete extensões para que tenhamos um total de oito extensões, como você vê Cada vez que o valor da variável aumenta em um, 1-8. Então, abaixo desse carregador, adicionarei um H três e direi Em seguida, vou ao meu CSS e seleciono o corpo, A Display Flex, justify, centro de conteúdo, centro de alinhamento de itens, depois em altura de 100 VH e, finalmente, transbordarei oculto e Então eu vou mirar no carregador. Adicione posição com largura relativa de 20 pixels, altura de 20 pixels. Em seguida, um fundo vermelho temporário. Agora você pode ver que temos esse fundo vermelho que está centralizado dentro do corpo Tudo bem, agora vamos estilizar o H two. Vou selecioná-lo e adicionar a posição absoluta superior 50% à esquerda 50% , transformar, traduzir menos 50% e menos 50% para centralizá-lo vertical e horizontalmente Em seguida, adicionarei o tamanho da fonte de 18 pixels, pinte essa cor azul marinho. Agora você pode ver que o H three está centralizado dentro da unidade da carregadeira Ok, vamos continuar. Vou mirar nos oito vãos dentro do carregador. Adicione posição, zero superior absoluto esquerdo zero largura 100% altura 100% também. Em seguida, adicionarei um fundo azul temporário. Agora você pode ver que temos esse fundo azul em cima do vermelho. Na verdade, esses estão de volta com várias origens. Não apenas um, mas eles estão sentados um em cima do outro. Mas queremos girar todos eles em graus específicos para torná-los visíveis Vou adicionar a rotação de transformação. Como temos oito vãos, vou girar o primeiro em 45 graus, depois o segundo em 90 graus, depois o terceiro em 135 graus, e assim por diante, o final será girado exatamente 360 graus, já que o final será girado exatamente 360 graus, 360/8 Tudo bem, vamos fazer isso. Vou aqui e adicionarei 45 graus vezes V. Adicionarei nossa variável que contém esses valores em nosso HTML. O primeiro vão girará uma vez 45, que é 45. A segunda extensão será girada duas vezes 45, que é 90, e assim por diante para todas as outras extensões até que a última seja girada Como você pode ver. Agora temos essa estrela que tem oito cabeças, mas vamos continuar. Adicionaremos os oito círculos como um pseudo-elemento anterior. Para esses oito trechos, selecionarei o pseudo-elemento anterior dos e adicionarei conteúdo, cadeias vazias Zero à esquerda, zero largura, 20 pixels, altura 20 pixels, raio da borda 50% Então, finalmente, cor de fundo, essa cor azul Em seguida, removerei essa cor de fundo azul e essa cor de fundo vermelha. Agora você pode ver que temos esses oito pontos azuis que circundam perfeitamente o Tudo bem, agora queremos selecionar apenas quatro pontos dos oito para mudar sua cor e animá-los. Queremos o segundo, o quarto, o sexto e o oitavo. Eu vou aqui e adicionarei um evento infantil. O que isso fará é selecionar apenas os elementos que têm um número par, o segundo, o quarto e assim por diante. Então, dentro disso, adicionarei uma cor de fundo, essa cor azul clara. Agora você pode ver que esses elementos têm uma cor de fundo azul claro. Tudo bem, vamos criar uma nova animação. Dê o nome de círculo dentro dele. Em 0,25%, adicionarei transformação, rotacionarei zero graus e escalarei Então, a 50%, adicionarei a rotação de transformação de 90 graus e escala de 1,3 para que fique um pouco maior durante a rotação Então, abaixo disso, em 75% e 100%, adicionarei rotação de 180 graus e escalarei um para devolvê-lo ao tamanho original Em seguida, vou até aqui e adicionarei círculo de animação de 1 segundo linear infinito. Agora você pode ver que os círculos estão escalando e girando. Mas como eles estão girando em torno seu ponto central e de seus círculos, eles realmente não parecem estar girando O que podemos fazer para fazê-los girar em torno dos outros círculos é que podemos ir aqui e adicionar 60 pixels de origem de transformação Agora você pode ver que os círculos estão se movendo em torno dos outros, dando um efeito muito legal. 144. Efeito de hover no menu de desbotamento de texto: Olá a todos. Bem-vindo a esta nova lição do curso. Nesta lição, vamos criar esse belo efeito de foco no menu Você pode ver isso quando passamos o mouse sobre qualquer link no menu. Esse efeito acontece quando a cor do link fica semitransparente e esse pequeno texto verde brilhante aparece cobrindo o texto do link É um efeito bem simples , mas legal. Vamos ver como podemos criá-lo. Vou começar aqui no meu HTML adicionando uma seção dentro dele. Adicionarei uma UL, depois uma L I e uma tag âncora dentro dessa L I. Em seguida, adicionarei um atributo de texto de dados e adicionarei home dentro dele Em seguida, adicionarei home dentro da etiqueta de âncora. Portanto, usaremos esse atributo de texto de dados para recuperá-lo e usá-lo como texto sobreposto Você pode ver que acabei de copiar e colar esses links e apenas alterei o texto Tudo bem, vamos ao nosso CSS e selecione a seção. Vou adicionar posição, largura relativa, 100% de altura, tela de 100 VH, flexionar, justificar o conteúdo, centralizar uma linha, itens, centro, transbordamento, fundo oculto, essa Em seguida, vou direcionar o LI dentro do UL e adicionar o estilo de lista none. Também direcionarei a tag âncora na posição relativa, bloco de exibição, decoração de texto não alinhamento de texto, centro do texto, transformação, tamanho da fonte em maiúsculas , tamanho quatro, cor EM, branco, peso da fonte 700, transição de 0,5 segundos Agora você pode ver que os links estão muito melhores. Ok, vamos continuar. Ao passar o mouse sobre o link, queremos que a cor do link seja semitransparente Eu direi que ao passar o mouse sobre a etiqueta âncora, adicionarei uma cor, essa cor que é apenas branca, mas com Tudo bem, agora, ao passar o mouse sobre o link, você pode ver sua cor mudar para a cor semitransparente que queremos Ok, agora vamos trabalhar no pequeno texto. Usaremos o pseudo elemento anterior da tag âncora. Para fazer isso, vou selecioná-lo. Dentro dele, adicionarei o atributo de conteúdo, texto de dados para recuperar o texto dentro do atributo de texto de dados para cada link Em seguida, adicionarei a posição absoluta superior 50% à esquerda 50% e depois pintei esta linda cor verde. Agora você pode ver que o texto verde está cobrindo os links. Tudo bem, vamos voltar e adicionar o tamanho da fonte 0,35 M para diminuir o tamanho da fonte Assim como nosso exemplo, espaçamento entre letras, 40 pixels para separar as letras Agora você pode ver que as letras são menores e separadas umas das outras. Vamos continuar um pouco mais. Queremos adicionar um pequeno efeito de brilho aos links. Vou adicionar sombra de texto de 0,010 pixels como um valor desfocado. Em seguida, nossa cor verde, copiarei e colarei esse valor duas vezes e aumentarei o valor do desfoque a cada vez Em seguida, adicionarei a espessura da fonte 500. Agora você pode ver que o texto está brilhando devido à sombra da caixa que adicionamos Tudo bem, vou voltar e adicionar transição 0,5 segundos e opacidade zero para ocultar o texto Em seguida, ao passar o mouse sobre a LI, selecionarei o pseudo-elemento anterior e adicionarei opacidade um e espaçamento selecionarei o pseudo-elemento anterior e adicionarei opacidade um e espaçamento opacidade um e Vamos animar a propriedade de espaçamento entre letras de 40 pixels a seis pixels para obter nosso efeito Assim, ao passar o mouse sobre qualquer link, o pequeno texto se junta e, o pequeno texto se em seguida, o texto do link desaparece Mas queremos adicionar algum atraso na transição para que os links desapareçam primeiro e somente depois o texto verde apareça Então, quando passamos o mouse para longe, o texto verde desaparece primeiro e, em seguida, o link original fica branco novamente Podemos fazer isso facilmente acessando aqui a tag âncora e adicionando atraso de transição de 0,5 segundos. Então, ao passar o mouse sobre ele, adicionaremos o atraso de transição zero Ao fazer isso, ao passar o mouse sobre o link, ele mudará imediatamente Mas ao se afastar, ele aguardará 0,5 segundos Em seguida, faremos exatamente o oposto do texto verde. Vou aqui ao passar o mouse sobre ele e adicionar atraso de transição de 0,5 segundos Ao pairar o mouse, o atraso acontecerá, mas ao pairar para longe, isso não Você pode ver o link animado e depois o texto verde ao passar o mouse para longe, o texto verde anima e depois o link, nos dando exatamente o