Projetos de animação em CSS: 50 animações práticas na web

1. Apresentação: Olá e bem-vindo, coloque essa emocionante jornada no mundo da animação CSS. Meu nome é Jonatha Shoko. Sou desenvolvedor web Fullstac, programador Python Neste curso, vamos nos aprofundar em 50 projetos de animação do mundo real. Isso não apenas aprimorará suas habilidades, mas também o ajudará a criar sites interativos e visualmente impressionantes Começaremos com alguns projetos divertidos e poderosos, como Projetos transformação de botões CSS. Aqui, criaremos animações de botões envolventes e modernas. Em seguida, menueffet com a transição. Aqui, vamos adicionar uma transição suave e criativa aos seus menus de navegação. Em seguida, efeito de imagem com transição. Iluminando suas imagens com efeitos baseados em foco e transformação Depois disso, abordarei as animações de quadros-chave CSS. Aqui, revelaremos o verdadeiro potencial do CSS para criar movimentos dinâmicos e atraentes E, finalmente, daremos um passo adiante com o projeto de animação em JavaScript, combinando o poder do CSS e JavaScript para animação avançada. Ao final deste curso, você terá 50 projetos de animação concluídos em seu portfólio, que você poderá mostrar com orgulho para seus funcionários e clientes ou até mesmo usar em seus próprios Vamos dar vida às suas páginas da web com projetos de animação. Vamos começar. Muito obrigado 2. Efeito de botão rotativo criativo usando CSS: Portanto, este é nosso primeiro projeto usando propriedades de transformação CSS. Não vamos usar o quadro-chave para animar o elemento. Então, como você pode ver neste exemplo, aqui criamos um botão. Se eu abrir meu carro neste botão, aqui você pode ver um lindo efeito de transição de botão. Então, vamos construir hoje neste projeto. Então, vamos ao editor de código do isal Studio e ver como podemos criar esse projeto Então, como você pode ver, eu já abri meu editor de código isal Studio E eu já crio um arquivo HTML chamado index dot TML. Além disso, criamos outro estilo de arquivo CSS com pontos, e eu já abro este site usando meu servidor ativo. Este é o nosso site. Está completamente em branco. Em seguida, vamos voltar ao código do estúdio do usuário. Primeiro, dentro da minha tag corporal, vou adicionar uma tag NCat, A e HI Dentro dessa tag Anca, vou digitar hover Me. Em seguida, vou entrar no estilo de arquivo CSS CSS. Eu já vinculo esse arquivo a este documento ESTeML. Aqui vamos começar esse estilo. No começo, vou mirar na etiqueta corporal. Então, dentro da lista, vou atribuir altura, altura e vou atribuir 100 VH Quero colocar a tag âncora no meio desta página, então vou usar a propriedade Os flocos de exibição justificam o conteúdo, justificam o centro de conteúdo. Além disso, vou usar alinhar item, alinhar itens ao centro. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, como você pode ver, ele centralizou o texto, eu centralizei a tag âncora Agora vou abrir meu navegador e meu editor de código lado a lado. Como você pode ver, aqui abrimos meu navegador e meu editor de código lado a lado para nossa conveniência. Usando o flexbox, centralizamos esse elemento no meio desta página horizontal Basicamente, não tem nada a ver com animação. Se você quiser aprender flexbox e greet, você pode se inscrever em meus Agora, vamos estilizar o vazamento. Quero direcionar esse link usando seu nome de tag A e, dentro dos cálices, primeira propriedade, vou usar decoração de texto, decoração texto, decoração de texto, none, e vou definir esse Se eu definir esse arquivo, como você pode ver, ele removerá esse sublinhado do texto Depois disso, vou atribuir uma cor de fonte. Então digite a cor e eu vou atribuir a cor preta. Eu quero usar uma fonte de cor preta para este exemplo. Em seguida, vou definir a família da fonte, a família da fonte e quero usar a fonte aérea, aérea Depois disso, vamos ativar o problema Raf View e Waraph Depois disso, vou atribuir o tamanho da fonte e o tamanho da fonte e quero atribuir o tamanho da fonte de 45 pixels, 45 pixels. Então eu quero atribuir Border. Fronteira. Eu quero uma borda sólida em pixels de luta , sólida e a cor da borda também é preta. Preto. Então eu quero definir o preenchimento. Adicionando de cima para baixo, vou definir 30 pixels e da esquerda e da direita, vou atribuir 80 pixels. Por fim, fornecerei a posição desse elemento, algum tipo de posição relativa. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Agora, para criar um belo fundo verde, precisamos usar o pseudo elemento anterior Se você não conhece nenhum conhecimento sobre pseudoelementos, é permitido criar antes do elemento EstiML, caso contrário, após o elemento estimal usando CSS Então, vou selecionar a tag âncora e aqui vou usar antes da classe p zero antes de d dentro do alias, aqui vou usar uma propriedade chamada content, content, e é um conteúdo vazio E para definir o conteúdo vazio, precisamos usar códigos de policiais individuais Depois disso, precisamos definir a posição da posição e eu vou usar absoluto. Além disso, preciso definir a posição inicial, então vou digitar laboratório zero e, de cima, também zero. Então, agora temos nosso pseudo elemento anterior e sua posição é o canto superior esquerdo deste link Agora, antes que o psudoelement seja colocado no canto superior esquerdo deste link Agora, vamos adicionar a cor de fundo. Cor de fundo em vez de usar verde, eu gostaria de usar a cor amarela. Eu já copiei um valor de Higa para essa cor de fundo e vou colá-lo aqui Ele vai retornar a cor laranja. E então vou atribuir altura a isso antes do elemento positivo, altura , 100%, e também a seguir, vou atribuir também 100%. E eu vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Portanto, agora você pode ver o elemento positivo anterior aparecendo como cor de fundo dessa etiqueta de âncora e também ocupar toda a largura e altura desse link Mas o problema é esse elemento, altura do texto dessa tag âncora Aqui não podemos ver a palavra Hoberm. Podemos consertá-lo facilmente. Se eu passar, se eu usar esse índice Z de propriedade e se eu usar menos um valor, defina esse arquivo Agora isso resolve o problema. Esse texto aparecerá novamente na frente desse fundo laranja, e agora precisamos girar esse fundo amarelo no sentido horário a partir dessa E precisamos girá-lo a partir do canto inferior do lábio. Então, primeiro, precisamos definir a origem da transformação a partir de qual posição eu quero transformar isso antes do elemento positivo, Sandro digite transform Oisin e eu vou fornecer o valor inferior deste canto . Em seguida, vou usar outra propriedade chamada transformar, transformar, e vou usar o valor de rotação, girar dentro dos versos redondos, quero girá-lo até Depois de definir esse arquivo, fica assim que eu girar esse elemento -90 graus a partir daquele canto e depois adicionarei a transição Transformação de transição, e eu quero atribuir mais uma vez para essa transição 1 segundo. Eu quero fazer a transição dessa propriedade de transformação por 1 segundo, então ela completará a rotação em 1 segundo. Em seguida, precisamos criar o seletor Huber. Se eu usar esse elemento , quero girá-lo até zero grau Para isso, aqui, vou digitar. Primeiro, vou selecionar a tag âncora, depois vou usar o seletor Huber, a classe HoberPosito, o Hover Depois disso, vou selecionar a aula anterior ao posito Então, dentro do carro, diz: vou usar a propriedade de transformação novamente, transformar e, novamente, vou usar o valor de rotação Desta vez, quero girar esse elemento até zero grau Quero dizer que quero mover esse elemento para a posição original Agora, depois de configurar esse arquivo, se eu passar o mouse sobre este link, você poderá ver o resultado Como você pode ver, quando eu coloco meu carro sobre esse elemento, ele gira o elemento anterior em zero grau. Então está funcionando. Mas o problema é que precisamos esconder esse fundo laranja fora dessa caixa, fora dessa área de fronteira. É muito simples esconder esse elemento. Para isso, você precisa ir para o seletor de âncora e aqui você precisa usar uma propriedade chamada Estoure aqui, e você precisa definir esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Basicamente, ele esconde o elemento fora dessa área de borda, mas se eu passar o cursor sobre esse elemento, você pode ver o resultado Desta vez, você pode ver esse lindo efeito rouco, efeito botão Huber Esse plano de fundo só é visível na área anctg. Fora da área de ancoragem, não é visível porque ocultamos esse elemento E se você quiser mudar a posição dessa rotação, sim, você pode. Deixe-me mostrar como, mas antes vou desrecomendar essa linha, porque precisamos entender como Agora, desta vez, quero girar esse elemento a partir desse canto inferior direito Então, em vez do canto inferior esquerdo, vou usar o canto inferior direito. Eu vou configurar este. E agora você pode ver que sempre que eu coloco minhas cartas nesse elemento, esse elemento de cor laranja gira a partir do canto inferior direito Mas se eu alterar o valor da rotação, se eu fizer 90 graus em vez de usar -90 graus e depois esse arquivo, você poderá ver o resultado diferente Desta vez, ele vai girar esse elemento de anti-glaucois Então, se eu pular meu carro nesse elemento, você pode ver o resultado. E se eu usar a propriedade overflow hidden, salvá-la novamente e mouse sobre meu carro ou esse botão, você poderá Então, aqui mudamos a posição da rotação, se eu mudar o valor dessa origem da transformação e o valor da transformação. Então é assim que podemos criar esse lindo efeito de passar o mouse sobre o botão sem usar animação, para usar propriedades de transição Usando a transição e o mouse, podemos fazer muitas coisas Isso é tudo para este tutorial. Em nosso próximo tutorial, abordaremos muitos projetos de animação. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 3. Efeito de botão deslizante usando css: Olá, pessoal. Neste projeto, vamos criar esse lindo e bonito Heft de deslizar Quando eu passo o mouse sobre este link, como você pode ver, um plano de fundo desliza suavemente até este botão e ele cobre o fundo do Além disso, é uma cor de texto de botão cafona. Quando eu removo minha casa, novamente, ela volta à sua própria posição. Vamos ver como podemos criar esse lindo Heft. Então, como você pode ver lado a lado, abro meu editor de código z sto e meu navegador usando a extensão Live Server e já crio um documento HTML chamado index dot TML Com isso, eu já incluo o arquivo CSS de estilo nesta página. Basicamente, vamos criar um botão de deslizar o Hoverifi Então, primeiro, na minha etiqueta corporal, vou adicionar uma etiqueta âncora, A, e o tipo herói passa o mouse sobre E eu vou configurar esse arquivo. Até configurar esse arquivo, como você pode ver na minha página, por padrão, ele o coloca aqui no canto do laptop. Em seguida, precisamos colocar esse link no meio desta página. Para isso, precisamos entrar no arquivo CSS tile dot. Aqui, vou selecionar o corpo da etiqueta corporal e, dentro das Maldições, vou atribuir altura ao nosso corpo Altura 100 VH, 100 pés de altura de visualização e exibição aqui, vou usar o flex Então justifique, contenha, justifique, contenha o centro. Além disso, vou usar outra propriedade chamada aligns align items center E eu vou configurar esse arquivo. configurar esse arquivo, é assim que ele se parece. Agora, ele coloca a tag âncora horizontal e verticalmente no meio Em seguida, precisamos tornar esse link mais agradável. Para isso, vou direcionar essa tag âncora usando seu nome de tag A. Então, dentro do recesso encaracolado, primeiro, quero remover o sublinhado dessa tag âncora Para isso, vou usar uma propriedade chamada decoração de texto. Decoração de texto, nenhuma. Depois disso, vou atribuir uma cor, cor, e quero atribuir um valor hexa, hashtag 35, 14 e 35 novamente É de cor roxa. Em seguida, vou atribuir a família de fontes à família e aqui vou atribuir a área. Fonte aérea Em seguida, vou atribuir o tamanho da fonte, tamanho da fonte de 40 pixels. Depois disso, depois disso, vou atribuir uma borda. Borda, eu quero uma borda sólida de três pixels. Vou usar a mesma cor de borda da fonte. Eu copio o hexa Velo e vou colar aqui. Então eu vou configurar esse arquivo. de configurar esse arquivo, ficou assim. Agora precisamos adicionar preenchimento nesse link angular. Para isso, vou digitar preenchimento. De cima para baixo, vou adicionar 40 pixels e da esquerda e direita, vou adicionar 80 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Também precisamos definir uma posição. Posição e posição, eu quero atribuir relativa. Além disso, precisamos atribuir a transição porque, sem a transição, não podemos animar esse botão Vou digitar a transição, vou adicionar tudo e vou executar por 1 segundo. Eu passo um e vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Agora está muito melhor e agora vamos trabalhar no Swipe Portanto, para a ideia por trás desse efeito esposa, precisamos criar um pseudo-elemento anterior Isso ocupará toda a largura e altura desse link. Em seguida, vamos traduzi-lo fora do link. E se passarmos o mouse sobre esse link , removeremos a tradução Então, ele vai voltar para seu próprio lugar. Agora, vamos criar o pseudo-elemento antes do pseudoelemento No começo, vou digitar, vou definir a tag âncora do que antes Então, dentro da classe, primeiro, precisamos criar um conteúdo vazio. Conter está vazio e é um conteúdo vazio. E assim faremos nesta linha. Então, precisamos definir a posição, posição e eu vou atribuir o absoluto. Em seguida, precisamos colocar esse elemento no canto superior do lábio. Aqui vou digitar lap t zero, top também zero, e vou atribuir altura, altura, 100% de largura, 100%. Então eu vou atribuir a cor de fundo, cor de fundo, e vou atribuir a mesma cor de fundo, então eu colo este link neste hexa V que vou definir este arquivo Depois de definir esse arquivo, como você pode ver, nosso pseudo-elemento aparece acima do Huber Mi e do texto da barra Precisamos usar o valor do índice Z para resolver o problema. Vou atribuir o índice Z e vou passar o valor menos um Vou configurar esse arquivo. Depois de definir esse arquivo, depois de definir esse arquivo, agora ele fica atrás do texto, mas não é visível por causa da cor do texto e a cor do plano de fundo é a mesma. E agora vamos criar esse efeito de deslizar a partir de agora, que será facilmente realizado pela transição Então, precisamos mover esse elemento da direção XXs. Então, vou usar a propriedade transform, transform, e vou usar translate X value, translate X, e aqui vou passar. -100% E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora é ir além da fronteira. Agora ele move esse elemento 100% lado do lábio porque usamos menos a largura Além disso, nosso texto é visível por causa da cor de fundo branco. Agora, ao passar o mouse sobre esse link, quero que o pseudo elemento anterior volte ao seu próprio lugar Também quero mudar a cor do texto para branco. Quando eu passar o mouse sobre esse link, então vou selecionar esse link, vou criar o seletor Hober no seletor vermelho, ATAC, dois pontos, Então, dentro da classe, vou transformar, transformar, traduzir X e amnopas zero Isso significa que ele voltará ao seu próprio lugar novamente. Além disso, quero adicionar um efeito de suavização, portanto, na transição. Com isso, precisamos definir o tempo, então vou definir 1 segundo. Então, depois de configurar esse arquivo, quando eu passo o mouse sobre este link, você pode vê-lo de volta ao seu próprio lugar novamente. Agora precisamos mudar a cor da fonte desse texto. Além disso, precisamos ocultar o plano de fundo fora do link. E é muito simples ocultar o elemento de transbordamento. Só precisamos entrar na tag âncora e , em seguida, usar a propriedade overflow overflow hidden E eu vou colocar esse arquivo. Altere esse arquivo, como você pode ver, ele oculta o elemento, o elemento anterior positivo. E se eu pular que meus carros estão neste texto, como você pode ver, novamente, esse slide aparece, está de volta ao seu próprio lugar. Portanto, o fundo é invisível do lado de fora, e também obtivemos o efeito que queremos. E, finalmente, vamos traçar o texto colorido. Então, primeiro, vou selecionar a tag âncora, A, passar o mouse Então, dentro do carro***, se eu tiver esse link, quero mudar a cor, a cor branca Vou configurar esse arquivo. Então, depois de definir esse arquivo, se eu passar o cursor sobre este link, como você pode ver, ele ficou branco e também aconteceu sem problemas porque adicionamos a transição toda em nossa tag âncora, Agora entendemos o conceito de efeito de deslizamento. Se você quiser mudar a direção, sim, você pode. Você pode facilmente mudar a direção. Você pode aparecer este, este slide do lado direito, também da parte superior e inferior. Agora vamos mudar a direção. Eu quero mostrar esse slide do lado direito. Para isso, você precisa alterá-lo em uma linha. Vou duplicar esta linha e comentar a anterior Esse é para lábio. Vou digitar meu comentário ao lado do lábio. Se eu alterar o valor, se eu torná-lo positivo, ele colocará este no lado direito. Depois de configurar esse arquivo, se eu voltar ao meu navegador e clicar aqui, agora você pode vê-lo vindo da direção oposta, do lado direito desta caixa. Então é assim que podemos mudar a direção. Espero que agora esteja claro para você como podemos criar esse efeito. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 4. Efeito de hover de botão: Olá, pessoal. Neste vídeo, criaremos o lindo Haeffet Se eu passar minhas cartas neste botão, você pode experimentar esse Haeffet Então, vamos ver como podemos soldar esse lindo efeito. Então, como você pode ver, estamos no editor de código do meu estúdio de resultados. E aqui eu já abri meu documento HTML anterior no Exot TML Em nossa tag body, já criamos essa tag âncora. Além disso, vinculamos ao arquivo CSS Style Dot. E se eu pular para o arquivo CSS de estilo , como você pode ver, já alinhamos esses elementos âncora horizontal e verticalmente no meio desta Eu uso esse código porque não quero tornar nossos projetos muito longos. E agora vou focar nesse elemento âncora. Vou digitar A e, dentro da propriedade cliVSF, vou usar preenchimento, preenchimento vou atribuir 40 pixels da parte superior e inferior e 80 pixels da esquerda e Em seguida, vou usar outra propriedade chamada família de fontes. Família de fontes, vou usar o sensorial. São Salk. Em seguida, vou remover o sublinhado, então vou usar a decoração de texto Decoração de texto, nenhuma. Depois disso, vou definir o tamanho da fonte. Tamanho da fonte, tamanho da fonte e eu vou definir 45 pixels. Em seguida, vou adicionar uma cor a essa fonte. Alguns de vocês usam cores e, como cor, vou usar o valor hexa 26, 26, 26, esse código de cores, meio cinza escuro Em seguida, vou definir o espaçamento entre as letras Então, eu quero digitar o espaçamento entre letras e adicionar um espaçamento entre letras de dois pixels Em seguida, vou adicionar uma borda. Borda Eu quero adicionar cinco pixels e uma borda sólida, então. Além disso, nossa cor de borda é da mesma cor da fonte, copie o código de cores e eu vou colocá-lo aqui. Depois disso, precisamos definir a posição relativa e também definir a transição. Transição, e eu quero fazer a transição por 1 segundo, uma é. Vou configurar esse arquivo. Depois de definir esse arquivo, esta é a aparência do nosso botão. Agora precisamos usar um pseudoelemento, e eu vou usar o pseudo-elemento anterior Isso nos permite criar um elemento antes do elemento. Vou criar a pose anterior para selecionar Eu vou, vou direcionar o elemento A, dois pontos, BF Então, dentro da primeira propriedade do alivss vou usar para criar um conteúdo vazio, então digite content CONTENT content e aqui vou criar um Em seguida, ponto e vírgula para finalizar essa linha. Depois disso, vou definir a posição. Posição, vou usar absoluta. Então, precisamos definir a posição em que eu quero colocar esse elemento, esse elemento de conteúdo vazio. Eu quero colocá-lo, eu quero colocá-lo naquele lugar naquela esquina. Então, do topo, eu vou passar de zero e da esquerda, eu vou passar também de zero. Então eu quero definir com e quero usar 100% do peso desse contêiner. 100%. Além disso, vou atribuir altura, altura e também 100%. Em seguida, precisamos definir uma cor de fundo para esse elemento. fundo e cor de fundo Como cor de fundo, quero atribuir a mesma cor de fundo, então copio esta. Eu colo este e também vou adicioná-lo à transição. Transição, quero fazer a transição por 1 segundo e vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece com nosso elemento Covert D text, e precisamos usar o valor do índice Z para criar ApirDtt Agora você não consegue mais ver o link, o texto do link porque esse elemento anterior aparece na frente dele e sabemos como resolver o problema usando o índice Z. Agora vamos falar sobre o campo de rotação. Você se lembra de girar x com o início de nossa seção anterior Já aprendemos girar x e girar Usando a rotação x, podemos girar nosso elemento ao longo do eixo X e, usando a rotação Y, podemos girar o elemento ao longo do nosso elemento ao longo do eixo X e, usando a rotação Y, podemos girar o elemento ao longo do eixo Y. Deixe-me te mostrar isso. Se eu abrir este site, este é o exemplo de rotação X. Se eu ouvir meu cursor sobre esse elemento de rotação x, você poderá É assim que ele gira. Eu giro esse elemento 80 graus e se eu girá-lo 90 graus, como você pode ver, e depois passar meus carros sobre ele, agora às vezes ele desaparece completamente Se eu girar esse elemento em 90 graus, ele fará com que ele desapareça da mesma forma. Se eu cursor no elemento de rotação Y, esta opção, como você pode ver, é assim que ele usa esse Isso é o que a rotação X e a rotação Y fazem. Agora vamos voltar ao código. Aqui, vou usar outra propriedade chamada transformar, transformar, e vou usar o valor rotacionar X, essa, vou girar esse elemento em 90 graus Vou configurar esse arquivo. Depois desse arquivo, como você pode ver, o elemento desaparece porque, como eu disse, se eu girar esse elemento em Xxs a partir do xs 90 graus, ele desaparecerá Suponha que esse seja o elemento. Se eu girar o elemento a partir do xs a 90 graus, como você pode ver, o elemento desaparece Só você pode ver uma única linha. Então é isso que aplicamos nesse elemento. Isso desapareceu antes do pseudoelemento. Agora, se eu passar minha Kara sobre esse elemento, quero tornar o pseudo-elemento Para isso, vou criar um seletor Her tipo s e categoria A, depois vou criar um seletor Her hover e, em seguida, vou usar antes da positoclass anterior Então, dentro dos aliases vou usar a mesma propriedade transform, copiá-la e colá-la aqui, mas desta vez vou usar zero grau Vou torná-lo zero novamente, zero DEG depois de definir este arquivo, se eu voltar ao meu navegador e meus cartões estiverem nesse elemento, como você pode ver, agora ele está de volta ao seu próprio lugar novamente Ele gira o elemento em zero grau. Agora você pode ver, novamente, a altura do texto. Por causa da transição mais uma vez, podemos experimentar essa rotação muito suavemente. Além disso, precisamos alterar a cor do texto quando passamos o mouse sobre o link Precisamos convertê-lo em branco. Então, quando direcionamos o link, caso contrário, passe o mouse sobre o link, quente seguida, dentro do recesso de cores mudarei a cor e a deixarei Eu vou definir esses cinco. Em seguida, vou mover esse pseudo-elemento um passo para trás Então, aqui, vou digitar o índice Z menos um. Que o texto mostre na frente do elemento. Depois de definir esse arquivo, se eu passar meus carros sobre esse elemento, você poderá ver o resultado Você pode experimentar essa transição. Se eu passar o mouse sobre minhas cartas, ele gira o elemento em zero grau e também muda a cor do texto, e eu crio um lindo efeito de botão Agora o que? Se eu girar esse elemento em YXS, se você criar outro elemento Posido usando Uter, deixe-me mostrar. Vou duplicar esta seção e, desta vez, vou criar outro elemento acima do elemento Eu vou usar o seletor Ater, depois. Então, desta vez, vou girá-lo em YX. Y, 90 graus em YxS. Além disso, vou copiar esta seção, entendeu esta seção? Desta vez, vou passar o mouse sobre o Ater PositoGlass. E também precisamos alterar o valor da rotação. Precisamos fazer com que ele gire Y. E eu vou configurar esse arquivo Depois de definir este arquivo, se eu passar meu Carter sobre esse elemento, aqui você poderá experimentar um lindo efeito de botão Se eu passar meu carro sobre esse elemento, ele gira os dois Antes do elemento também o elemento posterior de 920 graus. É por isso que criou um lindo efeito de foco. Então, espero que agora esteja claro para você como podemos criar esse lindo efeito de passar o mouse sobre o botão Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 5. Efeito de botão brilhante: Olá, pessoal. Neste projeto, vamos criar esse efeito quando eu passar o mouse sobre este link Aqui você pode experimentar esse efeito. Agora deixe-me mostrar a demonstração de neve. O que exatamente está acontecendo aqui. Quando eu passo o mouse sobre este link, você pode experimentar esse resultado Depois que ela acessou este link, como você pode ver, ele mudou a cor de fundo. Além disso, você pode notar que há uma linha branca grossa inclinada 45 graus e ela passa pelo link ao mesmo tempo em que eu passo o mouse sobre o link e também mudo a cor de fundo Nós vamos conseguir esse efeito. Vamos voltar ao editor de código do estúdio do usuário. Como você pode ver, já criamos nome do documento HTML index dot TML dentro da nossa tag body, aqui digite A e ctTaghber Então eu já conecto um arquivo CSS com esse estilo de ponto CSS. E se eu entrar no arquivo CSS de estilo, como você pode ver, primeiro forneço a altura em nossa seção de corpo, depois usamos displayflakes e justificamos o centro de conteúdo e o Align In center para posicionar a tag âncora no meio desta página vertical e Align In center para posicionar a tag âncora no meio desta depois usamos displayflakes e justificamos o centro de conteúdo e o Align In center para posicionar a tag âncora no meio desta página vertical e horizontalmente. Agora, primeiro, vou adicionar um fundo cinza escuro, uma cor de fundo apertada. E eu vou usar um valor hexa com a tag Has tag 22, dois, e vou definir esse arquivo Depois de configurar esse arquivo, como você pode ver, desta vez ele mudou a cor de fundo cinza escuro. Em seguida, vou focar nessa tag âncora. Vou estilizar esse botão. Então você digita A, então dentro da primeira propriedade do clivus, eu vou usar takes decor, decoração de texto Precisa de decoração, vou usar objetos não pertencentes. Depois de remover o sublinhado do texto, vou atribuir uma cor a esse texto, cor, e quero atribuir a cor branca à branca Em seguida, vou atribuir família de fontes, família de fontes e quero atribuir família de fontes Sans Em seguida, vou atribuir o tamanho da fonte. Tamanho da fonte, quero atribuir um tamanho de fonte de quase 40 pixels, 40 pixels. Acho que é o suficiente para isso. Eu perturbei isso. É assim que parece. Agora vou adicionar uma borda, uma borda sólida. Tipo de propriedade de borda de tipo, e eu quero três pixels de borda sólida, sólida. Além disso, vou atribuir uma cor de borda à cor da borda, vou adicionar a cor branca, branca e vou definir esse arquivo Em seguida, vou adicionar preenchimento, preenchimento de algum tipo, De cima para baixo, vou atribuir 40 pixels e da esquerda para a direita, vou atribuir 80 pixels. E eu vou configurar esse arquivo. Eu configurei esse arquivo, é assim que ele se parece. Em seguida, vou usar a propriedade de transição. Transição para transição, vou atribuir transição para todas essas propriedades, ou seja, tudo, e então vou definir a duração da transição, que é de 0,3 segundo. Em seguida, vou definir a posição relativa. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Em seguida, quero mudar a cor de fundo ao passar o mouse sobre este link Eu quero torná-lo vermelho. Vou criar um seletor de foco, tag de âncora Então, dentro da classe, vou mudar algum tipo de cor de fundo, cor de fundo, e vou atribuir vermelho à cor vermelha Agora eu preceito esse arquivo. Estou aqui neste link, como você pode ver, agora a cor de fundo muda para a cor vermelha. E agora eu quero criar a linha branca grossa. E para isso, vou usar antes o pseudo elemento. Então, vou criar o pseudo elemento anterior. Primeiro, vou escolher a etiqueta ka, depois dois pontos, e vou empatar antes Então, dentro das cálices, primeiro, vou criar um conteúdo vazio, contendo dois pontos, e é um conteúdo vazio Então eu quero definir a cor de fundo para esse elemento. Cor de fundo, e eu quero atribuir a cor branca. Branco. Depois disso, vou definir a posição do pseudo-elemento Estou digitando a posição e desta vez, quero atribuir uma posição absoluta. Então eu quero colocar esse elemento naquele canto, no canto superior. Do topo, vou atribuir zero e, da esquerda, vou atribuir zero também. Então, precisamos definir a altura desse elemento. Para largura, vou atribuir 100%, 100% e para altura, deixe-me atribuir altura, vou atribuir 50 pixels e vou definir esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Este é o nosso pseudo-elemento anterior. E agora eu quero movê-lo para o lado esquerdo fora da área do link. Para isso, vamos usar, vou usar a propriedade transform, algum tipo transform transit X minus, quero traduzi-la em até -100% E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Eu movo isso antes do pseudo-elemento para fora desta área, para fora desta área de etiqueta de gato E agora eu quero girar esse elemento em 45 graus. Então, aqui, vou usar o valor de rotação, girar. E eu quero girá-lo até 45 graus, e eu vou subtrair esse arquivo. Depois de girá-la até 45 graus, é assim que nossa linha se parece Agora, se eu colocar meu carro nesse botão, quero mover essa linha para o lado direito para obter o efeito Além disso, precisamos atribuir a transição para o efeito de suavização. Vou usar essa transição de propriedade, então copio essa e vou colocá-la aqui Agora, vou fazer algumas alterações ao passar o mouse sobre o link no meu botão Eu quero mover o pseudo-elemento anterior. Para isso, precisamos criar uma tag de âncora seletora, mouse e usar o psudoelemento before, before Então, dentro do carro, diz: Ei, eu vou usar a propriedade transform, transform, translate. Traduza, e eu quero movê-lo para 100%, não menos, 100% positivo Além disso, durante o botment, quero girar os elementos, use a rotação 45 Agora, depois das septicinco, quando eu passo por cima, meus carros estão nesta fila, agora você pode ver esse elemento se mover para o E você também pode sentir a transição. Agora precisamos aumentar a área excedente, a área excedente fora da etiqueta Anca. Para isso, precisamos usar a propriedade overflow. Para resolver o problema, precisamos entrar no seletor de tags Anca e aqui precisamos usar uma propriedade chamada overflow, overflow hidden Depois de configurar este arquivo, agora você pode notar que o pseudo-elemento anterior não está visível, mas se eu abrir minha casa nele, você pode obter o belo efeito É assim que podemos construir esse projeto. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 6. Botão de dimensionamento de texto usando CSS: Olá, pessoal. Mais uma vez, estou de volta com um novo efeito Hover de botão relacionado ao projeto Nesta lição, vamos criar esse belo efeito e usaremos antes Studoelein para criar Então, vamos entrar no editor de código is Studio e ver como podemos fazer isso. Então, como você pode ver, estamos no meu editor de código do Studio e, como você pode ver, já criamos um documento HTML chamado index dot HTML E na etiqueta corporal, Harry pega e corta a etiqueta, e HearTypeH eu. Então eu já crio um arquivo CSS de estilo e vinculo esse arquivo ao documento da tabela. Agora, vamos entrar na pilha de estilos CSS. Como você pode ver, como atribuímos a altura, esses playfiq justificam o alinhamento do centro de conteúdo ao centro Para tornar esse elemento âncora no centro desta página horizontal e verticalmente. Agora, vamos estilizar esse elemento. Vou selecionar esse elemento usando seu nome de tag A e , dentro dos aliases, a primeira propriedade que vou usar usa decoração Precisa de decoração, não vou usar nenhuma. Em seguida, vou usar outra propriedade chamada cor, cor e vou atribuir uma cor de texto. Vou usar algum tipo de cor cinza escuro, use Haztag 26, 26, 26 Em seguida, vou definir a família da fonte. Família de fontes, vou designar Sansai. Em seguida, vou definir o tamanho da fonte tamanho da fonte 40 pixels. Depois disso, vou definir borda, borda e vou atribuir uma borda sólida de três pixels. Sólido e nossa cor de borda é Hatag e vou usar a mesma cor que uso para a cor da fonte Em seguida, vou definir o preenchimento. Preenchendo de cima para baixo, vou definir 40 pixels da esquerda e da direita, vou definir 80 pixels Agora vou definir a transição. Transição, e eu quero aplicar a transição para Oop, e vou definir o tempo de transição de 0,5 segundo E também precisa definir a posição relacionada à posição. Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nosso botão se parece. E agora vou usar o pseudo elemento anterior para criar nosso efeito Então, aqui eu vou digitar. Primeiro vou selecionar a anti tag, depois vou usar antes do procedimento selecionado, ANTES, antes. Então, primeiro dentro dos fígados, vou adicionar conteúdo, conteúdo e vou digitar O M. Então, dentro de um único curso, vou digitar sobre Depois disso, depois disso, vou definir a posição, posição absoluta. Em seguida, vou definir o ritmo em que vou colocar esse texto. Eu quero colocar esse conteúdo naquela esquina. Vou digitar do topo, vou passar zero e também da esquerda, vou passar zero ovos. Em seguida, vou definir altura e largura, altura, vou atribuir altura 100% e também largura 100%. Em seguida, vou adicionar cor de fundo a esse elemento, o elemento positivo. Vou digitar a cor de fundo e quero atribuir a mesma cor, essa cor cinza escuro. Em seguida, vou atribuir a cor da fonte, a cor e vou atribuir a cor branca porque precisamos torná-la branca visível. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Em nossos exemplos anteriores, maioria das vezes criamos um conteúdo vazio. Mas desta vez nesta teta, colocamos essa mensagem em cima de mim. E agora precisamos colocar esse texto no meio desse contêiner, vertical e horizontalmente Para isso, vou usar a propriedade flex, exibir flocos para justificar o conteúdo, justificar o centro de conteúdo e alinhar o item também ao centro, e vou Depois de definir esse arquivo, é assim que ele se parece. Agora eu quero aumentar o tempo de luta desse fundo cinza escuro. Eu quero fazer uma escala de ajuste a partir de seu tamanho horizontal, e isso tornará o elemento de fundo muito grande Além disso, vamos tornar sua opacidade zero. Então, isso vai torná-lo transparente. Quando eu passo o mouse sobre este link, quero escalar de novamente. Eu quero fazer isso de novo. Com isso, também vou mudar a oposição. Eu vou fazer isso de novo. Eu quero torná-lo visível novamente. Então, vamos fazer isso. Primeiro, vou aplicar a escala, um pouco de t, transformar, e quero usar a escala de valor da habilidade, e quero fazê-la cinco vezes. Depois de configurar esse arquivo, é assim que ele se parece. Eu o faço muito maior do que o anterior. Ele dimensiona esses elementos de fundo cinco vezes maior que seu tamanho, mas eu quero que eles fiquem escondidos fora deste link. Aqui, dentro desse elemento âncora, vou usar a propriedade overflow, overflow, overflow Escondido, e eu vou configurar esse arquivo. Depois de salvá-lo, ficou assim. Agora você pode ver fora da área do link, o pseudo-elemento anterior está oculto Além disso, você precisa tornar esse elemento totalmente transparente. Dentro do seletor anterior, vou aplicar a propriedade de opacidade, opacidade e vou aplicar opacidade Se eu definir esse arquivo, é assim que ele se parece. Agora, o elemento de fundo dianteiro é totalmente transparente. Além disso, não é visível em nossa área de transbordamento. Agora eu quero aplicar a transição. Aqui, vou tentar a transição, e quero aplicar a transição a toda essa propriedade, e vou levar 0,5 segundo. Vou configurar esse arquivo. Em seguida, ao passar o mouse, quero transformar esse pseudo-elemento Eu quero reduzir a escala desse pseudo-elemento, e também precisamos aumentar o valor da transparência Precisamos torná-lo visível. Vou digitar A, dois pontos Heber, dois pontos, e vou usar antes do seletor, vou direcionar o elemento de força antes disso dentro cores que quero aplicar a propriedade de transformação, transformar a escala e quero torná-lo Além disso, vou fazer Opa City Opacity, vou fazer dela uma vou fazer dela Quero torná-lo totalmente visível ao passar o mouse sobre ele e vou definir esse arquivo Agora, depois de definir esse arquivo, quando eu passo o mouse sobre essa tag âncora, alcançamos o resultado desejado Esse resultado. Espero que agora esteja claro para você, como podemos criar esse lindo botão va que Hova deixou Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. Te vejo em breve. 7. Botão de troca circular: Olá, pessoal. Mais uma vez, estou de volta com um novo botão relacionado ao projeto Herefit Nesta lição, vamos criar esse lindo botão Haefet. Como você pode ver quando eu passo o cursor, você pode experimentar esse efeito Quando eu passo o mouse sobre esse botão, um fundo vermelho preenche esse botão na parte superior Então, vamos começar a prática e ver como podemos criá-la. Então, como você pode ver lado a lado, abro meu editor de código ist studio e meu navegador usando a extensão light de servidor, e já crio um documento HTML chamado index dot HTML. Com isso, eu já crio esse arquivo CSS de pontos de estilo e vinculo esse arquivo CSS a este documento. Agora, dentro da tag body, primeiro, vou criar uma tag de botão. Então, aqui vou digitar botão de tag de botão e também vou atribuir uma classe de classe e o nome da nossa classe é botão T em formato abreviado. Em seguida, vou digitar o botão. Eu quero configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora precisamos colocar esse botão no meio desta página. Para isso, precisamos entrar no arquivo CSS de estilo. Primeiro, vou selecionar a tag body, body. Então, primeiro, dentro da coluna, vou atribuir margem a esta página, margem, e quero atribuir margem zero, depois vou atribuir essa propriedade baixa Os flocos de exibição Justificam o conteúdo, justificam o centro de conteúdo também alinham o centro dos itens para alinhar o centro dos itens . Em seguida, vou atribuir altura a essa altura de página e atribuir altura 100 H. Em seguida, vou atribuir FontOnFamily e quero atribuir a fonte Sensory, Sanserith, vou Depois de configurar esse arquivo, ficou assim que ele alinhou esse botão no meio desta página horizontal e verticalmente Em seguida, vou direcionar o botão usando o nome da classe. Para isso, vou digitar dot BTN. Então, dentro das cores, primeira propriedade, vou usar borda de borda e bainha para atribuir uma borda sólida de dois pixels, aquarela sólida é tomento Vou configurar esse arquivo. Depois disso, vou remover o plano de fundo. Histórico, e eu não vou atribuir nenhum. Em seguida, vou mudar a cor do texto. Estou digitando a cor e quero atribuir a cor ao ovo de tomate. Em seguida, vou colocar pouco de acolchoamento de cima para baixo e para a direita e levantar Estou digitando preenchimento de cima para baixo, vou atribuir 20 pixels e da esquerda e direita, vou atribuir 40 pixels Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Em seguida, vou definir o tamanho da fonte. Vou digitar fonte, tamanho da fonte. Aqui, vou atribuir o tamanho da fonte de 25 pixels. Depois disso, vou usar uma propriedade chamada transformação de texto, transformação de texto, transformação de texto em maiúsculas Em seguida, vou atribuir outra propriedade, que é cursor, ponteiro do cursor Sempre que eu mover meu cursor sobre esse botão, ele se tornará um ponteiro Depois disso, vou atribuir a transição de transição e quero aplicar a transição para toda essa propriedade e minha duração de transição é de 0,5 segundo. Então eu vou configurar esse arquivo. Em seguida, vou definir a posição, posição em que vou usar rely. Agora, vamos trabalhar no efeito flutuante. Usaremos o pseudo-elemento anterior para isso e conhecemos o processo Agora, vamos criar o pseudo elemento anterior. Então digite ponto BTN, botão, dois pontos, B quatro. Então, dentro da probidade do AlyssF, vou usar conteúdo, conteúdo e vou criar Em seguida, vou definir a posição desse conteúdo, posição, e vou usar valor absoluto, absoluto. Eu quero colocar esse elemento naquele canto. Do alto, vou atribuir zero e também da esquerda, vou atribuir zero. Quero iniciar o elemento pelo canto superior esquerdo. Então eu vou definir dentro da altura com 100%. Além disso, vou definir altura, altura, 100%. Em seguida, vou definir o plano de fundo, o plano de fundo e quero usar a cor tomate toma. Eu vou dizer isso. Eu configurei esse arquivo, é assim que ele se parece. Portanto, ele ocupa toda a largura e altura e fica em cima desse botão. É por isso que está na altura do nosso texto. Para resolver o problema, vou usar a propriedade do índice Z, o índice Z, e vou usar menos um para resolver o problema, mas nosso texto ainda não está visível porque texto e a cor do plano de fundo coincidem. Dentro do botão selecionado, se eu mudar a cor, cor. E se eu torná-lo branco e, em seguida, definir esse arquivo, é assim que ele se parece. Você pode ver que o texto agora aparece. Mas, por enquanto, vou fazer tomate novamente. Então, vou comentar essa linha e vou salvá-la novamente. E agora, para alcançar o resultado desejado, vou usar o raio da borda em nosso raio de borda do tipo pseudo lemate, zero, zero e 50% e 50% Do canto superior esquerdo e direito, eu uso o valor zero e para o canto inferior esquerdo e inferior direito, aqui eu uso 50% e 50% do raio da borda Agora, se eu definir esse arquivo, é assim que ele se parece. Agora temos as curvas em nosso plano de fundo e agora precisamos trabalhar no efeito de flutuação Agora vamos definir a altura desse fundo vermelho, zero. Em seguida, passando o mouse sobre o botão, aumentaremos a altura desse fundo vermelho Isso fornecerá os preenchimentos e a cobertura do efeito do botão Dentro desse fundo vermelho, vou definir altura, altura e vou torná-la zero. 0% em vez de 100%. Vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, ele desapareceu do fundo vermelho. Não é visível por causa de sua altura. Agora precisamos adicionar o efeito HVAD nesse elemento anterior. Para isso, vou digitar dot BTN Colon Hal colon e Então, dentro do carro, menos eu vou definir a altura, altura, 100% E eu vou configurar esse arquivo. Então, sempre que ouço meus carros neste botão, como você pode ver, ele aumenta a altura, mas aumenta a altura instantaneamente. Não há transição entre eles. Para isso, vou usar propriedade chamada transição no meu elemento Hard, transição no meu elemento posto. Então, Hemost faz a transição aqui , eu vou definir a transição em todo esse elemento e vou definir o tempo 0,5 segundo e vou definir esse arquivo Desta vez, depois de definir esse arquivo, se eu passar o mouse sobre minha cor neste botão, agora você pode ver o efeito de suavização Você pode experimentar isso. Mas o problema é que ele não cobre todo o botão por causa do raio da borda Então, para resolver o problema, precisamos aumentar a altura. Precisamos aumentar mais a altura em mais de 100%. Então, ao invés de usar 100%, aqui eu vou usar 190%, e eu vou configurar esse arquivo Depois de definir esse arquivo, se eu passar o cursor sobre esse botão, você pode ver que ele resolve o problema, mas cria um novo problema. Então você precisa caminhar pela área de transbordamento. Para isso, no meu botão. Nesta área de botões, vou usar a propriedade chamada transbordamento, aquecimento por transbordamento . Vou configurar Se eu definir esse arquivo e passar o cursor sobre esse elemento, você pode ver aqui que obtemos o efeito desejado Ele esconde o elemento de transbordamento. Agora, também, precisamos resolver outro problema. Precisamos mudar a cor quando eu passo o mouse sobre esse elemento. Precisamos mudar a cor do texto quando eu passo o mouse sobre esse botão Para isso, aqui vou criar outro seletor BTN e ela criar um seletor Dentro da cor ss, vou usar a propriedade chamada color. Cor branca. Eu quero configurar esse arquivo. Depois de definir esse arquivo, se minhas cartas estiverem nesse elemento, aqui você pode ver que alcançamos o resultado desejado. Espero que agora esteja claro para você como podemos criar esse lindo efeito de botão. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 8. Rotação do botão de 3 camadas: Olá, pessoal. Nesta lição, vamos criar esse lindo efeito de botão Hover Como você pode ver quando as cartas I Hoberm estão neste botão, aqui você pode experimentar um efeito de inversão No início, um fundo verde cobria o botão, depois um fundo vermelho cobria o botão e, quando eu solto o mouse, ele volta à posição original. Vamos ver como podemos criá-lo. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão Lifesaver e já crio um documento SML chamado index Com isso, eu já crio o arquivo CSS Dod do tile e vinculo esse arquivo CSS Tyled a esse documento HTML Agora, dentro da minha etiqueta corporal, primeiro, vou pegar uma etiqueta Gut, A. Aqui vou apenas dizer botão. E então eu vou configurar esse arquivo. Defina este arquivo, como você pode ver no meu navegador, esta é nossa tag âncora Agora, precisamos entrar nesse estilo ou arquivo CSS. Agora, primeiro, precisamos estilizar a tag corporal. Aqui, vou direcionar o corpo usando o nome da tag. Em seguida, vou atribuir margem em nossa tag corporal, que é zero. Depois disso, vou atribuir a propriedade display, display, e aqui vou usar o slick Em seguida, vou usar a propriedade de alinhar item, alinhar o centro do item, justificar o conteúdo e também Em seguida, vou atribuir altura à altura da nossa página 100 VH, altura do voto Depois disso, aqui, vou atribuir uma cor de fundo. Cor de fundo, e eu vou usar um hexavalu 212121. É uma cor cinza escuro. Se eu definir esse arquivo, é assim que ele se parece. Agora precisamos alterar o estilo da fonte desse texto. Para isso, vou usar a família de fontes, família de fontes e vou usar o Sansai Sansai. Vou definir esse arquivo Depois de configurar esse arquivo, ficou assim. Depois disso, vou estilizar essa tag âncora usando o nome da tag A. Então, dentro do Closs, primeiro vou atribuir preenchimento a esse botão, então digite preenchimento e, de cima para baixo, vou usar um paddy de 20 pixels e , da esquerda e direita, vou usar um paddy vou usar Depois disso, vou usar uma chamada de propriedade, leva decoração, decoração texto, leva decoração. Ele, eu não vou usar nenhum. Em seguida, vou usar outra propriedade chamada takes transform, text transform, takes transform, uppercase Em seguida, vou usar a propriedade de cor do fundo. Cor do plano de fundo, e aqui vou usar a cor de fundo, tag hass, se um, C quatro, zero F, essa cor amarela variante, e vou definir esse arquivo Depois de configurar esse arquivo, é assim que nosso botão se parece. Em seguida, quero alterar a cor do texto desse botão. Quero torná-lo branco, digitar Soon, colorir e quero torná-lo branco. Depois disso, vou definir o tamanho da fonte, o tamanho da fonte e vou aplicar à fonte t pixel. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece, mas eu quero algum espaçamento de letras entre esses caracteres Então, vou usar o espaçamento entre chamadas de propriedades. Vamos espaçar, eu quero um espaço de pixels entre os caracteres dessa palavra, sim, é bom Depois disso, vou definir a posição da e vou declará-la relativa Vou configurar esse arquivo. Em seguida, vou criar o fundo verde que cobrirá o botão. Para isso, vou usar antes do Posidoeleate. Aqui, vou amarrar dois pontos da etiqueta âncora antes. Então, primeiro dentro das calivas, dentro desse elemento anterior ao Posido, vou criar um conteúdo, conteúdo e vou digitar Depois disso, depois de criar o conteúdo, precisamos posicionar esse conteúdo, algum tipo de propriedade de posição, posição absoluta. Em seguida, vou colocar esse conteúdo naquele canto. Para isso, vou digitar do topo, vou atribuir zero e de P e de P, vou atribuir zero novamente. Em seguida, vou atribuir dentro da altura. Vou atribuir largura 100% e, em seguida, vou atribuir altura, altura 100%. Depois disso, vou definir a cor do plano de fundo. Cor de fundo, vou atribuir a mesma cor de fundo, então vou copiar e atribuir uma cor de fundo verde Vou usar um hexa Valu com etiqueta dois CE, sete, um. Essa cor de fundo verde, e eu vou definir esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora, o fundo verde está logo acima do fundo amarelo. Agora precisamos centralizar essas tomadas na horizontal e Para isso, vou usar a propriedade display flex, display e vou usar flex and align align items Também no centro, também no centro. Vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora, para criar o efeito, precisamos usar a função de rotação Vamos girar esse elemento verde ao longo do Xxs, então aqui, vou usar a propriedade chamada transformar e vou aplicar a rotação X aqui, vou passar o valor de 60 Agora, se eu definir esse arquivo, você pode notar que ele girará esse elemento verde no eixo horizontal Depois de definir esse arquivo, você pode ver o resultado e ele girou até 60 graus Como você sabe, por padrão, ele rotacionará o elemento a partir da linha central Mas eu quero mudar a posição desse ponto rotativo. Eu quero girar esse elemento a partir do topo. Para isso, precisamos usar uma propriedade chamada transform as transform Aisin animal pass top E altere esse arquivo, como você pode ver, agora ele gira o elemento a partir da posição superior Agora eu quero girar esse elemento em até 270 graus. Em vez de usar 60 graus, vou usar DEG de 270 graus e vou configurar esse arquivo , configurar esse arquivo como você pode ver e alterar esse arquivo, como você pode ver, é o elemento Agora não está mais visível. Como gira o elemento, ele fica atrás do botão Agora, quando eu passar o mouse sobre esse link, quero redefini-lo. Eu quero fazer com que seja zero novamente. Vou criar um seletor de foco usando a tag âncora que passa o mouse elem Então, dentro da Caria diz, como usar uma propriedade chamada transformar, transformar, girar X, e eu vou passar de zero grau zero Vou configurar esse arquivo. Sempre que as curvas do I Hoberm estiverem nesse elemento, esse botão, como você pode ver, ele girará esse pseudo-elemento verde esse botão, como você pode ver, ele girará esse pseudo-elemento verde em zero grau. Você não pode experimentar a rotação porque não usa nenhuma transição nela. Vou digitar transição de propriedade de transição. Como vou definir a duração dessa transição, zero moeda, cinco segundos. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu passar meu Karza sobre ele, agora você pode experimentar essa transição Aqui você pode experimentar esse efeito de dormir. Agora, depois de criar o verde, quero criar o vermelho. Para isso, vou copiar esta seção, este antes do pseudo-elemento aqui eu vou colá-lo novamente. E em vez de usar o elemento antes do posto, desta vez, vou usar o elemento after posito, e desta vez vou usar a cor vermelha em vez de usar o vermelho verde Vou configurar esse arquivo. Como eu quero girá-lo depois do verde Para isso, precisamos usar algum atraso de transição. Experimente o atraso da transição, e eu quero atrasá-lo em até 0,25 segundo Isso é bom. Vou configurar esse arquivo. E da mesma forma, precisamos voltar ao Wi de zero grau neste botão. Para isso, aqui, vou criar outra Her selecionada para depois de Elemide A, dois pontos pairando, dois pontos e depois Hentyp. Então, dentro do recesso de Cali, vou aplicar esse mesmo valor e vou subtrair Depois de definir este arquivo, coloque o cursor do Wi Hoberm neste botão, aqui você pode experimentar esse lindo efeito de botão giratório Além disso, se você quiser obter um resultado diferente, sim, você pode alterar a posição de origem da transformação. Em vez de usar T, você aplica a parte inferior; se você aplicar o botão na parte inferior e depois esse arquivo, agora você pode desfrutar de um efeito de inversão diferente. Sempre que abro minha cor nela, é assim que ela cruza o botão. Por enquanto, vou usar o Top. Eu gosto de escolher o melhor para valorizar. É assim que se anima esse botão. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 9. 3 Efeito de botão de círculo para fundo parte 1: Olá, pessoal. Bem-vindo ao novo projeto. Nesta lição, vamos criar esse lindo e bonito efeito de botão Ha. Como você pode ver, quando eu passo o mouse sobre este link, três círculos se aproximam e uma capa dobrada, em seguida, um lindo fundo amarelo aparece e muda a cor do texto Vamos criar isso neste projeto. Vamos ver como podemos criar esse lindo efeito. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor Light, e já crio um nome de documento HTML com o nome do índice e ponto HTML. Com isso, eu já crio o arquivo CSS do Styler e vinculo esse arquivo a este documento usando tag de tinta Então, dentro da etiqueta corporal, primeiro, vou pegar uma etiqueta de âncora Vou pegar a etiqueta âncora usando A e, em seguida, vou pegar uma etiqueta de extensão, uma etiqueta de extensão vazia dentro da extensão da etiqueta de âncora, e dentro dessa etiqueta de ancha, vou virar sobre mim. Veremos mais tarde por que precisamos dessa tag span. Agora, vamos entrar no arquivo CSS de estilo. No começo, vou estilizar o tipo de corpo, então digite, corpo. Então, primeiro dentro do Cariss, vou dizer margem, vou dizer margem, zero de todas as direções Em seguida, precisamos alinhar o centro do gato desta página. Vou pegar essa propriedade, exibir flex, justificar conteúdo, justificar o centro de conteúdo Além disso, precisamos passar por alinhar o centro de Iams. Depois disso, precisamos definir a altura desta página, altura e eu vou definir a altura cem V g, altura do voto. Em seguida, vou definir a área da família de fontes da família de fontes. Depois disso, vou definir uma cor de fundo. Vou usar um tipo de cor de fundo escuro, cor de fundo, hashtag, vou usar um HixaVu Ele vai manter uma cor cinza escuro. Depois de configurar esse arquivo, é assim que nossa página se parece. Também alinhou o texto no meio desta página. Agora precisamos estilizar essa tag Anca. Vou segmentar a tag ancha usando seu nome de tag A, então dentro da primeira propriedade color sus vou usar maconha, e aqui vou deixar de lado 220 pixels Então eu vou atribuir altura, altura, 80 pixels. Em seguida, vou atribuir cores. Vou atribuir a cor da fonte, a cor, a ela atribuir a cor, tipo de tonalidade amarela tem etiqueta, F se zero Vai voltar da cor amarela, algo assim. Em seguida, vou definir a cor de fundo. Cor Bagund, vou torná-la transparente. Essa. Em seguida, vou definir o tamanho da fonte. Tamanho da fonte. Aqui eu vou usar o tamanho da fonte 26 pixels. Também vou remover esse sublinhado, então vou digitar decoração de texto, decoração de texto Eu vou fazer com que não seja nenhum. Isso removerá o sublinhado. Em seguida, vou converter esse texto em maiúsculas, então vou digitar texto, transformar, Vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. E agora precisamos sintetizar esse texto na horizontal Para isso, vou usar uma propriedade chamada alinhamento de texto, Align, alinhamento de texto centralizado Acima disso, também vou definir a linha, altura da linha, 80, altura da linha, 80 pixels Então, é Alinhar o texto no meio desse contêiner. Aqui definimos a largura 220 pixels e a altura 80 pixels. Finalmente, vou adicionar a transição. Transição, vou aplicar a transição para todo o elemento e vou definir a duração de 0,5 segundo. Depois disso, precisamos definir a posição. Posição, depois disso, precisamos definir a posição, posição relativa. E eu vou configurar esse arquivo. Depois de configurar esse arquivo. Agora, vamos criar esses círculos, que estão vindo do lado esquerdo e do lado direito. Quem sou eu nesse link? Quem usará o pseudo elemento antes e depois para criá-lo Quero criar o primeiro elemento circular naquele local e quero criar o segundo elemento circular nesse local. Vou usar o elemento antes e depois do possudo juntos Então, digite A, cólon, antes. A, cólon depois. Então, dentro do Carrass, a primeira propriedade, eu vou criar o conteúdo Eu vou criar o conteúdo D. O conteúdo é um conteúdo em branco. Vou usar a célula de código duplo. Então, precisamos definir a posição desse conteúdo. Então, tome uma posição, eu vou fornecer o absoluto. Em seguida, precisamos colocar esses conteúdos. Do topo, vou colocá-lo 50% do topo, vou colocá-lo 50% e depois vou definir nós, e vou definir com 20 pixels. Além disso, vou definir altura, altura e também 20 pixels. Depois disso, vou definir a cor de fundo. Mas antes de definir a cor de fundo, vamos definir o raio da borda porque precisamos fazer com que ela circule Raio de borda de 50%. Em seguida, vou definir a cor de fundo. Cor de fundo, vou definir a cor amarela, a mesma cor, hass tag, do leaf, zero, e vou definir esse arquivo Agora, para definir esse arquivo, você pode ver os dois círculos. Um é o lado esquerdo e outro é o lado direito. É feito por before positoselector e é feito por ter Mas você pode notar nossos pontos não estão alinhados com o texto Aqui, nós o posicionamos entre os 50% melhores. Quer dizer, 50% da altura da etiqueta ca, que é 40 pixels. Mas, para corrigir isso, precisamos usar a propriedade de transformação. Transforme, e aqui eu vou usar translate Y com, translate translate Y, e aqui eu vou usar -50% Até configurar esse arquivo, como você pode ver, ele alinhou os pontos com o texto e, em seguida, vou aplicar a propriedade de transição Transição, transição, vou aplicar a transição a toda essa propriedade. Em seguida, vou definir a duração da transição, que é de 0,3 segundo. Então, antes de um círculo superior perfeitamente centralizado neste texto Agora você pode observar o pseudo-elemento anterior cobrindo a letra H e o pseudo-elemento per quase tocando a letra E porque não especificamos nenhuma posição horizontal dele Para resolver o problema, vou focar no pseudoelemento anterior, pudo tipo A, dois pontos Em seguida, dentro do recesso de chamadas, vou digitar o nome da propriedade no final da esquerda, zero e vou configurar esse arquivo Depois de definir esse arquivo, como você pode ver, ele resolverá o problema. Em seguida, vou mirar no elemento ara A, superior. Então, dentro do recesso de Cali, vou colocá-lo lado certo para a direita, zero. Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Em seguida, usando a propriedade box shadow, criaremos a sombra desses círculos e criaremos duas sombras desses dois círculos Então, vou criar uma sombra de caixa para os elementos anteriores, então vou digitar sombra de caixa, com exceção de quatro valores. O primeiro valor é para a distância horizontal entre a sombra e o elemento. Do lado direito, vou mover a sombra dos dez pixels. Eu quero mover essa sombra do lado esquerdo, então vou usar -100 pixels Em seguida, precisamos fornecer a distância vertical do elemento. A partir do elemento, quero fornecer distância vertical zero e o terceiro valor representa o desfoque dessa sombra Mas eu não quero nenhum valor desfocado, quero sombra curta, e o valor grande, precisamos passar a cor da sombra e, por enquanto, vou usar vermelho, caso contrário verde Então, depois de definir esse arquivo, como você pode ver, aqui você pode ver um novo círculo. É uma sombra desse pseudo-elemento anterior. Eu vou fazer a mesma coisa o pseudo-elemento after Vou criar a mesma sombra apenas para colocá-la no lado direito desse elemento. Então, vou copiar esse link e colá-lo aqui. Vou mudar o valor da direção horizontal. Depois de definir esse arquivo, você pode ver o resultado. Agora temos quatro círculos altos. Essa é a primeira parte deste tutorial. Na próxima parte deste tutorial, trabalharemos no Haarefect Obrigado por assistir a este vídeo Syuned. 10. 3 Efeito de botão de círculo para fundo parte 2: bom ver vocês, essa é a segunda parte deste tutorial e, em nossa parte anterior, já criamos a sombra desse elemento antes e depois do Posido Agora, vamos trabalhar no efeito Ha. Primeiro, vou criar Hor selected para os elementos anteriores da tag ti anchor, hover colon, F. Então, dentro do caliss aqui, vou chamar a propriedade Left, left 50% left Então, sempre que eu passar meus carros sobre esse elemento, como você pode ver, ele moverá esse círculo em 50% da largura desse elemento Além disso, ele move essa sombra com ela, mas eu não quero manter a distância da sombra 100% onde eu passo o mouse sobre ela Em vez de usar -100, eu quero movê-lo um pouco mais perto do elemento original Aqui vou digitar box shadow box shadow e vou definir a posição da sombra, que é de 30 pixels quando eu passar o mouse sobre ela Além disso, vou passar os mesmos valores e a mesma cor, então vou copiá-lo e colocá-lo aqui. Eu vou definir essa multa. Então, sempre que eu coloco meu cursor sobre ele, como você pode ver, agora, a sombra se aproximou desse elemento original. Além de fechar, ele cruzou o elemento e foi para o lado direito desse elemento original. Além disso, vou fazer a mesma coisa com o elemento After pudo Então, eu dupliquei esta seção e vou substituir o antes pelo Depois Em seguida, vou mudar esse lado. Eu vou fazer o Laboratório 2, certo? Também precisamos passar o valor negativo aqui porque vamos mover a sombra para o lado esquerdo desse círculo. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu vagar nele, você poderá ver o resultado Agora precisamos fazer uma coisa. Precisamos mover o pseudoelemento anterior e superior para a mesma posição O usuário pode ver apenas três pontos sobre ele. Precisamos alinhar o centro do círculo desse elemento e o elemento da categoria. Para isso, precisamos usar a propriedade transform aqui, transform, e desta vez vou usar translate X value, translate X, translate X, e aqui vou usar o valor -50% Vou configurar esse arquivo. E como dizemos traduzir Y acima aqui, precisamos definir o mesmo valor em nosso elemento em nosso V para psudoelemento Aqui, precisamos mencionar que precisamos permanecer em -50% na direção de YxS, então eu quero colar o Traduza Y -50% e, em seguida, precisamos fazer a mesma coisa para o pseudoelemento superior Eu copio essa linha e vou colá-la aqui. E eu vou mudar os valores. Vou fazer com que seja positivo, não negativo. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu espero que meus carros estejam nele , sim, ele está funcionando, mas ainda precisamos usar o valor negativo porque precisamos alinhá-lo usar o valor negativo porque precisamos ao centro Depois de configurar esse arquivo, quando espero que meus carros estejam nele novamente, agora você pode ver o resultado Agora você pode ver apenas três circuitos. positivo anterior e superior elemento positivo anterior e superior se sobrepõem um ao outro É por isso que você pode ver apenas um círculo aqui. Agora vou mudar a cor do círculo do sado. Vou usar a mesma cor, a mesma cor amarela para ele. Em vez de usar verde, vou usar essa cor amarela. Então, eu substituo verde por essa cor todas as vezes e vou salvá-la novamente. Depois que eu disse esse arquivo, é assim que ele se parece. E agora vamos trabalhar no fundo amarelo usando essa tag span. Como você sabe, quando criamos nossa tag ancha, aqui criamos uma tag span dentro dela e agora vamos usar essa tag span Vamos voltar ao arquivo CSS de estilo. Vou usar essa tag gasta para fins de segundo plano. Então, para criar o plano de fundo, vou segmentar essa tag span usando o nome da tag de nome. início, vou definir a posição de sua tag de extensão dentro do clivusus vou definir a posição de sua tag de extensão dentro do , que Então eu vou definir o lugar a partir do topo, vou colocar a semente zero. E da esquerda, vou colocar o set zero novamente. Então eu vou dizer dentro da altura, com 100%. E então eu vou definir altura, altura também 100%. Em seguida, vou definir a do fundo, a cor do plano de fundo, a cor do plano de fundo e vou usar a mesma cor de fundo, que é haTagff zero, essa cor amarela Em seguida, vou definir o raio da borda. Raio da borda, raio da borda, vou usar oito pixels Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nosso botão se parece. Agora você pode ver o fundo amarelo no topo do texto, e então vou usar a propriedade de transformação, transformar, e vou usar a escala de valor de escala, e vou dizer escala zero. Além disso, vou usar a transição de transição, e vou dizer transição para todas as propriedades e também vou dizer a duração da transição, que é de 0,3 segundo. Depois disso, vou criar o Hoberselector da tag span, e nossa tag span está dentro da nctag . Vou digitar primeiro, vou selecionar ncTeghver e depois selecionar a selecionar ncTeghver e depois selecionar o Hoberselector da tag span, e nossa tag span está dentro da nctag. Vou digitar primeiro, vou selecionar ncTeghver e depois selecionar a tag span, span. Dentro do caliss, vou dizer escala de valor de escala de transformação, e desta vez vou defini-la 1 e retardo de transformação, e então vou usar atraso de transição pequeno valor de atraso de transição Atraso de transição, e eu vou configurá-lo 0,4 segundo. Vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, por padrão, ele oculta o fundo amarelo. Mas sempre que tento mover meu carro sobre ele, agora você pode ver que, após 0,4 segundo de atraso, ele apareceu em segundo plano. Como você pode ver, depois de terminar esse círculo em movimento, o fundo aparece. Em seguida, vou mudar a cor do link quando eu vagar nele Para isso, vou digitar anchor hover e dentro das raças de cores, vou usar a cor fberty color, desta vez vou usar a cor cinza escuro, então vou digitar Em seguida, adicionarei um pequeno atraso de transição e usarei o valor de atraso de transição de envio . Vou copiar este e colar aqui. Então, se eu definir esse arquivo e passar o mouse sobre ele, você verá que nada está acontecendo Parece que está porque precisamos mover esse plano de fundo para trás do texto. Para isso, precisamos usar o valor do índice Z para digitar o índice Z, que é menos um, e eu vou definir esse arquivo Então, defina esse arquivo quando eu abro meus cartões estão nele, você pode ver o resultado. Agora, o texto vem na frente desse elemento de fundo. Mas o problema é que nossos três podres também aparecem na frente do texto. Precisamos usar o mesmo valor do índice zen duas horas antes e depois do seletor de pseudoelementos. Essa. Aqui, vou passar o mesmo valor do índice Z e definir esse arquivo. Quando eu falo sobre esse elemento, desta vez você pode ver Agora, nosso plano de fundo e elemento de três pontos também estão por trás do texto Em seguida, vou definir a opacidade de ambos os elementos como zero. Deixe-me mostrar a opacidade, vou defini-la como zero. Vou configurar esse arquivo. Defina este arquivo, como você pode ver, ele esconde todos os pseudo-elementos, mas eu quero reaparecê-lo quando eu passar o mouse sobre Para isso, precisamos definir a opacidade em nossa seleção de Heróis. Copie o valor opacidade e em nosso posidoherSelector anterior ao superior, vou usar vou Eu vou conseguir. Desta vez, vou fazer com que seja um Opacity. Vou configurar esse arquivo. Desta vez, eu o tornei totalmente opaco. Depois de definir este slide, se eu passar o mouse sobre minha Karza neste link, você pode ver esse lindo efeito Her É assim que podemos criar esse lindo efeito Her. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 11. Novo efeito de focalização de botão: Olá, pessoal. Bem-vindo à nova lição deste curso de animação. Neste tutorial, vamos criar esse lindo e bonito botão Haifat Se você olhar este botão, você pode notar que temos um total de dois planos de fundo aqui. Fundo de baixa cor e fundo de cor violeta. Nosso fundo de Eula foi enviado para o canto superior lapidado e nosso fundo de cor violeta foi enviado para o E quando eu passo o mouse sobre ele, você pode observar o fundo A e girar em três perspectivas D na dicção Xxs Então, vamos ver como podemos criar esse lindo Hoaiff. Então, como você pode ver lado a lado, abro meu editor de código do Wiser Studio e meu navegador usando a extensão de servidor ao vivo, e já crio um documento SML chamado index dot HTML Com isso, eu crio esse tile dot Css five. Agora, primeiro dentro da tag body, vou criar a gravata âncora usando A, depois vou amarrar o botão Efeito Button Hover. Vou configurar esse arquivo. Depois disso, precisamos entrar no arquivo CSS stylar. Primeiro, vou selecionar o corpo da tag body. Então, dentro da primeira propriedade da calibração, vou usar margem, margem zero de toda a direção Então eu vou usar o display. Display e eu devemos usar display flex e alinhar o item, alinhar Além disso, vou digitar justify content, também centralizar. Em seguida, vou atribuir altura a esta página, altura, e vou atribuir altura 100 V H, altura da janela de visualização Em seguida, vou atribuir família de fontes, fonte, família e vou atribuir Al. Isso é bom. Vou configurar esse arquivo. Depois de definir este arquivo, como você pode ver, aqui você pode vê-lo alinhar o botão, no meio desta página na horizontal Agora vou estilizar esse link. Para isso, precisamos selecioná-la usando a etiqueta âncora A e dentro dos fígados está a primeira propriedade que vou usar E a primeira propriedade com a qual vou usar, e vou atribuir 300 pixels de largura. Em seguida, vou atribuir altura, altura e vou atribuir 60 pixels de altura. Depois disso, vou atribuir decoração de texto, decoração de texto e quero remover o sublinhado, então aqui vou usar nenhum Em seguida, vou transformar esse texto em maiúsculas, transformar texto, vou usar a propriedade de transformação de texto e vou usar propriedade de transformação de texto e fazer em maiúsculas Depois disso, também vou remover o plano de fundo. Vou torná-lo transparente. Cor de fundo transparente. Em seguida, vou atribuir o centro de alinhamento de texto ao alinhamento de texto. Em seguida, vou atribuir a altura da linha, a altura da linha. Aqui vou atribuir a altura da linha, quase 60 pixels. Acho que 60 pixels são bons para cada um. Em seguida, vou atribuir a espessura da fonte. Preciso de uma fonte e espessura de fonte um pouco mais ousadas e vou passar por um herdeiro ousado. Ousado. Depois disso, vou adicionar espaçamento entre letras, espaçamento entre letras e ela para adicionar espaçamento entre letras Em seguida, vou adicionar posição, posição relativa, quanto menor a propriedade, vou usar a transição. Transição e ela para atribuir a transição a toda essa propriedade, também vou definir a duração, que é de 0,2 segundos. Vou configurar esse arquivo. Depois de configurar esse arquivo, essa é a aparência do nosso botão. Agora, vamos criar os dois planos de fundo desse botão. Para isso, vou usar o elemento pósito dianteiro e posterior Primeiro, vou criar o elemento before posito, Cctag colon Em seguida, você define os carlivorss. Primeiro, vou criar um conteúdo em branco. Aqui vou digitar conteúdo, conteúdo e vou criar um conteúdo em branco, então passo dois núcleos. Depois disso, vou posicionar o conteúdo e vou fazer com que seja uma posição absoluta. Então eu vou colocar esse conteúdo naquele canto daquele lugar. Do topo, vou passar o valor zero e, a partir do final, também vou passar da posição zero, zero. Depois disso, vou atribuir largura e altura. Nós, eu vou atribuir 100%, e depois vou atribuir altura, altura também 100%. Em seguida, vou atribuir a cor de fundo, a cor e gostaria de usar a cor amarela. Vou configurar esse arquivo. configurar esse arquivo, é assim que ele se parece. Agora você pode ver nosso fundo amarelo ficar inteiro dentro da altura desse elemento, o elemento catag Agora, precisamos exibir esse texto. Para isso, vamos usar o índice Z. Então, para digitar o índice Z, vou torná-lo menos um Quero mover essa cor de fundo amarela para trás do texto. Então, o sb desse arquivo, é assim que ele se parecia. E agora vou mudar esse fundo amarelo, algo para a direita e para cima. Para isso, vou usar o valor menos três pixels, também o valor esquerdo menos três Vou definir esse arquivo depois de definir esse arquivo, como você pode ver, ele se move um pouco. Agora, vamos criar outro plano de fundo. Vou duplicar esta seção e aqui vou passar depois Em vez de usar antes, vou passar por um TR. Desta vez, quero movê-lo para o lado direito. Em vez de usar menos três pixels, vou usar três pixels Além disso, vou mudar a cor, a cor do fundo, e vou torná-la azul. Vou usar esse , azul violeta. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Agora você pode observar o fundo azul violeta sobre o fundo amarelo. Mas eu quero misturar o pano de fundo um com o outro. Para isso, podemos fazer isso facilmente. Precisamos usar uma propriedade chamada mix brain mode. Aqui está o modo mix de tipos Blain, e eu vou aplicar multiplicação, multiplicação e vou definir esse arquivo Precisamos aplicar o mesmo modo de mistura mista, multiplicar após o subelemento E eu vou configurar esse arquivo. Depois de configurar esse arquivo, ficou assim. Agora, em vez de uma cor azul feia, quero mudar a cor da fonte Vou fazer com que seja branco. Então, em nossa etiqueta âncora, vou usar a propriedade color e vou torná-la branca E eu vou configurar esse arquivo. Então você pode ver dois fundos misturados um com o outro e isso cria um belo efeito agradável Em seguida, vamos trabalhar no efeito de flutuação. Agora, no efeito de flutuação, quero girar o elemento na direção Xxs em três ambientes D. Para fazer isso, primeiro, vou selecionar o elemento hover select, anchor hover e, em seguida, antes Então, dentro das rodadas, dentro das calibragens, primeiro, vou mover o fundo amarelo para os seis pixels superiores Vou usar o primeiro valor máximo e vou torná-lo menos seis pixels Então, do laboratório, vou fazer com que seja zero. E então eu vou usar a propriedade transform, transform, e vamos usar três valores D. E, como você sabe, vamos usar três ambientes D, então precisamos aplicar a perspectiva sobre ele. Perspectiva. Aqui eu vou definir a perspectiva de 1.000 pixels, não 100, vou fazer com que seja de 1.000. E então eu vou aplicar rotação x, rotação X, e aqui vou definir, mas antes de ligar a torre af, Wrap and Hem para definir o ângulo, que é 75 graus. Eu vou definir esses cinco. E para uma transição suave, vou aplicar a propriedade de transição no elemento anterior. Então digite a transição e eu vou definir o tempo para a transição que é de 0,2 segundo. Vou configurar esse arquivo como satisfatório. Se eu abrir meu cursor sobre ele, você poderá notar a transição. Você pode notar que nosso fundo amarelo gira no ambiente de CD na direção XXs. Precisamos fazer a mesma coisa com o pseudoelemento superior, mas na direção oposta Mas você pode notar que esse não é o resultado que queremos. Quero girar esse elemento a partir da posição superior, não da posição central Então, precisamos mudar a origem. Transforme a origem, bem, deixe-me mostrar a você. Então, em nosso elemento positivo de castor, Imotype transforma a origem, e eu quero girar o elemento da posição superior para cima Vou configurar esse arquivo. Se meus carros estão neste elemento, agora você pode ver, agora você pode notar que desta vez ele gira o elemento amarelo da posição superior em três ambientes D. Agora eu preciso fazer a mesma coisa o fundo de cor violeta, mas antes vou cortar esta seção e colá-la antes do seletor de procedimentos Vou duplicar esta seção e colá-la após o elemento after procedure Só vou mudar de antes para depois. Também para comprar a posição. Em vez de usar heromon de seis pixels para usar menos seis pixels e em vez de girar 75 graus Heim para usar -75 graus e também usar as mesmas propriedades, como transição e origem de transformação em Eu copio isso para propriedade e valor e HerraOptich. E eu vou mudar a posição de origem da transferência. Em vez de usar top, vou usar bottom do bottom e vou definir esse arquivo. Depois de configurar esse arquivo, se eu permanentemente esse botão, você poderá ver o resultado Aqui você pode ver o belo efeito, mas o problema é que depois de Hober, como você pode ver, nossa cor de texto branca combina com a cor de fundo Precisamos resolver o problema quando eu passo o mouse sobre ele, precisamos alterar a cor do texto dessa tag de âncora aqui, vou criar um Hbaselector de âncora a Her precisamos alterar a cor do texto dessa tag de âncora aqui, vou criar um Hbaselector de âncora a Her de âncora no final , vou usar a propriedade color e vou aplicar a tag hass 272727 e vou Vou configurar esse arquivo. Depois de definir este arquivo, se eu passar o cursor sobre ele, você poderá apreciar esse lindo efeito Her você poderá apreciar esse lindo efeito Her Espero que agora esteja claro para você como podemos criar esse lindo efeito de botão Hover Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 12. Efeito de botão dividido: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo botão relacionado ao projeto, efeito Hova, hoje vamos criar esse lindo botão Haefet Como você pode ver, quando eu passo o mouse, meus carros estão sobre este elemento, quatro pequenos botões COD de quatro lados diferentes, do lado esquerdo do topo, do fundo e do lado direito Isso é o que vamos construir hoje neste projeto. Vamos começar a prática e ver como podemos construí-la. Então, como você pode ver lado a lado, abro meu iter de código do Visual Studio e meu navegador usando a extensão de servidor ao vivo, e meu navegador usando a extensão de servidor ao vivo, já crio um nome de documento HTML com o nome de um documento HTML, índice, ponto de índice Além disso, eu crio um arquivo css de pontos de estilo e vinculo esse arquivo a este documento. Então, dentro dessa etiqueta corporal, primeiro, vou pegar a etiqueta âncora Dentro da tag body, vou digitar A para tag âncora, e dentro da tag âncora, vou pegar uma tag span, span Então, dentro da tag Span, vou digitar sobre mim. Aqui, adicionamos essa tag pan porque queremos criar quatro partes do plano de fundo. Isso cobrirá o botão, e então eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o botão no meu navegador. Agora, os dois primeiros elementos que vamos criar usando o elemento psudo antes e depois Em seguida, usaremos essa tag pan para criar outras duas. Vamos entrar no arquivo CSS de pontos de estilo. No começo, vou estilizar o body tag board. Então, dentro da Cali, a primeira propriedade vou usar a margem e vou definir a margem Z. Depois disso, precisamos colocar essa tag âncora no meio desta página Vou usar Huber, vou usar a propriedade, essa peça, e vou torná-la flexível Depois disso, vou usar outra propriedade chamada alinhar item, alinhar o centro do item, justificar o conteúdo, justificar o conteúdo também centralizado Em seguida, vou definir altura, altura e vou usar a altura 100 da altura da janela de visualização Depois disso, vou definir a família da fonte. Família de fontes, e eu vou usar fonte aérea. Em seguida, vou definir uma cor de fundo. Vou usar uma cor de fundo escura, algum tipo de cor de fundo , hashtag, 222 Ele retornará a cor de fundo cinza escuro. E depois desse arquivo, é assim que parece. Em seguida, vou direcionar a tag âncora usando o nome da tag A. Em seguida, dentro da primeira propriedade color recess, vou usar decoração de texto, decoração texto e quero remover o sublinhado, então vou usar a NunVlu. Depois disso, vou colocá-lo em maiúsculas Vou vincular transformação de texto, texto, transformação. Eu quero colocá-lo em maiúsculas. Então eu quero definir o tamanho da fonte, o tamanho da fonte, e vou torná-la de 25 pixels. Depois disso, vou definir uma cor. Vou definir a cor dessa fonte, algum tipo de cor, e quero usar esse código de cores, hass tag, F six, B, 93b, essa cor amarelada, e vou definir Em seguida, vou fornecer espaçamento entre letras entre esses caracteres Então digite, letras, espaçamento e Heundpass Depois disso, vou definir um pouco de preenchimento. Eu preciso de um pouco de acolchoamento. Mas antes de definir o preenchimento, vamos adicionar a borda Borda por borda, eu quero uma borda sólida de três pixels. Borda sólida de três pixels, e nossa cor de borda é igual à cor da fonte. Eu copio o código de cores e vou colocá-lo aqui. Depois disso, vou adicionar preenchimento. Preenchendo de cima para baixo, quero definir 25 pixels e, da esquerda e da direita, vou definir 50 pixels e vou definir esse arquivo Depois de definir esse arquivo, é assim que nosso botão se parece. Em seguida, adicionarei a transição porque precisamos de algum efeito de suavização Vou digitar a transição. Quero aplicar toda essa propriedade e, em seguida, vou definir a duração de 1,5 segundo. Depois disso, vou definir a posição, a posição, vou definir relativo e vou definir esse arquivo. Eu configurei esse arquivo, eu vou configurar esse arquivo. Agora vamos trabalhar na parte frontal de um fundo amarelo Quando passarmos o mouse sobre esse link, ele cobrirá esse link Vamos criar o primeiro elemento de fundo usando a tag âncora Vamos usar antes um elemento ator para isso. Agora vou criar o pseudo-elemento antes e depois juntos Então, Ti, A, dois pontos, porta B. Em seguida, vírgula superior, Hemótipo A, cólon depois. Então, dentro dos calibrs a primeira propriedade que vou usar, vou criar um conteúdo em branco Conteúdo, dois pontos são um conteúdo em branco. É um conteúdo em branco. Depois disso, vou definir a posição. Posição, vou torná-la absoluta. Então eu vou definir. Nós, eu vou definir 25%. Em seguida, vou definir a altura. Altura, vou definir altura 100%. Depois disso, vou definir a cor do plano de fundo. Cor de fundo, vou usar a mesma cor de fundo que uso para a cor do texto. Em seguida, vou definir o índice Z para que o texto seja visível. Precisamos mover o plano de fundo para trás do texto. Então, vou digitar o índice Z, o índice Z e vou usar menos um valor Em seguida, vou usar a transição e vou definir a transição para todo esse elemento. Além disso, vou definir o tempo de transição, que é de 0,5 segundo. Agora, para configurar esse arquivo, é assim que nossos elementos se parecem. Lembre-se de que aqui usamos 25% da largura desse elemento e cortamos a etiqueta porque, se somarmos quatro elementos , ele cobrirá toda a área. É por isso que eu uso 25% para cada um dos elementos. Agora precisamos mover isso antes do elemento posito. Primeiro, vou mirar apenas no elemento anterior do Posido Então, dentro dos calibres, vou usar a melhor propriedade, E aqui vou definir a posição a partir do topo, vou atribuir valor zero. Então eu vou definir a posição esquerda, P e aqui eu vou passar -25%. E eu vou subtrair esse arquivo Depois de definir esse arquivo, é assim que ele se parecia agora. Então essa é a posição inicial do elemento anterior para esse kata E agora vou mudar a posição disso após o pseudo-elemento Vou colocar esse elemento nessa posição. Para isso, vou duplicar esta seção e, em vez de usar antes, vou usar depois A partir do topo, eu vou passar -100% Então, da esquerda, vou usar 20% positivos. Se eu definir esse arquivo, é aqui que queremos colocar esse elemento. Então, quando eu passo o cursor sobre esse botão, eu quero mover o elemento antes para o lado direito e eu quero mover o elemento depois para o lado inferior E vai completar os 50% da área. Agora, vamos falar sobre o efeito Hard. Primeiro, vou criar um Hoefect para o elemento anterior tipo A , com dois pontos Dois pontos, vou digitar o nome do elemento antes. Então, no clirass da primeira propriedade, vou usar o valor superior, superior, do topo, quero colocar zero quando eu tiver Hvar nela Eu quero colocar a posição e, a partir da tarde e do laboratório, também vou torná-la zero. Depois desse arquivo, quando eu abro minha cor nele, ele vai mover esse elemento para dentro dessa caixa. Do topo, ele vai fazer zero e do laboratório também vai fazer zero. É por isso que ele o coloca dentro desse elemento. Em seguida, precisamos trabalhar no efeito de foco do elemento superior. Precisamos mover o elemento para baixo. Do topo, precisamos posicioná-lo em zero e, do laboratório, precisamos movê-lo em 25%. 25% da área da borda da etiqueta nc. Vou criar o seletor de foco dele, algum tipo A, dois pontos, hora Em seguida, dois pontos, vou selecionar o elemento ator. Depois. Então, dentro da classe, do topo, vou colocar zero e, a partir do final, vou colocar 25%. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar o cursor sobre esse elemento, é assim que ele se parece Foi assim que cobriu 50% da área desse botão. Então, estamos quase terminando nosso trabalho central. Na próxima parte deste tutorial, criaremos as outras duas partes usando a tag span e antes do elemento positivo, e abordaremos as outras duas partes. Obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 13. Efeito de botão dividido, parte 2: Olá, pessoal. É bom ver você de volta. Esta é a segunda parte deste projeto, como você pode ver, já criamos dois elementos usando o seletor de posição anterior e superior do elemento raiva Nosso elemento anterior se move para o lado direito e nosso elemento superior se move para baixo E agora precisamos criar as duas partes restantes. Novamente, vamos criar esses dois elementos usando o pseudoelemento antes e depois Mas desta vez vamos usar o elemento psudo antes e depois dessa tag span, que você cria dentro dessa tag nga, essa Vamos dizer que o estilista diz que caiu novamente. Vamos criar esses dois elementos. Vamos entrar nesta seção e aqui para adicionar extensão cólon antes da extensão cólon depois E eu vou configurar esse arquivo. Perturbe esse arquivo, é assim que ele se parece. Então, criamos com sucesso esses dois elementos. Agora precisamos colocar os dois elementos. Para isso, primeiro, vou selecionar o intervalo antes do elemento, e aqui vou criar um seletor dele. Espalhe antes. Então, diz o escultor, aqui temos como alvo a etiqueta de extensão antes do elemento, que está dentro do elemento âncora Então, digite A, espaço, extensão, dois pontos antes. Em seguida, precisamos definir a posição do topo, 100% superior. Ele colocará esse elemento abaixo do botão e, em seguida, precisamos definir a posição correta. Então, dê a dica certa, 25%. Vou configurar esse arquivo. Depois de definir esse arquivo, é aqui que colocamos esse elemento. Do lado direito, foi enviado para 25% e, do topo , para 100% Da mesma forma, precisamos colocar o pseudo-elemento after Eu dupliquei esta seção e, desta vez, vou focar no elemento aer Então, nas cariras da direita, vou fazer -25%, e do topo, vou dizer zero Vou configurar esse arquivo. aqui que colocamos esse elemento posterior. Em seguida, precisamos trabalhar no seletor Hover. Deixe-me te mostrar. Primeiro, vou trabalhar no seletor Hover do elemento Before Vou digitar, ancorar, pontuar, passar o mouse e, em seguida, precisamos selecionar a tag Span span before element, span , dois-pontos Então, dentro das cálices, ao passar o mouse sobre esse elemento, quero mover esse elemento para o lado superior, aqui vou digitar do valor superior zero E também quero dizer que é valor certo, o valor certo, o valor certo. E para o dique, vou usá-lo 25% do jeito que está, 25%. E eu vou configurar esse arquivo. Ao definir este arquivo, se eu pular com o cursor sobre ele, você poderá ver o resultado. Foi assim que ele moveu esse elemento para cima. Agora precisamos trabalhar nesse elemento, o elemento per psudo dessa tag pan Então eu copio esta seção e colo aqui. E desta vez, eu seleciono o elemento depois, depois. Então, aqui, precisamos definir a posição. Aqui só precisamos fazer com que o valor correto seja zero, e precisamos definir esse arquivo. Depois de definir esse arquivo, se eu passar o cursor sobre ele, você poderá ver o resultado É assim que ele completa o plano de fundo com os quatro elementos diferentes. Em seguida, precisamos mudar a cor do texto quando eu passar o mouse sobre ele Vou criar um seletor Her da etiqueta âncora, A, dois pontos Então, dentro do processo do carro, vou usar a cor da propriedade e vou atribuir essa cor cinza escuro , mas com etiqueta a duas. Vou configurar esse arquivo. Depois de configurar este arquivo, quando eu coloco meu carro neste botão, você pode ver o resultado E nosso último dever é esconder a área de transbordamento fora da área de tecnologia da Anca Para isso, precisamos entrar no imposto Anca selecionado este, então aqui precisamos usar a propriedade chamada overflow Estouro oculto. Vou configurar esse arquivo. Um conjunto deste arquivo. Esse é o tamanho e a aparência. Se eu passar meu carro sobre esse elemento, você pode ver o lindo efeito O. Espero que agora esteja claro para você como podemos criar esse lindo botão Heft Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 14. Efeito hover do botão de troca de bordas, parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial sobre nosso projeto E hoje, neste tutorial, vamos criar esse lindo efeito de botão Então, se eu ouvir meus carros nele, você pode experimentar essa transição. Você pode ver que nosso botão tem quatro bordas longas ao redor dele. Além disso, você pode notar que eles não têm mesma altura e largura de acordo com o botão. É um pouco mais longo do que isso. Você pode notar que as bordas esquerda e direita têm maior altura e os boerhb superior e inferior Aprenderemos como fazer isso e como fazer essa transição. Então, vamos entrar no editor de código do Visual Studio. Como você pode ver lado a lado, abro meu editor de código do estúdio de resultados e meu navegador usando a extensão if server, e já criei um documento HTML chamado index dot TML Com isso, eu já crio esse arquivo CSS de mosaico e vinculo esse arquivo a este documento. Então, primeiro, dentro da tag body, vou adicionar uma tag âncora, A, e um hover do tipo hemo Eu. Em seguida, vou entrar no arquivo CSS de estilo e, primeiro, vou estilizar a tag body, body. Então, na primeira propriedade da Califórnia, vou usar Marji, vou dizer margem zero de toda a direção Então eu vou dizer display. Display, vou fazer com que seja flix porque quero colocar a etiqueta ancha no meio da fala e alinhar o heterótipo dos Além disso, vou digitar, justificar o conteúdo, justificar o conteúdo e também centralizar Em seguida, vou usar outra propriedade chamada altura, altura e vou atribuir altura 100 VH com altura visualizada. Em seguida, vou atribuir uma cor de fundo. Eu quero atribuir uma cor de fundo escura, então tipo herm, cor de fundo, hastag 222, esse código de cor, cor cinza E agora vou direcionar a tag âncora usando seu tagnym A, e dentro dos aliases, a primeira propriedade vou usar decoração de texto, texto, decoração . Primeiro, vou remover o sublinhado, então não vou Então eu vou converter esses textos em maiúsculas fuligem, texto, transformar maiúsculas Depois disso, vou definir o tamanho da fonte tamanho da fonte 22 pixels. Acho que fazer dois pixels é ótimo para isso, e vou definir esse limite. Em seguida, vou mudar a família de fontes, quero usar a fonte aérea Aéreo. Depois disso, vou definir o espaçamento entre as letras, a lacuna entre os caracteres, espaçamento entre as letras e vou torná-lo em três pixels Além disso, vou definir a cor. Cor, vou torná-la amarela, caso contrário, cor branca. Acho que a cor branca é boa para isso, branca. Depois disso, vou definir altura e largura, altura, altura e quero atribuir 60 pixels de altura. Então eu vou definir com. Nós. Também para maconha, vou usar 200 pixels. Acho que é bom para isso. Em seguida, vou definir a altura da linha, altura da linha e ela atribuir a altura da linha, 60 pixels. Além disso, precisamos alinhar o centro do texto desta página, então digite o texto alinhar o texto Vou configurar esse arquivo. Agora precisamos definir borda, borda, e eu quero usar borda sólida de dois pixels, sólido, nossa cor de borda é, por enquanto, vou usar a cor azul, acho que. Acho que azul é bom. Azul. Em seguida, vou definir a posição, a posição relativa e vou definir esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Agora precisamos trabalhar na borda longa que vimos no escuro para descobrir como criá-las, precisamos trabalhar passo a passo. Em primeiro lugar, para criar as bordas esquerda e direita, usarei o pseudo elemento anterior Vamos criar o pseudoelemento antes dessa tag Anca, A, dois pontos E primeiro dentro das calibragens, vou criar o conteúdo em branco Conteúdo, dois pontos, é um espaço em branco, e eu vou fazer nesta linha Depois disso, vou definir a posição. A posição é absoluta. Em seguida, vou definir a largura e a altura. Altura, vou fazer com que seja de 60 pixels, depois vou definir com o Wi que vou fazer com que seja de 200 pixels. Eu vou definir a primeira posição, topo. Do topo, vou colocá-lo zero e, da esquerda, vou colocá-lo em zero também. Agora você pode observar aqui que atribuímos a mesma altura e peso, que atribuímos em nossa etiqueta de ancoragem Até agora, o pseudo-elemento anterior tinha o tamanho exato desse elemento de codificação. Tem altura e largura semelhantes. Se eu definir esse arquivo, ele ficará em cima dele. Agora vou criar a borda esquerda e direita com ela. Deixe-me mostrar um tipo de borda esquerda, e eu quero uma garrafa de dois pixels , então uma borda sólida também é sólida Então nossa cor de borda é : vou atribuir a cor vermelha. Vermelho. Em seguida, vou criar a borda direita. Borda, direita e hemo passam dois pixels, borda sólida, sólida, e nossa cor de borda é Também quero usar a mesma cor de borda que uso para o texto Eu vou voar desta vez. Agora, se eu definir esse arquivo, é assim que ele se parece. É uma borda branca e aqui você pode ver a borda vermelha, e ela está na borda azul original. É por isso que você mal consegue vê-los. Agora eu quero fazer essas duas bordas um pouco mais longas. Vou aumentar a altura dessas duas bordas. Vou aumentar a altura anterior do pseudo-elemento. Eu vou fazer 90, e vou colocar essa pilha Agora você pode ver que parece um pouco mais longo. Agora, as bordas são 30 pixels maiores do que nossa altura de anctag, porque aqui atribuímos 90 pixels. E agora precisamos alinhar essa borda no meio desse conteúdo Quero dividir igualmente a borda na parte superior e inferior. Para isso, aqui, vou usar apenas o valor máximo. Vou fazer com que seja menos fif ping. Então, ele vai dividir a borda na parte superior e inferior. Então eu vou configurar esse arquivo, você pode ver o resultado. Então, essa é a primeira parte deste tutorial. Na próxima parte deste tutorial, criaremos as bordas superior e inferior. Então, obrigado por assistir a este vídeo. Fique ligado na nossa próxima parte. 15. Efeito hover do botão de troca de bordas, parte 2: É bom ver vocês. Esta é a segunda parte deste tutorial e aqui na seção, vamos criar a borda superior e inferior. Vamos entrar no estilo CSS spie. Aqui, vou criar o pseudoelemento superior A na taxa superior Então, primeiro, dentro do Caris, vou criar um conteúdo em branco, conter e estender o conteúdo, depois vou definir a posição Posição, eu vou passar por absoluto. Então eu vou definir altura, altura. Aqui eu vou atribuir altura de 60 pixels. Em seguida, vou definir, com, e vou ascender com 230 pixels, e depois vou posicioná-lo Do topo, por enquanto, do topo, eu vou fazer com que eu passe zero e da esquerda, eu também vou passar de zero. Em seguida, vou atribuir uma borda. Limitado. Primeiro, vou atribuir borda superior, borda superior e, na parte superior, vou atribuir dois pixels, borda sólida, e nossa cor de borda é peso. Em seguida, vou definir outra borda para a borda inferior inferior. Borda inferior, borda sólida de dois pixels e nossa cor de borda é branca. Vou submeter esse arquivo Depois de definir esse arquivo, ficou assim. Agora você pode ver que temos a borda superior e inferior, e ela é um pouco maior que a largura desse botão. Como você pode ver, o Hero está configurado com 200 pixels, mas para a borda, usamos 230 pixels e agora precisamos enviar a borda para o lado esquerdo, um pouco. Precisamos alinhá-lo ao centro. Precisamos alinhá-lo verticalmente. Para isso, em vez de zero, ela passa menos 15 pixels px. Vou satisfazer esse arquivo, é assim que ficou. E agora não precisamos mais dessa borda azul. Eu vou esconder essa fronteira. Vou comentar essa linha e configurar esse arquivo. Estão configurados este arquivo, é assim que ele se parecia. E agora precisamos trabalhar no efeito de foco. Lembre-se, quando eu passo o mouse sobre essa linha, eu quero mudar a borda de seus rostos Quero moldar o vermelho superior para baixo e o vermelho esquerdo para o lado direito, e isso pode ser feito com muita facilidade. Então, vamos trabalhar no pseudo-elemento flutuante. Vamos criar o seletor Her do elemento positivo diferido Então, amarre, A, dois pontos, passe o mouse e depois dois pontos, eu vou amarrar Então, na calibração , vou usar a transformação de Pooper e vou passar o valor de rotação Y, girar Y. Então, eu quero girar esse elemento em 180 graus, 180 DG, vou Vou girar o pseudoelemento anterior em Y Xs 180 graus. Se eu passar o cursor sobre ele, instantaneamente, você poderá ver o resultado Basicamente, isso ativará o YxSDer para que aconteça sem problemas Precisamos entrar no pseudo-elemento anterior e aqui Tipo sumô, transição completa e nosso tempo é de 1 segundo. Obviamente, esse arquivo quando eu passo o mouse sobre este link. Como você pode ver, foi assim que mudou a posição. Basicamente, ele inverte o elemento. Agora você pode ver a borda mudar a posição exatamente que queremos. Agora precisamos inverter o elemento after. Para isso, vou duplicar esta seção e, em vez de usar antes, vou selecionar depois Então, dentro do Cls aqui, vou usar o valor de rotação x. Em vez de usar girar Y, vou usar girar x e vou definir esse arquivo Depois de configurar esse arquivo, se eu passar por cima do meu carro neste botão, você poderá ver o resultado. Mas também precisamos adicionar transição nesse pseudo-elemento superior Eu copio esse valor e propriedade, o mesmo valor e propriedade, e vou colá-los aqui. Agora, se eu definir esse arquivo e quem quer que sejam meus carros neste link, aqui você pode ver o lindo efeito de transição Mas se você quiser torná-lo mais atraente, você pode adicionar um pequeno atraso de transição no pseudoelemento superior, algum tipo de transição B, e eu quero durar até 0,2, caso contrário, 0,2 segundo Se eu definir esse arquivo e os carros Herm estiverem nele, agora você pode notar que depois de eu mover para a esquerda e para a direita, ele se moveu para cima e para baixo, e isso cria um belo efeito Então, espero que agora esteja claro para você como podemos criar esse lindo efeito Hover Então, obrigado por assistir a esta estátua em vídeo para nosso próximo estúdio. 16. Efeito de botão de crescimento de bordas criativas: Olá, pessoal. Bem-vindo à nova lição deste curso. Nesta lição, vamos criar outro botão interessante, o HaiFtT Como você pode ver, esse botão tem uma borda no canto superior esquerdo e no canto inferior direito E quando eu coloco o cursor Huberm, ele aumenta a altura e a largura da borda e fica sobre este lindo botão Então, vamos ver como podemos construir. Como você pode ver, lado a lado, abro meu editor de código salt Studio e meu navegador usando extensão de servidor Live e já criei um documento HTML com o nome index dot html Com isso, eu também vinculo arquivo CSS de estilo e é um arquivo vazio. Agora, no primeiro ponto de índice StimlPage vou criar um botão Aqui vou digitar o botão, e dentro desse botão, vou digitar enviar. Vou configurar o arquivo. Depois de definir o arquivo, é assim que ele se parece. Em seguida, vou pular para o meu arquivo CSS. Estilo ou CSS. No início, vou segmentar a tag body, body usando o nome da tag. Então, dentro dos aliases, primeiro, vou dizer margem e vou dizer margem zero, e vou dizer margem zero, depois vou definir a altura, altura e vou definir 100 H para altura Em seguida, vou definir a exibição. Nesta peça, vou usar o display flex. Depois disso, vou alinhar esse item, alinhar o centro do item, justificar o conteúdo, justificar o conteúdo e também centralizar Em seguida, vou definir a cor do plano de fundo. Cor de fundo aqui eu vou usar a hashtag 27, 2727. Vou configurar esse arquivo. Até configurar este arquivo, como você pode ver, essa é a cor de fundo cinza escuro. Além disso, alinhamos esse botão no meio desta página horizontal e verticalmente. Em seguida, vou estilizar essa etiqueta de botão, botão de tipo de música, botão dentro dos escultores. Primeiro, vou definir a borda Border, eu não vou definir nada. Em seguida, vou definir o preenchimento de preenchimento. De cima para baixo, vou atribuir 12 pixels, e da esquerda para a direita, vou atribuir 40 pixels. Depois disso, vou definir a cor do plano de fundo. Cor do plano de fundo. Para a cor de fundo, vou pesquisar a cor da onda. A cor da onda e o leme abrem qualquer site. Então, dessa cor da web, vou escolher uma das cores. Então, eu gostaria de usar essa cor de salmão claro. Então eu copio o valor hexa dessa cor e vou colá-lo aqui Vou configurar esse arquivo. Em seguida, volte ao documento. Depois disso, vou definir a família da fonte. Família de fontes, vou usar qualquer fonte que você possa usar aérea Em seguida, vou definir o tamanho da fonte. Tamanho da fonte, vou usar o tamanho da fonte de 22 pixels. Em seguida, vou converter esse texto em maiúsculas, texto , transformar maiúsculas Além disso, vou fazer nosso cursor apontar quando eu pular meu cursor neste botão. Então, para digitar o cursor, vou torná-lo apontado. Também vou posicioná-lo. Posição, vou tornar a posição relativa. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Além disso, vou atribuir uma pequena fonte a essa fonte. Eu preciso de uma fonte um pouco mais ousada aqui, vou atribuir 700 e vou salvá-la novamente. Com isso, vou mudar a cor do texto, cor do smotype e vou torná-la branca Vou configurar esse arquivo. Nós estilizamos esse botão com sucesso. Agora vamos criar as fronteiras. Primeiro, vamos criar a borda no canto superior esquerdo usando o pseudo-elemento before, depois vamos criar a borda no canto inferior direito usando o elemento after psudo Para criá-lo, basicamente, precisamos criar uma pequena caixa. Deixe-me te mostrar como. Aqui, vou digitar botão, dois pontos, antes do elemento. Antes. Então, dentro das cores, a primeira propriedade, vou usar conteúdo, conteúdo, e aqui eu digito, vou criar um conteúdo vazio. Depois disso, vou definir a posição. Posição, vou torná-la absoluta. Então eu vou definir wd. Largura, vou fazer com que seja de 24 pixels. Além disso, vou definir a altura. Altura, vou defini-la como 24 pixels. Em seguida, posicionar a caixa quadrada naquele canto do laptop. Do topo, vou posicioná-lo zero e, no lado esquerdo, vou posicioná-lo em zero novamente. Além disso, vou definir uma cor de fundo, cor fundo e, por enquanto, vou definir a cor vermelha, VERMELHA, que possamos entender a caixa quadrada com muita facilidade. Predefina esse arquivo, é assim que ele se parece. Agora, se você se lembra, nossa fronteira está fora da área. Lá fora, eu quero dizer fora da área dos botões. Vou enviar a caixa quadrada, e um pouco em cima Então, vou enviá-lo menos cinco pixels, digitar menos cinco pixels, cinco pixels do laboratório Além disso, vou usar o mesmo valor para o topo. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Agora, depois de enviá-lo a cinco pixels da parte superior e da esquerda, ele sai da área do botão. Agora, vamos adicionar a borda superior e esquerda. Então, aqui, vou usar primeiro, vou usar borda superior, algum tipo de borda, superior. Quero usar dois pixels, borda sólida, e nossa cor inferior é exatamente a mesma cor que usamos para o botão. Copie o valor da cor e eu vou colá-lo aqui. Então eu vou duplicar essa linha. Desta vez, vou criar a borda no lado esquerdo, com a garrafa atrasada. Eu uso a mesma borda e vou definir esse arquivo. Defina este arquivo, você pode ver a borda. No lado superior e no outro está o lado esquerdo. Em seguida, precisamos animar essa borda. Eu quero crescer quando coloco o mouse sobre meus carros neste botão. Podemos fazer isso com muita facilidade. Precisamos aumentar a altura e a largura dessa caixa quadrada. Vamos criar o seletor de hober desse botão no botão de texto, dois pontos, orifício, dois pontos, Então, dentro do civuss, vou definir altura e altura de 100% Além disso, vou definir largura, largura 100%. E eu vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar o mouse sobre ele, você poderá ver o resultado Mas precisamos adicionar uma pequena transição quando eu passo mouse sobre ela, porque instantaneamente ela aumentou a altura e a largura dessa barra Aqui eu vou usar a propriedade de transição. Faça a transição de tudo. Com isso, também vou definir o tempo para essa transição que é de 0,25 segundo Eu acho que é o suficiente. Vou configurar esse arquivo. Depois de definir este arquivo, se eu esperar que meus carros estejam nele, você poderá ver o resultado. Depois de adicionar a transição, depois de definir esse arquivo, se eu espero que meus carros estejam nele, você poderá experimentar essa transformação. Agora, precisamos remover esse fundo vermelho. Precisamos apenas da fronteira. Para isso, vou comentar esta linha e vou configurar esse arquivo. Se eu definir esse arquivo, você poderá ver o resultado. Agora precisamos fazer a mesma coisa para o canto direito da borda. Para isso, vamos usar o elemento Posido. Vou copiar esta seção e colá-la depois do seletor Her Então eu vou primeiro, eu vou mudar antes depois. Depois disso, vou mudar a posição. Primeiro, vou mudar de cima para baixo e depois vou mudar da esquerda para a direita. Depois disso, também precisamos mudar a borda superior para a borda inferior e a borda, da esquerda para a borda, direita. Vou configurar esse arquivo e aqui você pode ver o resultado. E da mesma forma, precisamos criar o cursor selecionado para esse elemento posterior Eu copio esta seção novamente e vou colá-la aqui, e aqui vou substituir as quatro por depois. Vou configurar esse arquivo. Agora, depois de definir esse arquivo, se eu barrar que minhas cartas estão nesse elemento, alcançamos o resultado desejado. Harry conseguiu esse lindo efeito de botão Hover. Espero que agora esteja claro para você como podemos criá-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 17. Efeito criativo de botão rotativo da primeira letra: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo botão relacionado ao projeto Haift. Neste projeto, vamos criar esse lindo botão Como você pode ver, quando os cartões I Hoberm estão neste botão, você pode notar que o fundo gira um pouco Além disso, aumentou o tamanho dessa primeira letra, B, e também girou a letra B em 360 graus Vamos ver como podemos criar esse lindo botão Hari fit Vamos entrar no código do estúdio. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão de servidor ativo e já crio um documento SML chamado index dot HTML Com isso, vinculo este arquivo CSS do modelador de documentos. Vamos começar a adicionar uma tag Anca e dentro da ncatag vou pegar uma tag span e dentro da tag span, vou digitar a letra B maiúscula para que possamos animar essa letra que possamos animar essa Então, fora da tag span, vou digitar o resto da palavra. Botão. Em seguida, vou recarregar meu navegador Agora precisamos alinhar esse botão no meio desta página horizontal e verticalmente. Para isso, precisamos entrar no arquivo CSS de pontos de estilo. Primeiro, vou focar na etiqueta do corpo, primeiro no corpo do cali vis, vou definir a altura e vou definir a altura 100 da altura da janela de visualização Em seguida, vou exibir a tela. Vou fazer com que ela se solte. O aplicativo que vou aplicar, justifique conter centralizado. Em seguida, vou digitar itens de alinhamento também centralizados. Além disso, vou definir a família de fontes, e vou usar a fonte aérea, aérea E, finalmente, vou esconder a área de transbordamento. Estouro oculto. Então eu vou usar a cor de fundo. Para cor de fundo, vou digitar Hashtag 22, esse fundo cinza escuro Vou configurar esse arquivo. Em seguida, vou estilizar essa captura algum tipo A e, dentro da propriedade carissF, vou usar decoração de texto Decoração de texto, vou fazer com que não seja porque quero remover o sublinhado Depois disso, vou definir molhado. O que, ele colocou uma erva daninha, 160 pixels. Então eu vou atribuir a altura. Altura por altura, vou atribuir 60 pixels. E vou definir a cor colorida e quero atribuir a cor branca ao texto. Depois disso, vou definir a fronteira. Borda, e eu quero usar, e eu quero usar borda de cor sólida de dois pixels, borda sólida de cor sólida de dois pixels, sólida, e nossa cor de borda é branca, Hastag se for A. Vou submeter este arquivo . configurar esse arquivo, é assim que ele se parece. Em seguida, vou alinhar o texto no meio desse contêiner Então, para digitar o alinhamento do texto, alinhe o texto ao centro. Depois disso, vou definir a altura da linha, a altura da linha e quero atribuir a altura da linha, quase 60 weixel. Acho que 60 pixels são bons Depois disso, vou definir o tamanho da fonte e o tamanho da fonte e vou torná-la 25 pixels. E eu vou submeter esse arquivo. Depois de submeter este arquivo, é assim que orbita e se parece. Em seguida, vou tornar a posição relativa e também vou adicionar a transição. Transição, todo esse elemento e nosso tempo de transição são zero ponto, algo em dois segundos. Acho que é bom para isso. Vou submeter esse arquivo Agora vamos criar o fundo branco. Quando você passa o mouse sobre este link, ele gira esse fundo e usaremos o psudoelement anterior para usaremos o psudoelement anterior Aqui vou digitar ancha tag antes do psudoelement. Antes de entrar, o calibre diz, primeiro, vou criar um conteúdo em branco Conteúdo e eu quero criar um conteúdo em branco. Depois disso, quero posicioná-lo, posicioná-lo, quero torná-lo absoluto. Além disso, você precisa colocá-lo de cima, eu vou passar de zero e, a partir do final, também vou passar de zero. Em seguida, vou definir com a altura desse elemento. Vou usar 100% e altura. Como eu vou usar 100% por cento. Em seguida, vou definir a cor de fundo. Cor de fundo, e eu quero usar a cor branca, esse código de cores. Eu vou satisfazer. Depois de satisfazer, como você pode ver, ele cobriu todo o botão e, para que o texto apareça acima dele, precisamos usar o índice Z. Índice Z menos um menos um, e eu vou satisfazer. Agora, ele deve estar invisível e, quando eu passar o mouse sobre esse link, ele deve aparecer e desaparecer . Também girou. Vou dizer opacidade zero e vou fazer uma transição de transição, e vou definir t 0,8 Em seguida, vou criar um seletor de foco desse elemento diferente Então, aqui, eu vou empatar. Então, aqui vou amarrar uma etiqueta, dois pontos, Hal. Seletor de overs. Então, vou focar no elemento anterior. Então, no interior, o calibre diz: Aqui, quando eu passo o mouse sobre ele, eu quero definir a opacidade Vou tornar a opacidade uma. Eu quero torná-lo totalmente opaco, não transparente. E então eu vou aplicar a propriedade de transformação, transformar e eu quero girar esse elemento Em breve, para digitar, rotacione. Transforme a rotação e eu quero girá-la, quero girar esse DEG de 15 graus . Vou configurar Depois de configurar esse arquivo, ao passar por cima meu cursul, você pode notar primeiro que ele tornará o fundo branco, o fundo transparente opaco e, em seguida, girará o elemento Em seguida, ele girará o elemento de fundo em 15 graus Agora, depois disso, quero mudar a cor do texto ao passar por cima deste link. Eu quero deixar esse texto em preto. Para isso, vou criar um seletor de foco, aqui vou digitar Anca tag hover digitar Anca tag Então, dentro das cores, primeira propriedade, vou usar cores. Cor, vou torná-lo branco e vou configurar esse arquivo. Depois de definir este arquivo, se eu carregar o cursor, desculpe, precisamos torná-lo preto porque já usamos a cor branca do texto Vou fazer com que tenha uma etiqueta para fazer esse código de cores. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar o cursor sobre ele, você poderá ver o resultado Agora vamos nos concentrar na primeira letra B. Se você se lembra, quando eu passei o cursor sobre esse botão, ele aumentou o tamanho da primeira letra e, como você pode ver, Harry colocou a letra B dentro da etiqueta de extensão Vou ter como alvo essa tag de extensão. Aqui, vou digitar A, dentro dessa tag A, tag âncora, vou direcionar a tag span, span Então, dentro do fígado, primeira propriedade, vou usar cor, cor e vou torná-la transparente Em seguida, vou fornecer a posição e quero torná-la relativa. Agora você pode ver que a primeira letra agora está invisível porque dissemos que a cor era transparente. É por isso que é invisível. Em seguida, vou criar o pseudo-elemento anterior da tag span Aqui estou do tipo A, span, a span, o pseudo elemento anterior Então, dentro da Classe, eu vou criar conteúdo, conteúdo e colocar a letra B. Então eu vou posicioná-la na posição, vou torná-la absoluta. Em seguida, vou fornecer cor, cor e quero colorir essa cor cinza escuro. Desculpe, eu uso a cor branca, branca. E então precisamos usar a propriedade de transição. Transição. E aqui, eu vou fazer a transição. E também precisa definir o tempo de transição, que é de 0,2 segundo. Vou configurar esse arquivo. Agora, vamos trabalhar no efeito rígido dessa etiqueta de caneta, Sandfoelement, algum tipo de etiqueta âncora, Hal, span, colon, BFO Então, primeiro dentro da resina de cor, vou mudar a cor quando eu a colocar. Então digite a cor, eu vou torná-la de cor escura 222. Então eu quero aumentar o tamanho da fonte, algum tamanho de fonte do tipo, e vou torná-la de 80 pixels. Finalmente, precisamos girar, digitar, transformar, girar, e eu quero girá-lo 360 graus D EG, e vou configurar esse arquivo Então, defina este arquivo se eu passar o mouse sobre o cursor neste botão, como você pode ver, a primeira letra B gira 360 graus Mas o problema é que encobriu as outras letras. Preciso movê-lo um pouco que não esconda as outras letras. Com isso, vou usar translate propriety, some type, translate Vou enviar para menos 65% dos XXs e menos 10% dos YxS Depois de definir esse arquivo, se eu colocar meu cursor neste botão, você poderá experimentar esse lindo efeito de passar o mouse sobre o botão Agora é enviado para o XXS -65% e é enviado para o YXS -10% É por isso que cria esse lindo efeito, mas que efeito. Espero que agora esteja claro para você como podemos construí-lo. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 18. Efeito de fundo com quatro bordas crescentes: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo projeto. Hoje, neste projeto, vamos criar esse lindo efeito de botão flutuante Como você pode ver quando eu pulo meus carros neste botão, quatro bordas diferentes cobriam esse botão. Vamos ver como podemos licitar. Como você pode ver lado a lado, abro meu editor de código do Studio de usuário e meu navegador usando o FSERetension, e já crio um documento SML nomear Com isso, eu já crio o arquivo CSS Stylod e vinculo esse arquivo CSS Styload a esse documento Agora, primeiro, dentro da tag body vou criar uma tag de botão. Botão. Além disso, vou pegar uma tag span, span, e vou definir esse arquivo. Depois de definir esse arquivo, ficou assim. Agora, precisamos entrar no arquivo CSS stylo. Vamos entrar nesse arquivo CSS stylo e começar a estilizar. Primeiro, vou selecionar body tag, body. Então, dentro da tag body, a primeira propriedade, vou usar a margem. Margem, vou atribuir zero. Em seguida, vou atribuir a exibição. Display, vou flexioná-lo. Em seguida, vou atribuir o item de alinhamento, alinhar os itens centralizados Também moti justify content center. Em seguida, vou atribuir altura, altura 100 VH à altura da janela de visualização Em seguida, vou atribuir família de fontes, área de família de fontes. Em seguida, vou atribuir a cor de fundo, subtipo de cor de fundo Para isso, vou usar a cor cinza escuro, hass tag 222, e vou definir esse arquivo Depois de definir esse arquivo, você pode ver o resultado. Agora você pode notar que ele alinhou o botão no meio desta página horizontal e verticalmente Agora vamos mirar no botão. Em seguida, vou selecionar o botão. Então, para amarrar o botão dentro da cor, resista. Dentro da resistência de cores, a primeira propriedade em que vou usar a cor de fundo, cor de fundo, vou dizer cor de fundo vermelha. Na próxima propriedade, vou usar border, Border, e vou remover toda a borda dela, então vou usar Nan Velu Depois disso, vou posicioná-lo. Posição, vou torná-la relativa. Então eu vou definir a altura de Wieden. Para maconha, aqui vou usar 400 pixels e para a altura, vou usar 120 pixels. Em seguida, vou converter essas tomadas, o texto do botão em maiúsculas O tipo leva, transforma, recebe transformação, em maiúsculas. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, precisamos aumentar o tamanho da fonte. Vou fazer com que o tamanho da fonte seja o tamanho da fonte e vou fazer com que seja de 45 pixels. E vou salvá-lo novamente para ordenar o texto dentro do botão vertical e horizontalmente, vou usar a Altura da linha, 120 pixels. Também vou digitar o centro da linha de texto. Em seguida, vou adicionar cor a essa cor e cor especiais, vou torná-la branca. Com isso, vou adicionar espaçamento entre letras. Espaçamento entre letras, vou adicionar 15 pixels e vou definir esse arquivo Depois de definir esse arquivo, é assim que nosso botão se parece. Agora, vamos criar a borda superior, que vem no lado direito esquerdo Para isso, vou usar antes os pseudo-elementos. Vou digitar botão de botão, dois pontos, e aqui vou digitar antes Depois, nas maldições, primeiro, vou criar um conteúdo em branco Conteúdo, é um conteúdo em branco. Depois disso, precisamos posicioná-lo, posicioná-lo, e eu vou torná-lo absoluto. Em seguida, vou definir onde vou colocar. De cima, por enquanto, vou colocar zero da esquerda por enquanto, vou colocar zero também. Em seguida, vou definir a largura. Largura, vou usar 100 pessoas. Depois disso, vou definir a altura. Altura, mas para altura, vou usar quatro pixels, quatro pixels. E também vou definir a cor do fundo, a cor do plano de fundo e vou torná-la branca. Vou submeter esse arquivo. Depois de definir esse arquivo, é assim que nossa borda se parece. Basicamente, não é uma fronteira, é um elemento profundo. Agora vou mover esse elemento, antes que o pseudo elemento fique de lado Deixe-me te mostrar como. Aqui, em vez de usar o valor b zero, vou usar -100% Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Agora, a linha foi enviada para o lado esquerdo. Em seguida, adicionarei transição, transição total e adicionarei zero ponto e 0,5 segundo. Vou configurar esse arquivo. Agora, quando ouvimos falar desse botão, quero voltar a borda para sua posição original. Então, para digitar, botão, passe dois pontos, dois pontos, antes do elemento, antes Então eu quero mover esse elemento ep para o lado direito, algum tipo, valor esquerdo, zero voltará à sua posição original. Depois de definir esse arquivo, se eu pular o cursor sobre esse botão, você poderá ver o resultado. Da mesma forma, quero criar a borda inferior. Vou localizar toda a seção e, em vez de usar antes, vou usar Então eu vou mudar a posição. Em vez de usar top, aqui vou digitar bottom. Além disso, vou mover esse elemento para o lado direito. Aqui eu vou passar para a direita -100% e vou definir este Além disso, precisamos fazer algumas alterações no seletor superior em vez de usar antes, vou usar depois em vez de usar o valor do led, vou usar o correto Vou configurar esse arquivo. Eu defino este arquivo, se eu segurar meu Custer nele, você pode ver o resultado Agora, da mesma forma, vou criar as bordas do lado esquerdo e do lado direito. Para isso, novamente, vou selecionar esta seção , copiá-la e colá-la aqui. Desta vez, em vez de usar o botão, vou usar span. Da mesma forma, vou criar o conteúdo vazio apenas para mudar a posição e depois a altura. Desta vez, vou usar quatro pixels por semana quatro pixels e altura de 100%. Então eu vou mudar o valor máximo. Em vez de usar zero, vou usar -100% E então eu vou mudar o valor da esquerda para a direita, da esquerda para a direita. Vou tornar esse valor zero e vou definir esse arquivo. Depois de definir esse arquivo, é aqui que colocamos esse elemento. Agora você pode ver que está acima do botão, a linha acima do botão. Além disso, você pode notar. Além disso, você pode notar que ele toca no lado direito desse botão porque usamos a posição correta zero. Agora, quando você passa o mouse sobre esse botão, quero voltar à posição original Eu quero dizer que, de cima para baixo, eu quero fazer com que seja zero. Então, vou criar o seletor Her desse botão, para amarrar o botão, passar dois pontos, para amarrar o botão, passar dois pontos, espaço, extensão, Então, dentro do Carlss e depois dentro do recesso do carro, vou usar o melhor valor, vou fazer zero Do topo, quero colocá-lo na posição zero. Vou configurar esse arquivo. Depois de configurar esse arquivo, aqui você pode ver o resultado. Quando abro meu carro nesse elemento, você pode notar o resultado, como o pseudo-elemento anterior está do lado direito para baixo em seu próprio lugar Agora, da mesma forma, precisamos criar o outro elemento para o lado esquerdo. Vou duplicar esta seção, a seção inteira, e em vez de usar antes, vou usar depois Para criar a borda final, em vez de usar 100% superior, vou criar a parte inferior. Parte inferior, 100%. -100%, em vez de usar a direita, vou usar a esquerda e vou definir esse arquivo Depois de configurar esse arquivo, aqui vocês veem o resultado. É assim que o criamos. Agora, precisamos movê-lo para cima quando minhas cartas estiverem nele. Para isso, em vez de usar antes, quero usar o elemento after com o Hover Effect Em vez de usar a parte superior, vou usar a parte inferior. Vou configurar o arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Se eu abrir meu cursor neste botão, você poderá ver todas as bordas chegarem ao seu lugar original quando você passar o mouse sobre elas A última coisa que precisamos fazer esconder a área de transbordamento Precisamos esconder essas fronteiras , então precisamos usar overflow hidden Dentro da cabeça do botão, vou usar a perversão excessiva Transbordamento oculto. Além disso, vou tornar o plano de fundo transparente. E eu vou configurar esse arquivo. Agora, depois de definir este arquivo, se eu pular no meu cortador neste botão, você poderá ver o resultado É assim que podemos mover e estender todas as bordas dos quatro lados diferentes e criar um lindo efeito de botão Hover Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 19. 2 Efeitos de botão de corte: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo efeito de foco do botão CSS do Project Tate. E hoje, neste projeto, vamos criar essa linda animação de passar o mouse com botões de corte Aqui você pode ver duas cartas na parte superior e na inferior E quando eu passo o mouse sobre ele, como você pode ver, ele é coberto com a cor de fundo preto Além disso, mudou com a cor do texto. Então, vamos ver como podemos criar esse lindo efeito de passar o mouse sobre o botão Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão de servidor ativo e já crio um documento HTML chamado index dot HTML Com isso, eu já crio um arquivo de estilo namestyle dot CSS Eu vinculo esse arquivo a este documento. Então, dentro dessa etiqueta corporal. No início, dentro da minha etiqueta corporal, vou pegar uma etiqueta de âncora Então, dentro dessa etiqueta âncora, vou pegar uma etiqueta de extensão Abra e entre o botão do tipo hemo da minha etiqueta âncora. Não é a etiqueta inferior, apenas o botão. Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Agora precisamos entrar no arquivo CSS de estilo e, primeiro, precisamos alinhar esse botão no meio desta página Além disso, vou mudar a cor do plano de fundo. Aqui, primeiro, vou estilizar o corpo da seção do corpo. Então, na primeira probidade da calibragem , vou usar a Vou atribuir a altura de 100 à altura da janela de visualização. Então eu vou atribuir essa probabilidade. Exiba flocos. Justifique o conteúdo, justifique o centro de contenção. Também alinhe o centro de itens. Então eu vou dizer família de fontes. Família de fontes, vou usar a fonte Aerial. Depois disso, vou me esconder no transbordamento. Transbordamento oculto. Vou configurar esse arquivo. R: Para definir esse arquivo, como você pode ver, nós os alinhamos com sucesso, mas no meio desta página Em seguida, vou estilizar a etiqueta âncora. R, então dentro das calibrações, a primeira propriedade eu vou usar a decoração de texto Decoração de texto, quero remover o sublinhado, então não quero dizer nada Isso eu vou definir com 160 pixels. Então eu vou definir a altura, altura de apenas 60 pixels. Em seguida, vou usar cores. Cor e aqui, eu vou definir a cor preta. Depois disso, vou dizer altura da linha. Linha, altura, vou definir 60 pixels. Em seguida, vou alinhar o centro do texto desse tipo de botão alinhar o texto Depois disso, vou fazer com que seja capitalizado. O texto capitaliza alguma dica de transformação de texto, transformação texto, vou fazer com que seja maiúscula Em seguida, vou definir o tamanho da fonte. Tamanho da fonte, vou torná-la de 25 pixels. Depois disso, vou definir a posição dela, a posição, vou torná-la relativa e, para a suavidade, vou usar a propriedade de transição Transição, todo o elemento e nosso tempo de transição é de 0,2 segundo. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Em seguida, vou direcionar a tag span que está dentro da tag âncora, subtipo A, Então, dentro dos vasos do carro vou definir a posição Posição, vou torná-la absoluta. Depois disso, vou definir a largura da largura em 100%. Então eu vou definir altura, altura também 100%. Depois disso, vou definir a posição. Quero colocá-lo no canto superior esquerdo, algum tipo de valor máximo, vou passar zero. Por ultimamente, eu também vou passar de zero. Em seguida, vou definir uma cor de fundo. Cor de fundo. Por enquanto, vou usar a cor vermelha. Acho que, por exemplo , vou definir a fronteira. Borda, e eu quero usar dois pixels, dois pixels, e nossa borda é borda sólida sólida Borda sólida. Sólido, e nossa cor de borda é preta. Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Basicamente, eu não quero esse fundo vermelho, eu só quero a borda, então vou comentar sobre esse leão, não preciso dele. Vou configurar esse arquivo. Em seguida, precisamos criar os recortes que existem na borda superior e inferior, e vamos usar o pseudo lamin anterior para Aqui, vou amarrar o cólon antes do pseudo-elemento Então, dentro dos proprietários da primeira propriedade, eu vou usar o conteúdo O conteúdo é um conteúdo em branco. Lá eu vou definir a posição. Posição, vou torná-la absoluta. Depois disso, vou definir a largura, Largura, aqui, vou usar a largura de oito pessoas. 8% desse botão. Em seguida, vou definir altura, altura e vou aumentar a altura, então vou usar 500% 500% da altura desse botão. Em seguida, vou definir uma cor de fundo. Cor de fundo, vou usar a cor vermelha vermelha. E eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Agora vou centralizar esse elemento metror desse botão Para isso, vou passar para value, top, e vou passar 50%. Em seguida, vou definir a posição dos lábios, p também 50%. Em seguida, vou usar a propriedade transform, transforme, vou passar o valor de translação, traduzir e -50% Para XX e para xs -50%. Vou configurar esse arquivo. Eu aceito esse arquivo. Era assim que parecia. Alinhamos com sucesso esse elemento no meio desse botão Agora, o fundo vermelho está centralizado dentro do botão. Mas o problema é que está na frente do texto e eu quero que o texto apareça na frente dele. Vou pular para o seletor de extensão e aqui, vou usar o índice Z, o índice Z, vou passar menos menos um e vou definir esse arquivo Esse arquivo, como você pode ver , resolve o problema. Então, para obter o efeito de corte, vou girar esse elemento Aqui eu vou digitar, girar e vou girá-lo até 60 DEG, vou subtrair esse arquivo Acho que vou girá-lo e girá-lo em direções opostas, então vou fazer com que seja -60 graus e depois de definir esse arquivo, você poderá ver Giramos esse elemento no sentido anti-horário. Agora, vamos trabalhar no efeito flutuante. Ao passar o mouse sobre esse link, quero estender a largura desse elemento vermelho Quero fazer com que 100%, em vez de 8%, encobriremos completamente o link. Mas antes, na minha tag span, adicionarei transições, todas as transições , todas as transições, e adicionarei 0,22 segundos Depois disso, vou criar um seletor de foco antes do spentag Dois pontos pairando. Espaço, extensão, então vou amarrar cólon, cólon antes. Em seguida, dentro dos calibradores. Primeiro, vou estender a maconha, se eu passar meus carros sobre ela Nós, alguns conjuntos com 100 por si. Depois disso, vou mudar a cor do plano de fundo. Cor de fundo, vou torná-la preta. Agora, depois de configurar esse arquivo, se eu passar o mouse sobre este link, você poderá ver o resultado Ele se estende até 100%, além disso, o torna preto quando eu passo o mouse sobre ele Por causa dessa cor preta, não conseguimos mais ver o texto. Quando eu passo o mouse sobre esse link, quero deixá-lo branco Vou amarrar Anchor Hover. Então, dentro do vestido colorido vou fazer a cor branca. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar minha cor sobre ele, você poderá ver o resultado Com isso, ao passar o mouse, quero girar esse Eu quero fazer 60 graus quando eu passar o mouse sobre ele. 60 graus positivos. Vou copiar essa linha e colá-la aqui. Vou mudar 60 graus negativos para 60, 60 graus positivos e vou definir esses cinco. Sempre que passo o mouse sobre esse link, como você pode notar, a raiz do fundo vermelho está a 60 graus E a única coisa é tarde, precisamos mudar o fundo vermelho e torná-lo branco. Por causa disso, vamos conseguir esses dois cortes. Vou pular para a seção de elementos anteriores e vou torná-la vermelha para branca. Vou configurar esse arquivo. Depois de definir este arquivo, aqui você pode observar os recortes Além disso, vou entrar no seletor anctag e Eu vou dizer que transborda, transborda calor. Estouro atômico oculto, se eu definir esse arquivo, como você pode ver, acho que há um problema com ele porque acho que sim, precisamos usar o dimensionamento da caixa Não usamos o tamanho da caixa para isso. Vou usar a estrela seletora universal e dentro do quadrado dentro do Calibra aqui, vou digitar o tamanho da caixa Boerbx de tamanho da caixa. Se eu definir esse arquivo, você poderá ver o resultado. Agora temos esses dois cortando meu botão interno. Se eu mantiver minha maldição sobre ele, você poderá ver o resultado. É assim que ele anima esse botão. Basicamente, aumenta a largura desse elemento anterior. Em vez de 8%, ele aumenta até 100% e fornece esse lindo efeito de passar o mouse sobre o botão Espero que não seja uma calúnia para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 20. CSS3 3D Flip on Hover Efeitos puros do botão Hover CSS3 3D: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro projeto. E hoje, neste projeto, vamos criar esse lindo efeito de botão flutuando Vamos criar esse efeito de foco de três botões D. Como você pode ver, há um botão. Se eu colocar meu cursor nele, você poderá ver o resultado. Aqui você pode ver a parte oposta desse botão. Ele aperta o botão e retorna um novo sabor. Clique aqui. É um botão de animação do efeito Her, mas é bem avançado. Então, sem perder seu tempo, vamos começar a prática e ver como funciona Como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão de servidor lp. Além disso, você pode ver que eu já criei um documento HTML chamado index dot TML Com isso, eu crio um arquivo CSS, estilo dot CSS, e como você pode ver, eu vinculo esse arquivo de estilo a este documento HTML Então, primeiro, vou criar uma tag NCat dentro da tag body, tipo S A. Por padrão, eu não quero redirecioná-la, então eu quero usar a tag has Agora, dentro dessa tag âncora, vou criar três novas tags span, span class, front Em seguida, vou duplicar essa tag de extensão no tempo. Nosso primeiro nome de classe de extensão é front e nosso segundo nome de classe de extensão é centro, tipo de soma, centro. Nosso último nome de classe de span é suntype B. Então, na frente, vou digitar click e na parte traseira, vou digitar hair Para nossa etiqueta de extensão central, quero deixá-la em branco. Se eu definir esse arquivo, como você pode ver, como você pode ver no meu navegador, aqui ele imprime, clique aqui, canto superior esquerdo deste navegador. Eu fiz com sucesso nossa parte estável. Vamos passar para o arquivo CSS e estilizar esta página. No começo, vou estilizar nossa etiqueta corporal, algum tipo de corpo. Dentro da classe, vou definir zero marinho, zero Barzin e também quero definir preenchimento zero, preenchimento zero Em seguida, vou usar a propriedade da família de fontes SoTypeFont R: Vou definir uma cor de fundo escura para o nosso corpo. Antecedentes. E eu vou usar hexa VH, 26, 26, 26 Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver no meu navegador, agora nossa cor de fundo é cinza escuro e agora precisamos estilizar essa tag âncora Dentro da etiqueta âncora, totalizamos essa etiqueta de panela Então, vamos estilizar a etiqueta âncora. Então, ardósia, A, dentro do recesso de Cali. Em primeiro lugar, vou usar a posição da propriedade position. Posição absoluta. Agora eu quero alinhar essa tag âncora no meio desta página. Para isso, vou usar a melhor propriedade, os 50% melhores. Então eu vou usar a propriedade P. P 50%. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele alinha nossa tag âncora no meio desta página da web Em seguida, vou usar a propriedade transform. Então digite, transforme aqui, transforme. Transforme, traduza. Como você sabe, usando o método translate, podemos mover um elemento de sua posição atual de acordo com XXs e YX Para XXs, vou passar -50% para YxS e também vou Então eu vou dizer maconha aumentada para esta etiqueta de encer. No começo, vou amarrar maconha. Com 200 pixels. E então eu vou dizer que é propriedade de altura, altura, altura, 60 pixels. Se eu definir esse arquivo, você poderá ver o resultado. E então eu vou dizer alinhamento de texto no centro. Centro de alinhamento de texto. Como você sabe, vamos criar um botão uber de três D. Para isso, precisamos usar outra propriedade, que é estilo de transformação, tipo Sumo, estilo de transformação. Transforme o estilo aqui, vou usar preservar três valores D. Essas propriedades especificam como os elementos aninhados são renderizados em três espaços D. Como você sabe, precisamos usar essa propriedade com a propriedade transform. Sem a propriedade de transformação, não podemos usar essa propriedade. Aprendemos sobre isso em nossa série de tutoriais. Em seguida, vou usar outra propriedade que é Prospectiva Prospectiva de 1.000 pixels Como vou dizer transformar ou em posição, transformar ou centralizar o centro Z. Se eu definir esse arquivo, como você pode ver, agora ele alinha perfeitamente nosso conteúdo no meio desta página da web Não podemos entender essa transformação prospectiva e tridimensional porque não estilizamos nosso objeto de extensão Agora precisamos estilizar nosso objeto de reposição. Como você pode ver, temos um total de três objetos de extensão. Vamos estilizar todo o objeto de uma só vez. Para isso, vou selecionar a tag span. Extensão. É que o Kalis é, a princípio, eu vou digitar propriedade de posição Posição absoluta. Em seguida, precisamos alinhar essa tag de extensão, forma que o zero no topo seja zero E também vou dizer altura e peso, altura, 100%. Peso, 100%. E então eu vou usar o bloco Display. Além disso, vou alinhar o texto dentro da tag span Então, vou digitar texto alinhar texto e alinhar o centro. E então eu vou definir a altura da linha, altura da linha, 60 pixels. Se eu definir esse arquivo, aqui você pode vê-lo sobreposto ao nosso texto. Em seguida, vou definir o tamanho da fonte, tamanho da fonte, 24 pixels. Além disso, vou definir uma cor de fundo para a tag span. Antecedentes. Vou usar o valor RGVA RGB Como você sabe, primeiro, precisamos passar o valor vermelho, depois precisamos passar o valor verde pelo último valor azul. Com isso, precisamos passar por Alpha Val. Podemos controlar a transparência usando Alpha Val. É por isso que precisamos usar esse olmo. Então, aqui, eu vou passar 255 para vermelho, 255. E então eu vou passar mais uma vez, 255 para verde e também 255 para azul E para o nosso Alpha Valu, vou passar de 0,10 E agora precisamos mudar o estilo de transformação. Então, vou amarrar transform style transform style, preserve três D. Agora eu não quero mostrar a parte de trás da nossa tag span Quando ele gira, não queremos mostrar a parte traseira. Para isso, precisamos usar o Apoparty e você sabe disso, que é a visibilidade do backspace Volte para a visibilidade do Backspace, e vou definir um valor oculto porque não quero mostrar a parte traseira Em seguida, vou definir o raio da borda da tag span, o raio da borda, raio da borda, 30 pixels ou a próxima propriedade takes transform Em seguida, quero transformar o texto em maiúsculas. Para isso, vou usar a propriedade Tex transform, takes transform, em maiúsculas Em seguida, vou definir uma cor para o nosso texto. Cor branca. Se eu definir esse arquivo, você poderá ver o resultado. Com isso, quero dizer que é propriedade de transição. Transição. 1 segundo. Como você sabe, temos um total de três objetos de extensão dentro da tag cat. Vou transformar toda a tag span de forma diferente. Primeiro, vou transformar o da frente e depois vou transformar o traseiro. Por fim, vou transformar a central e vamos executar a transformação usando Her selected. Vamos voltar ao arquivo CSS e começar com nossa primeira tag span. Vou digitar span dot front. Então, dentro do alias, vou usar a propriedade transform, Transform, transform, rotate, X, e quero girá-la Com isso, quero movê-lo na direção de Zdx. Então, vou digitar translate ZT pixel. Se eu definir esse arquivo, você não poderá ver o resultado porque quero fazer essa transformação ao passar o cursor sobre esse botão Agora eu quero girar esse botão quando eu escuto nele. Para isso, precisamos criar um seletor Her. Então, vou duplicar essa linha e vou amarrar, cortar a etiqueta, passar os dois pontos Então, quando eu passo o cursor, quero girar nossa etiqueta frontal menos 18d Se eu definir esse arquivo e passar o cursor sobre ele, você poderá ver o resultado Você pode ver nossa primeira etiqueta de extensão girar menos 180 graus. A mesma coisa que precisamos fazer com nossa etiqueta de backspan. Então, vou selecionar esse código e obteremos essa linha. Então, aqui vou digitar span dot B. Por padrão, quero girá-lo em 180 graus e vou usar o mesmo valor de pixel de trânsito Em nosso seletor Hober, quero girá-lo em zero DD, voltar e quero girá-lo Se eu definir esse arquivo e os Hobermcas estiverem nele, agora você poderá ver o efeito giratório Agora, quero definir uma cor de fundo para nossa tag de extensão central. Essa. Para isso, vou digitar span dot center. Dentro das aliras, vou usar a propriedade de fundo. fundo, e eu vou usar gradiente de cor, e vou usar gradiente linear E eu vou usar a direção labial. Então, eu quero passar para isso. Oma e agora vou usar hexa Color Val tem tag, C 30 1a5b É uma cor rosa e nossa próxima cor é a etiqueta 7129 BD. É uma cor roxa. Se eu colocar este arquivo, você pode ver o resultado. Agora, para nosso objeto de extensão central, quero ativar a visibilidade do backspace Vou digitar Backpace visibility e vou usar o Visual Value Em seguida, vou criar o seletor Over para nossa tag de extensão central Vou remover a palavra-chave front e vou digitar center. Para rotações, vou usar menos 180. Mas para traduzir st, vou usar zero pixel. Se eu definir esse arquivo e Huber Mikaza neste botão, você poderá ver o efeito de três D. Então, criamos com sucesso três botões D flip Huber. Espero que você goste desse projeto. Obrigado por assistir este DVD. Fique ligado no nosso próximo exercício. 21. Animação desbotada na imagem: Olá, pessoal. Mais uma vez, estou de volta com um novo efeito de foco de imagem relacionado ao projeto Hoje vamos descascar esse lindo efeito Her desbotado na imagem Então, quando eu passo o mouse, meus carros estão sobre ele, como você pode ver, ele aumenta a imagem também gira a Além disso, você pode notar um efeito de desbotamento na imagem. Ele adiciona um fundo semitransparente e você também pode observar o texto acima dele Ele amplia a imagem e também gira a imagem. Vamos ver como ele pode criar esse lindo efeito de foco de imagem Basicamente, é um efeito de desvanecimento. Vamos entrar no editor de código do estúdio. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão de servidor Light e já criei um documento HTML chamado index dot TM Como você pode ver no meu diretório de trabalho atual, temos uma imagem, Image dot JPG, e vamos usar essa imagem em nosso projeto. Então, vamos chegar ao ponto de índice TML cinco. Primeiro, vou vincular algum tipo de tinta e quero vincular esse arquivo ao arquivo CSS de estilo, ao CSS de pontos de estilo, e vou enviar. Então, dentro dessa etiqueta corporal, vou pegar algum tipo de coninerp, Então, dentro desse elemento DV do continente, vou importar uma imagem Então digite ING, tag de imagem, e aqui, eu vou colocar a imagem, e o nome da nossa imagem é image dot JPG, e eu vou definir esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Depois disso, dentro desse conteúdo profundo, vou criar um elemento Caption Dev. Então, para marcar a legenda com pontos profundos. E dentro dessa legenda D, aqui, eu vou pegar uma tag H one, cabeçalho um, e mo digitar hello world Depois disso, vou pegar um parágrafo fictício, uma tag P e o carregamento do Imtype e o carregamento do tipo Hemo, e vou pegar um total de cinco palavras, caso contrário, seis palavras, e vou definir esse arquivo Depois de configurar esse arquivo, é assim que ele fica no meu navegador. Agora precisamos estilizar esta seção. Estilize o elemento contínuo, a legenda, a imagem, parágrafo e o título Para isso, vamos entrar no estilo ou no CSS five. No início, vou começar a estilizar a etiqueta corporal, corpo ODI Então, dentro da primeira propriedade de Carlos, vou usar altura, altura, vou atribuir altura 100 VH e altura Em seguida, vou atribuir a exibição. Display, vou usar display flex. Depois disso, vou atribuir a propriedade justify content. Justifique o centro de conteúdo. Também alinhe o centro de itens. Em seguida, vou atribuir família de fontes, família e aqui vou atribuir a área da família de fontes. Você pode pegar qualquer fonte na área superior de U e , em seguida, vou estilizar o elemento do continente a partir daqui, vou copiar seu contêiner de classe nove e vou colocá-lo aqui. Eu seleciono o ContinaT usando o nome da classe, depois dentro dos calis e depois dentro dos calibres aqui, primeiro, vou atribuir com, e vou atribuir 500 Além disso, vou atribuir a altura. Altura de 500 pixels é uma caixa quadrada. Então eu vou definir a posição, posição, vou torná-la relacionada. Vou configurar esse arquivo. Agora você ainda pode notar que a imagem é muito grande para esse contêiner. Podemos consertá-lo facilmente, podemos corrigi-lo facilmente usando o estilo. Deixe-me mostrar uma tag de destino ING. Então, dentro dos versos de Carli, vou definir com e aqui vou definir com 100% Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Agora temos a legenda abaixo dela. Agora precisamos colocar o título e o parágrafo acima dessa imagem. Para isso, precisamos estilizar a tag da legenda. Então, para copiar a legenda do nome da classe e voltar a estilizar seu arquivo CSS aqui, vou selecionar essa legenda Então, dentro das cálices, primeiro, vou definir a posição e vou torná-la absoluta Então eu vou definir o valor máximo, eu vou fazer isso. Vou para a posição zero. Também à esquerda, vou colocá-lo em zero novamente. Agora precisamos definir a altura e o peso do elemento da legenda. Então, gravata com eu vou fazer com que seja 100%, também com altura, 100%. Vou configurar esse arquivo. Depois de definir esse arquivo, agora você pode ver que colocamos com sucesso o conteúdo do texto acima da imagem. Agora precisamos centralizar o conteúdo dentro dessa legenda e alinhá-la, vamos usar display do tipo flake display e eu vou fazer com que seja flak e eu vou fazer com que seja flakes. A direção dos flocos também é usar coluna a coluna Em seguida, vou usar justificar conteúdo, justificar o centro de conteúdo porque precisamos centralizar horizontalmente e verticalmente esses elementos e alinhar os itens também no centro horizontalmente e verticalmente esses elementos e alinhar os itens também no centro. Vou submeter esse arquivo. Depois de definir esse arquivo, é assim que colocamos o conteúdo no meio da imagem na vertical e na horizontal Em seguida, vou mudar a cor do texto dessa legenda. Vou fazer com que seja de algum tipo de cor e vou fazer com que seja branco. Agora está totalmente visível porque nossa imagem de fundo está escura. E agora precisamos estilizar esse título com uma tag e o parágrafo. Para isso, precisamos selecioná-lo. Digite a legenda com pontos e, dentro dessa legenda, quero segmentar a tag H one Então, dentro da classe, vou usar a propriedade de transformação de texto, transformação de texto e vou colocá-la em maiúsculas Além disso, vou adicionar Marcin, Marcin de todas as direções, quero remover a margem, então vou passar Em seguida, vou duplicar esta seção e, desta vez, vou selecionar a tag de parágrafo que está dentro dessa legenda E também vou usar a propriedade de transformação de texto, mas desta vez vou usar valor capitalizado, capitalizar, remover a margem e definir o tamanho da fonte Tamanho da fonte, vou usar o tamanho da fonte de 18 pixels. Vou configurar esse arquivo. de configurar esse arquivo, ficou assim. Em seguida, precisamos nos concentrar no efeito de desvanecimento do foco. Por padrão, precisamos invisibilizar o texto e, quando eu passo o cursor sobre essa imagem, precisamos ver esse texto Em primeiro lugar, precisamos tornar a legenda invisível. Para isso, vamos usar a propriedade de opacidade. Dentro dessa legenda, vou usar a opacidade e quero torná-la zero Vou configurar esse arquivo. Depois de submeter esse arquivo, como você pode ver, é o texto desta imagem Não está mais visível, e eu quero que eles fiquem visíveis novamente quando eu passar o mouse sobre essa imagem Para isso, vou usar o Hoberselector, tipo, ponto, legenda, espaço de hober de dois pontos, contêiner Desta vez, vou definir o elemento do contêiner aqui. Eu uso o psudoselector Ober Em seguida, legenda. Se eu passar o mouse sobre essa legenda, que está dentro desse contêiner, então, dentro da clírass, quero definir a opacidade definir a Mas o problema é que quando eu olho para baixo nesta imagem, instantaneamente você pode Não há transição nisso. Para isso, podemos usar a propriedade de transição. Podemos usar essa propriedade de transição dentro da legenda. Aqui vou digitar transição, transição, quero aplicar em todas as propriedades e aqui vou definir o tempo de transição, que é de 0,5 segundo. Agora, para verificar se os carros I Hobermi estão nesta imagem, aqui você pode experimentar essa transição Além disso, vou adicionar um plano de fundo a essa legenda. Para isso, vou usar a propriedade background dentro do plano de fundo do seletor de legendas e vou usar o valor RGV RG RGBA Para vermelho, vou usar zero para verde, também vou usar zero para azul, vou usar zero e para o valor Alpha aqui vou usar por enquanto, vou usar zero. Agora está totalmente transparente. No topo deste arquivo, você pode notar que não há fundo preto na legenda porque nós a tornamos transparente, mas é preta. Agora vou copiar essa propriedade e o valor e pular para o seletor Her, colar aqui e aumentar a opacidade. Vou fazer com que seja 0,3, caso contrário, quatro. Acho que três é bom porque já temos uma imagem de fundo escura. Então, vou configurar esse arquivo e se eu estiver sobre meus carros nele, agora você pode notar o pequeno fundo escuro sobre a imagem. Mas se eu aumentar um pouco, se eu fizer cinco, acho que agora parece muito melhor. Agora, o fundo desaparece com a legenda. Em seguida, precisamos fazer com que a imagem aumente o zoom e gire quando eu passar o mouse sobre ela. Para isso, vou criar o Hoberselector para a imagem para duplicar esta seção e substituir a legenda pela tag de imagem IMG e dentro deste legenda pela tag de imagem IMG e tag de imagem IMG Aqui, primeiro, vou usar a propriedade transform, transform e vou aplicar o valor de rotação, girar Quero girá-lo em até 15 graus DEG ao passar o mouse sobre ele e vou configurar esse arquivo Então, quando eu passo o mouse sobre ele, como você pode ver, ele gira o elemento em 15 graus Além disso, precisamos aumentar um pouco de peso, às vezes escalar uma escala de valor, e eu quero torná-la 1,3. Vou configurar esse arquivo. Eu defino esse arquivo, se eu colocar minhas curvas nele, você pode ver o resultado Agora, o problema é que instantaneamente ele escalou o elemento para o elemento da imagem, então precisamos resolver o problema Para isso, precisamos usar a propriedade de transição em nossa imagem. Aqui, em nosso seletor de imagens, vou usar a propriedade de transição, transição, e quero fazer toda a transição e duração da transição é de 0,5 segundo E eu quero subtrair esse arquivo. Depois de subtrair esse arquivo, depois de configurá-lo, se eu passar o mouse sobre ele, você poderá experimentar essa transição Mas o problema é que ele sai dessa caixa de imagem. Quero ver a área da legenda, então precisamos usar a propriedade geral Dentro do meu contêiner, não quero movê-lo para fora da área do contêiner. Quero dizer a área do contêiner de 500 por 500 pixels. Aqui eu vou usar a propriedade overflow, overflow headen. Então, se eu abrir meus carros nesse elemento, alcançaremos o resultado desejado. É assim que criamos esse lindo efeito de foco de imagem usando a propriedade de transição Não usamos nenhum quadro-chave CSS para isso. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado em nosso próximo projeto 22. Efeito hover de imagem: Olá, pessoal. Neste projeto, vamos criar um interessante efeito deslizante Her Quando eu passo o mouse sobre essa imagem, a legenda é varrida da esquerda para a direita e, quando eu passo o cursor para fora, ela volta ao seu Isso é o que vamos construir hoje neste projeto. Basicamente, aqui, vamos estender nosso projeto anterior. Vamos usar todos os códigos dos projetos anteriores. Vamos começar o estágio. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Live Server e já abro meu documento TML anterior E aqui você pode ver no meu arquivo CSS stylo vamos trabalhar apenas na seção de legenda do contêiner Hoover e na seção de imagem do contêiner Hoover Mantemos esse projeto em nossa lista anterior e eu o estendo em nosso próximo projeto Agora, dê uma olhada no navegador. Temos tudo em seu lugar. Precisamos visualizar o texto por enquanto. Vou remover essa propriedade, Opacidade, e vou definir esse arquivo novamente Agora nosso texto está visível. Agora, vamos começar a trabalhar no efeito deslizante. Agora vou entrar na legenda, no seletor de legenda Hobart, e aqui estou Vou usar a propriedade de cor de fundo e vou usar o valor RGV RGBA Para vermelho, vou passar para vermelho, vou passar zero para verde ou vou passar zero para azul, vou passar zero, então é uma cor preta para o valor Alfa, então use 0,5, é semitransparente Agora, para definir esse arquivo, se eu passar o cursor sobre esse elemento, você poderá experimentar esse fundo transparente Agora precisamos traduzir esse fundo transparente do lado do colo. Você precisa posicioná-lo ao lado deste contêiner. Vou pular para a seção de legendas e aqui vou usar a propriedade transform, transform e vou usar translate X value, translate X, translate X -100% Ele moverá o elemento da legenda 100% no local da volta. Se eu definir esse arquivo, aqui você pode ver o resultado, ele é movido para o lado esquerdo. Mas se eu passar meu carro sobre ele , quero voltar para sua própria casa novamente. Para isso, novamente, precisamos usar a propriedade transform, transform, transform, translate, translate X aqui vou passar o valor zero, ele volta para seu próprio lugar quando eu passar o mouse sobre ele Se eu passar meu cartão sobre esse elemento, você poderá ver o resultado Quase acabamos de alcançar o resultado desejado, uma coisa liderou. Precisamos ampliar essa imagem e girá-la quando eu passar o mouse sobre ela Para isso, dentro deste seletor de imagens. Aqui vou usar a propriedade transform novamente, transform e, antes de tudo, vou usar a escala. E eu quero escalá-lo 1,3 vez. Além disso, vou girar o elemento, girá-la para passar de -15 Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar minhas cartas sobre essa imagem, aqui alcançaremos o resultado desejado Espero que agora esteja claro para você como podemos criar esse efeito de imagem. Obrigado por assistir a este vídeo do Stune para nosso próximo projeto 23. Projeto de transição de imagem para baixo parte 1: Olá, pessoal. Bem-vindo a outra transição de imagem relacionada ao projeto usando o efeito Hover Nesta lição, aprenderemos esse interessante efeito de foco da imagem Quando eu passo o mouse sobre esta imagem, como você pode ver, um fundo semitransparente aparece na parte inferior E cobriu toda a imagem. Depois disso, uma legenda apareceu do topo. E se eu tirar meu Kazar dessa área da imagem, novamente, a imagem de fundo e a área da legenda desaparecerão imagem de fundo e a área da legenda Agora, se você olhar de perto, se eu passar o cursor sobre esta imagem, a legenda aparece depois que o fundo aparece, demora um pouco para aparecer Ele usa um pouco de atraso entre eles. Da mesma forma, se eu passar o mouse para fora do meu Kazar, você pode notar que a legenda desaparece primeiro, depois desaparece do fundo Isso é o que vamos criar hoje. Então, vamos começar a prática. Então, como você pode ver, lado a lado, abro meu editor de código do Studio e meu navegador usando IPSaveRetension, e eu já crio um documento STML, e eu já crio um documento STML Com isso, eu crio um estilo ou arquivo CSS e vinculo esse arquivo a este documento. Então, vamos começar com o DML. Então, dentro da tag body aqui, vou pegar uma tag profunda, Dev, e aqui, vou definir uma classe para esse elemento DV, que é a figura de I G P. Acima disso, dentro desse elemento profundo, vou pegar uma tag de imagem, imagem IMG E como fonte, vou usar essa imagem Ocean Dot JPG, então amarre Ocean Dot JPG. Depois disso, vou pegar outro elemento de desenvolvimento. Então, para digitar Dev dot, vou definir uma classe para essa legenda do tipo DevElement Legenda com pontos profundos. Dentro desse Dev Element, aqui eu vou pegar uma tag H três, H três, cabeçalho três, e vou digitar. Palavra de olá. Aqui você pode digitar qualquer coisa, depende de você. E então eu vou pegar outra tag de cabeçalho, que é H cinco. E aqui eu vou empatar. Você pode digitar qualquer coisa aqui, então eu vou digitar Lin, e vou usar um total de cinco palavras. E então eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, essa imagem cobriu a página inteira e, definitivamente, está muito feia Agora, vamos entrar no arquivo CSS e torná-lo um pouco mais bonito. Então, aqui, primeiro, vou direcionar a tag body, BODY body dentro da classe, a primeira propriedade que vou usar margin. Margem, a primeira propriedade, vou usar margem, e aqui, vou usar definir margem zero todas as direções e exibir essa peça, vou flexioná-la, alinhar o centro do item e justificar o conteúdo, justificar o conteúdo e também centralizá-lo vou usar margem, e aqui, vou usar definir margem zero de todas as direções e exibir essa peça, vou flexioná-la, alinhar o centro do item e justificar o conteúdo, justificar o conteúdo e também centralizá-lo. Depois disso, vou definir altura, altura. Vou definir a altura 100, altura da janela de visualização, finalmente VH, vou definir a cor de fundo Cor do plano de fundo. Para a cor de fundo, você pode usar qualquer cor, e eu vou usar as cores cinza escuro. Eu passo 222. Vou configurar esse arquivo. Em seguida, vou estilizar esse elemento fi dip, FIG. Eu copio o nome da classe e volto ao arquivo CSS de pontos de estilo, e vou direcioná-lo usando ponto. Coloque F dentro das calibras, a primeira propriedade com a qual vou usar, e eu vou fazê-la Vou atribuir com 500 pixels. Depois disso, vou definir a cor, a cor e vou tornar a cor branca. Além disso, vou definir família de fontes, fonte, família e aqui vou usar fonte aérea Em seguida, vou definir o raio da borda, o raio da borda. Aqui, vou finalmente usar o raio da borda de dez pixels, vou definir a posição, posição e quero torná-la relativa Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece agora. Agora precisamos estilizar a imagem que está dentro desta figura, dê um elemento Aqui estou digitando dot FIG space image ING Image tag. Então, dentro do Cariss aqui, vou definir com com, e vou torná-lo 100%, 100% e vou definir esse arquivo Depois de definir esse arquivo, é assim que nossa imagem se parece. E se você quiser reduzi-lo, você também pode usar 400. Acho que 400 é bom para isso. Sim E agora está parecendo muito melhor. Temos a imagem e a legenda está abaixo dela. Agora vamos trabalhar no fundo semitransparente, que se ilumina pela parte inferior e cobre toda a imagem Para isso, vamos usar o pseudo elemento anterior. Eu devo usar antes dos pseudoelementos ou digitar ponto FIG, falso e dois pontos Então, dentro do carro, o fígado diz: primeiro, vou criar um conteúdo em branco, conteúdo, e aqui vou criar um conteúdo em branco. Depois disso, vou definir a posição desse conteúdo, posição, e vou torná-lo absoluto. Em seguida, precisamos definir de onde vamos começar o conteúdo. Então, do topo, eu vou passar do zero e da esquerda, eu vou passar do zero. Vou começar o elemento pelo canto superior do lábio. Depois disso, vou definir dentro da altura com, e vou definir com o mesmo este contêiner. O recipiente de ajuste. Alguém usa 100%. Também altura, 100%. O mesmo que a área do contêiner de abeto. Depois disso, vou definir a cor do plano de fundo. Cor de fundo, cabelo, vou usar a cor esverdeada. O hemotpe tem a etiqueta 006266, esta capa colorida. vou definir a opacidade porque nosso plano de fundo é transparente, semitransparente, tipo, opacidade do tipo sumô e vou Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Em seguida, precisamos trabalhar na legenda. Precisamos centralizar horizontal e verticalmente dentro desse Vamos direcionar o elemento. Tipo Sm, ponto, FIG, fig. space, ponto, quero direcionar o elemento de legenda, digite legenda Então, dentro da propriedade CarisSF, vou usar a posição Posição, vou torná-la absoluta. Então eu quero começar do topo. Vou passar por Z e também vou atribuir W W e quero atribuir com 100%, 100%. Então eu vou atribuir a altura. Altura, eu quero atribuir altura, 100%. Depois disso, quero atribuir a exibição da probabilidade de exibição e quero torná-la flexível e flexível, direção flexível, quero torná-la coluna porque aqui eu quero colocar o elemento H três abaixo do elemento da É por isso que eu uso a coluna aqui. Se não usarmos coluna, você colocará os dois elementos lado a lado em uma única linha. É por isso que usamos a coluna aqui. E para centralizá-los, vou digitar align items center Também justifique o centro de conteúdo. Vou configurar esse arquivo. Depois de definir esse arquivo, é aqui que colocamos o elemento. Agora, a seção da legenda está centralizada horizontal Mas o problema é que os elementos H cinco e H três não parecem muito bons. Você precisa estilizar esses elementos. Primeiro, vou segmentar H três elementos, digitar ponto FIG P. Dentro desta fig. di eu quero alvejar H três e dentro da Carias a primeira propriedade, vou usar margem Vou definir a margem zero. Então, basicamente, aqui, vou remover o mooch padrão e, em seguida, vou definir o espaçamento entre letras, espaçamento entre letras e vou definir o pH de um pixel Depois disso, vou definir a propriedade de transformação de texto. Texto, transforme. Transformação de texto, eu vou fazer isso por maiúscula. Além disso, vou definir a fonte para ele. Acho que não preciso definir a fonte para isso e também vou usar a propriedade margin bottom. Margem inferior. Na margem inferior, vou usar cinco pixels, cinco pixels, pixels e vou subtrair esse arquivo Eu configurei este arquivo agora. O elemento T se parece com isso. Agora precisamos trabalhar no elemento H cinco. 24. Projeto de transição de imagem para baixo parte 2: Para isso, vou duplicar esta seção e vou substituir H três por H cinco Então, quase, vou usar as mesmas propriedades. Mas para o elemento H cinco, aqui, vou usar a cor de fundo, a cor Bground, e quero usar esse código de cores, Has tag, A e895d Esse código colorido. Além disso, vou definir o preenchimento para esse elemento Então, digite preenchimento. De cima para baixo, vou usar três pixels e da esquerda e direita, vou usar dez pixels. E eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso elemento se parece. Em seguida, precisamos trabalhar no efeito Her. Precisamos mover esse plano de fundo da parte inferior. Para isso, precisamos pular para o pseudoelemento antes desse elemento e, a partir daqui, precisamos mover esse elemento, esse pseudo-elemento antes, abaixo desse Se eu mover meu causador sobre ele , ele subirá de baixo para cima. Então, vou usar a propriedade transform para essa transformação, e vou usar o valor trust Y, trust Y, e vou usar 100 pessoas, 100 pessoas. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, ele moveu o elimi para baixo Agora está logo abaixo do elemento figo, e precisamos torná-lo invisível fora do elemento figo. Para isso, dentro desse elemento fig, vou usar outra propriedade, que é overflow Overflow hidden, vou configurar esse arquivo. Depois de configurar esse arquivo, agora você pode vê-lo ocultar o elemento. Agora, esse elemento não está mais visível. Agora, ao passar o mouse sobre o p, quero que o elemento gram deslize para cima novamente e quero que ele volte à sua posição original Para isso, precisamos definir o seletor Hober. Depois do pseudoelemento anterior, Amro digite dot FIG p, passe o mouse sobre dois Colon, eu quero atingir o elemento antes. Então, dentro da culivra diz: eu quero transformar o elemento, algum tipo transforma traduz X, transforma traduz X, e eu vou passar o valor zero Então, defina este arquivo, se I Her my cars are on this element, você pode ver o elemento de fundo quando eu passar o mouse meus carros sobre ele, mas você não pode experimentar a transformação porque aqui, precisamos usar a propriedade Precisamos usar a propriedade de transição aqui. Então, neste elemento anterior, vou digitar transição de transição, e nossa duração de transição é 0,25 segundos a cinco. Eu quero configurar esse arquivo. Depois de definir esse arquivo, se eu passar o cursor sobre esse elemento, agora você poderá notar a transformação Como você pode ver quando eu passo o cursor sobre esse elemento, na parte inferior, ele apareceu no fundo e cobriu a área Agora precisamos trabalhar na legenda. Mas antes de adicionar atraso de transição a esse pseudoelemento, transição do tipo sudo, atraso de transição e vou passar 0,25 Eu vou dizer um pouco. Sempre que eu coloco meus carros sobre esse elemento, após 0,25 segundo, ele aparece no fundo Além disso, se eu mudar minha casa desta área, ela vai esperar por 0,25 segundos. Depois de 0,25 segundos, ele descerá esse elemento. Mas eu não quero isso. Não quero um atraso de 0,25 segundos ao passar o cursor sobre esse elemento Eu quero levantar esse elemento instantaneamente quando eu passar o mouse sobre ele Mas quando eu passo o cursor para fora, eu quero esse atraso, 0,25 segundo Para isso, vou digitar atraso de transição. Atraso na transição, vou fazer com que seja de 00 segundos. Se eu definir esse arquivo e passar o cursor sobre esse elemento, como você pode ver, ele não vai esperar 0,25 segundos Instantaneamente, ele sobe no elemento. Mas se eu remover meu cursor dessa área, ele vai esperar 0,25 segundo O fundo se move imediatamente quando eu passo o mouse sobre ele, mas se eu acionar meu cursor, ele aguardará 0,25 segundos Além disso, precisamos remover a legenda dessa imagem. Quando eu passo o cursor sobre o fundo, precisamos que apareça a legenda AA. Para isso, precisamos pular para o transetor de limite e a propriedade que vou usar transform, transform e aqui vou usar translate Y value, translate Y. E aqui, vou mover esse elemento de para a propriedade que vou usar transform, transform e aqui vou usar translate Y value, translate Y. E aqui, vou mover esse elemento de -20 pixels. Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, subimos esse elemento um pouco. Em seguida, vou definir a opacidade, opacidade e vou torná-la zero Agora, não é mais visual. Além disso, vou definir a transição nele. Transição Todo o nosso tempo de transição é de 0,25 segundo. Eu quero configurar esse arquivo. Agora, vamos criar o seletor de foco desse botão de legenda Vou digitar dot FIG Polon Hover. E então eu quero direcionar o elemento de legenda, legenda. Então, dentro do Cariss, se eu passar o mouse sobre minha casa no elemento fig , quero mover esse elemento de legenda Primeiro, vou tornar a opacidade visível novamente. Opacidade, vou torná-la uma. Então eu vou usar a propriedade transform, transform, transform e aqui, vou usar translate white value. Traduza Y. Traduza Y, e eu vou passar zero cabelo Então, ele voltará ao ritmo original novamente. É esse arquivo, se eu ouvir minha casa nesta imagem, como você pode ver, instantaneamente apareceu o elemento, o elemento da legenda, mas eu quero pouco acordo Então, aqui estou na transição D. Atraso de transição, vou usar 0,3 segundo. Vou configurar esse arquivo. Depois de configurar este arquivo, se eu passar meus carros sobre ele, agora você pode ver o elemento de fundo, ele aguardará 0,3 segundo e, em seguida, aparecerá a legenda do elemento Dev Finalmente, alcançamos o resultado desejado. É assim que criamos esse lindo efeito flutuante na imagem Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 25. Efeito hover de imagem dividida: Olá, pessoal. Bem-vindo ao novo projeto deste curso. Nesta lição, vamos criar um efeito de foco de imagem dividida Como você pode ver, temos um centro de imagem na tela e, quando eu passo o mouse sobre o meu Kazar, divido em duas partes e também cada uma das partes gira em Também temos um título e o parágrafo abaixo da imagem, é um efeito muito legal e bonito. Ao final deste vídeo, você saberá como construí-lo. Vamos começar a prática e ver como podemos vencê-la. Como você pode ver lado a lado, abro meu editor de código do Wisult Studio e meu navegador usando extensão de servidor ativo e já crio um documento ML para nomear HTML de ponto de índice Eu já crio um estilo ou arquivo CSS e vinculo esse arquivo a este documento. Então, vamos começar com TM. Dentro da tag body, vou pegar uma tag profunda, a IV DB, e vou atribuir uma classe e o nome da nossa classe é box. É como um continente profundo. Então, dentro desse elemento de caixa, vou pegar outro elemento de desenvolvimento. Dev, dot e Hemo atribuem uma classe sobre dentro desse elemento profundo, eu vou pegar uma tag H two, duas, e vou digitar spit image over Em seguida, vou pegar um parágrafo usando o PTAG, aqui vou digitar um texto do Danny Lim, e aqui, vou usar quase 20 palavras. Acho que 20 palavras são boas para isso. Sim. Vou configurar esse arquivo. Depois de configurar este arquivo, aqui você pode ver o resultado no meu navegador. É assim que parece. E agora precisamos realocar o centro desta caixa. Para isso, vou entrar no estilo ou CSS five. Aqui, primeiro, vou usar a seleção universal para estrela e dentro da prensa de Cali, vou definir a margem Margem de todas as direções, vou usar zero. Basicamente, eu removo a margem. Além disso, você precisa remover o preenchimento, o preenchimento e também zero. Depois disso, vou definir o tamanho da caixa, a caixa de borda. Em seguida, vou selecionar a tag body, body. Dentro das maldições, primeiro, vou definir a família da fonte, a família da fonte e vou usar a fonte aérea Depois disso, vou definir o plano de fundo. Antecedentes. Aqui, vou usar fundo cinza escuro do tipo Hashtag 222 Depois disso, vou exibir esse flix justificar o centro de conteúdo e também alinhar o centro do IAM É basicamente alinhar horizontal e verticalmente o centro de mensagens instantâneas desta página, e eu vou definir Depois de configurar esse arquivo, estamos configurando esse arquivo, como você pode ver, ele não está funcionando. Não está centralizado no elemento central desta página porque não fornecemos a altura subtipo altura e o leme atribuem a altura 100 H 100 VH. Vou subdigitar Alterou esse arquivo, como você pode ver agora, ele alinhou o conteúdo no meio desta página, vertical e E agora vou estilizar o elemento box Dev. Para isso aqui, vou selecionar a caixa Dev usando seu nome de classe dot box. Em seguida, dentro da alavanca do carro diz, primeiro, eu vou definir a posição Posição, vou torná-la relativa e também vou definir dentro da altura. Como vou definir dentro da altura vou torná-la de 600 pixels. Então eu vou definir altura, altura, vou fazer com que seja de 400 pixels. Em seguida, vou definir o plano de fundo, o plano de fundo. Vou definir o plano de fundo, Hatack 000, totalmente preto Em seguida, vou alinhar o conteúdo vertical e horizontalmente no meio Para isso, vou usar essa topologia. Os flocos de exibição justificam o conteúdo, justificam conter o centro, alinham o item, A centralizam e eu vou definir esse arquivo Agora você pode notar que essa caixa tem largura de 600 pixels e altura de 400 pixels e está alinhada no meio da página e o conteúdo dentro dela está perfeitamente alinhado no Em seguida, vou estilizar a seção que contém o conteúdo do texto. Para isso, vou digitar dot about. Então, dentro do Carrass , a primeira propriedade, vou usar preenchimento, preenchimento e vou usar preenchimento 40 pixels de toda a direção Então eu vou definir a cor. Cor e eu quero usar a cor branca para visibilidade. Por que, porque nossa cor de fundo é preta. Depois disso, vou usar a propriedade de alinhamento de texto, alinhamento de texto e vou usar o centro Acima desse arquivo, é assim que ele se parece. Então eu vou mirar no H para marcar. Vou digitar thought about inside about, quero direcionar H para lemate. Então, dentro do recesso de cores, primeiro, vou definir a margem Quero remover a margem, a margem desnecessária. Eu quero remover a margem padrão desse texto, então vou passar Zi também, vou definir o preenchimento e vou torná-lo preenchimento zero Com isso, vou definir o tamanho da fonte e o tamanho da fonte. Aqui, vou definir o tamanho da fonte de 30 pixels e a transformação do texto, texto, transformação, transformação do texto em ks superior e vou definir esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Agora é limpo e profissional. Agora, vamos voltar à página de estimativa e adicionar o elemento Div da figura Figura De vou segurar a imagem dividir a imagem e girar a imagem quando eu passar o mouse sobre ela Vou digitar Dev dot figure. E esse é o DV onde a mágica acontece. Vou definir esse arquivo e voltar para o primeiro, vou copiar o nome da classe e voltar para o arquivo CSS de estilo, e vou direcionar o DVTAtgure figurado e , dentro do carro ss, a primeira propriedade, vou usar a posição e vou Depois disso, vou definir a altura, largura e vou usar 100% da largura dessa caixa de contêiner. Então eu vou definir a altura. Além disso, ele usará 100% da altura da caixa do contêiner e eu vou definir esse arquivo. Depois de definir esse arquivo, você não verá nada porque não temos nenhum conteúdo dentro dessa caixa. Agora vou criar um pseudo-elemento. Vou criar um pseudoelemento anterior, que criará um hub lept dessa imagem Para isso, digite a figura de pontos do tipo hemo Colon antes. Em seguida, na carícia. Basicamente, usamos esse elemento anterior para dividir parte de uma imagem. Então, dentro desse elemento anterior, vou criar um conteúdo em branco porque é necessário renderizar o conteúdo em preto. Depois disso, vou definir a posição, posição, vou torná-la absoluta. Então eu vou definir como vamos colocar o elemento do topo, eu passo zero do lt, eu passo zero novamente. Com isso, vou definir com ela que usaria com 50% porque é a parte esquerda dessa imagem. É por isso que eu uso 50% e altura, altura, 100%, 100%. Em seguida, vou definir uma imagem de fundo, algum tipo de plano de fundo. Aqui vou passar o URL, URL e vou usar essa imagem. Como você pode ver no meu diretório de trabalho atual, temos uma imagem chamada ocean dot JPG, algum tipo Ocean dot JPG, e eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Mas antes vou reduzir a resolução dessa imagem porque precisamos fazê-la de acordo com sua resolução normal, 600 por 400. Então, devo pausar este vídeo e primeiro encaminhar o processo. Eu tomo a resolução exata para as profundezas do continente. É por isso que está ótimo. E então eu vou usar a próxima transição de propriedade. Então digite, faça a transição, e aqui eu vou usar a transição, 0,5 segundo. Isso animará o efeito quando passarmos o mouse sobre o botão Agora você pode ver que a disposição da imagem está dentro da caixa e está pronta para o efeito de divisão, mas ainda não terminamos. Ainda precisamos adicionar a propriedade de origem da transformação. Além disso, o efeito hover. Agora, vamos criar o efeito de foco ao passar o mouse sobre a caixa, quero girar a imagem e mover Então, digite a caixa de pontos, dois pontos, passe o mouse e eu quero selecionar o pseudoelemento padrão Então, digite ponto, figurou dois pontos antes. São os resfriadores, e aqui vou usar a propriedade de transformação, transformar, e vou usar o valor de rotação X, girar X, girar X, vou passar m para passar Eu quero girar o elemento em s é 90 graus DG. Com isso, vou mover esse elemento na direção do VC. Alguém usa traduzir Y. Traduza Y, traduza Y, 50%, 50%. Vou configurar esse arquivo. Agora, depois de definir este arquivo, se eu passar o cursor sobre esta imagem, agora você pode vê-la girar a imagem em 90 graus e mover a imagem 50% para baixo na direção de Vic Vai criar o efeito de acelerar e dobrar a imagem para longe do usuário Agora, o problema é, por padrão, esse centro de rotação da imagem nessa posição. Agora, precisamos usar a propriedade de origem de transformação para controlar o Aisin Queremos girar esse elemento a partir do tamanho da bota. Para isso, vou usar a propriedade transform ou sin, transform Aisin Aqui eu vou dizer transformar a propriedade de origem, parte inferior e vou definir esse arquivo. Agora, se eu passar o cursor sobre o cursor, você pode ver esse resultado. Agora ele gira a imagem, na parte inferior de sua posição Agora, ele cria um efeito de cuspir muito natural e atraente Vamos trabalhar na parte direita dessa imagem. Para isso, vamos usar o pseudo-elemento after para lidar com a parte direita e o spit é semelhante ao elemento before psudo Eu copio esta seção, basicamente duplico esta seção e, em vez de usar antes, vou usar depois Agora, quando posicionar isso após o elemento corretamente. Em vez de usar a esquerda, vou usar a posição direita, direita, zero. Em seguida, vou definir a posição de fundo. Posição de fundo, vou usar 300 pixels, 300 pixels e vou definir esse arquivo. Depois de definir esse arquivo, agora você pode ver a imagem completa porque nossa resolução de imagem é 600. Aqui, alinhamos a gravação dessa imagem usando a posição de fundo de 300 pixels Além disso, você precisa alterar a posição de origem da transformação. Em vez de usar a parte inferior, vou usar a parte superior. E agora precisamos girar esse elemento para cima. Vou remover o elemento antes e vou usar depois, então vou usar -50% no trânsito Y. Em vez de para baixo, ele vai girar o elemento para cima vai girar o elemento para Vou configurar esse arquivo. Depois de definir este arquivo, se eu passar o cursor sobre ele, você poderá ver esse lindo efeito de divisão Combine o elemento antes e depois, aqui criamos o belo efeito de divisão do foco na imagem Espero que agora esteja claro para você como podemos criar esse lindo projeto. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 26. Efeitos de imagem em camadas em CSS 3D: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outra animação CSS relacionada ao projeto. Hoje, neste projeto, aprenderemos como podemos criar essa bela Hoberimage de três camadas D. Como você pode ver quando eu coloco meus carros na imagem, você pode notar várias camadas com opacidade diferente É isso que vamos criar neste projeto. É muito útil para design de interface do usuário. Esse conceito de design é muito popular em designs de interface do usuário. Você pode ver esse tipo de animação em vários sites. Vamos ver como podemos criar essa bela camada de três Hober Então, finalmente, estou no meu médico do Visual Studio, como você pode ver, eu já criei um documento XML chamado index Eu já vinculo o arquivo CSS ao nosso documento TML, estilo CSS de pontos E como você pode ver, no meu diretório de trabalho atual, há uma imagem, ponto de captura de tela JPG Deixe-me mostrar a imagem. Neste exemplo, eu já fiz uma captura de tela do CSFLeeplorer Você pode escolher seu próprio layout. Depende de você. Então, vamos começar a prática e ver como podemos criar esse projeto. No início, vou criar um contêiner dentro da minha tag corporal. Então, aqui, eu vou amarrar o e nossa classe dip é class container Então, dentro dessa classe de contêiner, vou usar a tag de imagem para inserir a imagem. Aqui vou digitar a imagem ING. Como você pode ver, o nome da nossa imagem é ponto de captura de tela e JPG. Aqui eu digito, captura de tela JPG. Vou dublar essa etiqueta de imagem três vezes. Eu fiz com sucesso nossa parte de DML para este exemplo. Agora vou ligar meu servidor b e ver como fica. Sem estilo, fica assim. Agora precisamos entrar nesse arquivo de estilo para criar o design perfeito. Agora você pode ver lado a lado que abro meu arquivo de estilo e meu navegador. No começo, vou começar com body tag. Aqui eu vou digitar corpo. Então, por dentro, o Kalib diz: vou usar nossa primeira proboty Margem, zero. Nossa próxima propriedade é preenchimento, preenchimento zero. Agora vou usar outra propriedade que é largura, largura, 100% altura, 100 VH. E então eu vou usar essa propriedade de jogo, display flex E eu quero alinhar nosso centro de itens. Vou usar a propriedade align item, align items center. Nossa última propriedade é justificar o conteúdo. Justifique o centro de conteúdo. Ei, se você não está familiarizado com livros didáticos e leitura, pode conferir meu curso Se eu definir esse arquivo, como você pode ver, nada está acontecendo aqui. Agora precisamos estilizar a seção do contêiner. Aqui vou digitar container dot container. Então, dentro do Calibra diz que, a princípio, vou usar a posição propertInPosition relacionada E então eu quero dizer 360 pixels fracos e úmidos. E nossa próxima propriedade é altura, altura, 480 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Reduziu um pouco o tamanho do nosso contêiner. E então eu quero definir alguma margem na minha seção superior. Então, aqui eu vou usar a propriedade de margem superior, margem superior de 150 pixels. Em seguida, vou definir um plano de fundo para esse contêiner. Então, histórico do hemótipo e, como pano de fundo, vou usar o gene RGV Vo, R BA. Então, dentro dos parênteses, precisamos passar a probabilidade total Para a baixa vermelha, vou passar de zero. Para Vu verde também vou passar zero, e para o nosso valor azul, mais uma vez , vou passar zero Mas para nosso valor Alpha, vou passar quatro e um. Quero uma cor de fundo transparente para este contêiner. Nossa próxima propriedade é a probabilidade de transformação. Então, aqui vou digitar transform transform e vou usar um total de seis Ville. Primeiro, vou usar rotate Val rotate. -30 graus. Com isso, eu quero usar inclinação e a escala serve Inclinação de 25 graus. E habilidade 0,8 vezes. Se eu definir esse arquivo, você poderá ver o resultado. E agora precisamos posicionar a da imagem dentro da tag do contêiner. Para isso, vou selecionar contêiner com tag de imagem, imagem do espaço do contêiner. Então, dentro do Kalevss, nossa primeira propriedade é posição, posição absoluta Imagem com 100%. Se eu definir esse arquivo e mostrar meu navegador, agora você poderá vê-lo perfeitamente na posição desejada e, em seguida, vir a parte mais importante Agora precisamos jogar com opacidade e transformação com o efeito Hover . Deixe-me te mostrar como. Como você pode ver no meu documento de estimativa, temos que somar quatro imagens. Agora precisamos selecionar todas as imagens uma por uma. Para isso, vou usar o seletor de filhos. Deixe-me mostrar um recipiente de pontos, dois pontos pairando. Então espaço, imagem, cólon, enésima criança, há uma criança Dentro da resina redonda, quatro. Primeiro, seleciono o quarto filho do grupo de imagens. Então, dentro dos aliases, vou usar a propriedade transform, Transform, traduzir 160 pixels na direção de X e menos 160 pixels em sua Com isso, vou usar a pureza da opacidade. Opacidade 1, eu quero mostrar a opacidade total. É por isso que eu escolho um. Em seguida, vou selecionar nossa página 30. Vou selecionar essa linha e começar. Nenhuma criança três. E também vou alterar o valor da transformação e a opacidade do valor oposto, 0,8 e traduzir para X seis é, vou passar 120 pixels E para YXs também vou passar menos 120 pixels. E agora, mais uma vez, vou para o segundo em Eu quero datar esta linha, e aqui vou digitar dois na criança dois. E para x66, eu vou passar ET e para YxS eu vou passar menos e T. E aqui eu vou dizer E mais uma vez, vou duplicar essa linha para selecionar nossa primeira imagem filha Em nossa transformação, vou selecionar 40 pixels e -40 pixels quatro, y é. E opacidade, vou digitar 0,4. Se eu definir esse arquivo e voltar ao meu navegador Chrome e colocar o cursor sobre essa imagem, você poderá ver o efeito Mas não há transição nessa imagem. E agora precisamos definir uma transição para dar um efeito de suavidade. Então, mais uma vez, estou de volta ao meu codator e aqui vou chamar nossa transição Transição de 0,5 segundo. Além disso, precisamos chamar a mesma propriedade em nossa seção de contêineres. Transição de 0,5 segundo. Se eu definir esse arquivo e voltar ao meu navegador Chrome, se eu colocar meu cursor sobre essa imagem, você pode ver isso mover essa transição Espero que agora esteja claro para você como podemos criar três efeitos de foco de imagem em camadas. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 27. Menu de bordas em crescimento: Olá, pessoal. Neste projeto, vamos criar esse lindo efeito de foco do menu Quando eu passo o mouse sobre qualquer link deste menu, como você pode ver, escala de duas linhas, linha superior, escala da linha final e inferior, escala do lado direito E a ideia por trás de criar esse efeito é simples. Precisamos trabalhar no pseudo-elemento antes e depois. Precisamos criar o elemento antes da tag ancha e up e a tag ancha Então, precisamos escalá-lo. Em nosso primeiro elemento, precisamos escalar do lado do colo e, em nosso segundo elemento, precisamos escalá-lo do lado direito. Para fazer as linhas desaparecerem, precisamos definir o valor da escala zero. Quando abro meu C nos elementos, precisamos fazer com que o valor da escala seja um, para que ele reapareça Vamos começar a prática e começar a criar a estrutura usando as tags UL e LI. Como você pode ver, lado a lado, abro meu editor de código de estúdio e meu navegador usando extensão de servidor ativo e já crio um documento ML chamado index dot DAL. Com isso, eu já crio um arquivo de estilo chamado Stylo CSS file e vinculo esse arquivo a este documento Dentro dessa tag de corpo, aqui precisamos pegar a tag UL. Em seguida, vamos começar com a tag UL. Eu quero dizer os itens da lista, lista Unwdal. Agora, dentro da tag body, primeiro, vou pegar a tag UL, UL significa UnwordAllist Então, dentro dessa tag UL, vou usar uma tag LI para nossos itens de menus, como home sobre serviços, portfólio, contato, etc Então, eu sou do tipo AI. Então, dentro da etiqueta LI, eu também vou pegar um Categ. Aqui, nosso primeiro item de menu é quem, então você digita H. Então eu duplico essa linha, então nosso segundo item de menu é sobre, e nosso terceiro item de menu é serviços E nosso quarto item do menu é portfólio e nosso último item do menu é contato. Eu substituo o portfólio pelo contato. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nossos itens de menu se parecem. Em seguida, precisamos adicionar a cor de fundo a essa tag corporal. Além disso, precisamos centralizar vertical e horizontalmente os elementos do Para isso, precisamos entrar nessa seção de estilo. Então, dentro do arquivo CSS, primeiro, vou selecionar a tag body, body. Então, dentro do carvi , a primeira propriedade, vou usar a altura Vou definir uma altura, altura de 100 VH. Depois disso, vou fazer a exibição, vou flexibilizá-la e, em seguida, justificar o conteúdo Alinhe o centro do IAM. Basicamente, ele alinhará vertical e horizontalmente o meio principal desta página . Vou configurar esse arquivo. Depois desse arquivo, você pode ver o resultado, ele alinha os itens vertical e horizontalmente , no meio Em seguida, vou usar uma família de fontes, família de fontes, e aqui vou usar o Sansari Sansarf, vou Depois disso, também precisamos fornecer uma cor de fundo e eu quero usar a cor de fundo cinza escuro. Cor de fundo, hastag 222, eu quero satisfazer. Depois disso, precisamos criar a lista de pedidos desordenados. Nós estilizamos a lista de pedidos. Para isso, vou digitar UL. Então, dentro do Carrass aqui, primeiro, vou definir o preenchimento, adicionando zero e também a margem zero Basicamente, o preenchimento padrão da IU e a margem dele. Em seguida, vou usar o dispaperperty. Mostre aqui, vou flexioná-lo e flexioná-lo Rf, linho, f, vou torná-lo raro e vou configurar Depois de configurar esse arquivo, como você pode ver, usando a propriedade display flex, colocamos os elementos lado a lado E então usamos envoltório flexível. Então, quando eles não têm espaço para se expandir, ele se decompõe e é enviado para a próxima linha. Em seguida, precisamos remover os marcadores. Para isso, vou usar a tag LI, que está dentro da tag UL, ULI e depois dentro das cores, a propriedade que vou usar como estilo é estilo, e vou torná-la nun Depois disso, depois disso, vou estilizar a etiqueta âncora Multi UL Eu e eu queremos atingir todas as anchtx. Então, dentro das capas, a primeira propriedade, vou usar decoração de texto e vou fazer com que não seja nenhuma Então eu removo o sublinhado do texto ancha. Em seguida, vou definir uma cor para o texto. Então, digite a cor. Vou torná-lo branco. Em seguida, vou definir o tamanho da fonte, tamanho da fonte, e aqui vou torná-la de 22 pixels. Depois disso, vou usar essa propriedade. Exiba e eu vou fazer com que ele bloqueie. Preenchimento, vou fazer com que seja de dez pixels de cima e de baixo, dez pixels de cima e de baixo e 20 pixels da esquerda e da direita Na próxima propriedade, vou usar posição, posição e quero torná-la relativa. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nossas nctags e antenas de lista Agora, nosso menu parece exatamente o que queremos. Em seguida, precisamos trabalhar no efeito de foco. Precisamos criar uma linha. Precisamos criar uma linha acima das tags ancha. Para isso, vamos usar o pseudo elemento anterior. Aqui, vou digitar UL e anchor tag, e aqui vou usar o pseudo elemento before , lean, colon, before Então, dentro dos carnavais, primeiro, vou criar um conteúdo em branco porque precisamos renderizá-lo É por isso que precisamos criar o conteúdo em branco, conteúdo, é uma string vazia e vazia. Depois disso, precisamos definir a posição desse conteúdo, posição, e aqui vou torná-lo absoluto. Quero começar o conteúdo do topo, quero colocá-lo do zero superior e também do final também do zero. Em seguida, vou definir maconha para esse elemento, algum tipo de erva daninha, e vou torná-la 100%. Depois disso, precisamos definir altura, altura, vou fazer com que pixels pareça uma única linha. Depois disso, também precisamos fornecer a cor de fundo desse elemento para essa linha, algum tipo de cor de fundo, vou torná-la branca. Eu vou configurar este. Depois de definir este, você pode ver o resultado. Aqui, criaremos esse elemento anterior para cada etiqueta âncora Em seguida, quero dizer valor de escala zero. Então, aqui, vou digitar propriedade de transformação, escala de transformação e aqui vou torná-la zero. Depois disso, depois disso, quero atribuir transição para suavidade, algum tipo, transição, transição Quero atribuir à transição todo esse elemento e definir a duração de 0,5 segundo. Além disso, para nosso elemento anterior, precisamos definir a origem da transição. Transições, origem da transição, quero expandir esse elemento do lado do colo Eu quero expandir o pseudo-elemento anterior do lado do colo, então vou definir que a transição surja tarde Então eu vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, o elemento desaparece porque aqui defina o valor da escala zero É por isso que ele elimina o elemento, e eu quero repará-lo quando coloco meu primo sobre Para isso, precisamos usar o Her antes do seletor Her Vou vincular a UL AI e quero atingir o elemento âncora Então cólon Hobart, cólon, antes do elemento, antes. Então, no interior, o calibre diz, aqui, eu vou definir a transformação, a escala da transformação, a propriedade da escala, e eu vou fazer isso novamente. Como você pode ver quando eu passo minha casa sobre esse elemento, ele expandiu a linha em 0,5 segundo a partir da origem da volta Agora precisamos fazer a mesma coisa com a parte inferior. Então eu dupliquei essa linha, vou duplicar essa linha e aqui, vou substituir o antes pelo depois e também precisamos mudar a posição de origem da transformação Aqui, precisamos mudar a origem da transformação da esquerda para a direita. E se você quiser torná-lo visível, basta usar a escala um. Agora você pode ver a linha. Você pode ver a linha na posição superior, mas precisamos enviar a linha para a parte inferior desses elementos. Para isso, precisamos usar o valor inferior. Em vez de usar top, vou usar bottom, bottom zero e vou definir esse arquivo. Depois de definir esse arquivo, como você pode ver, ele envia os elementos abaixo dos itens da lista. Novamente, vou criar uma escala zero para torná-la invisível e, com o elemento antes, quero selecionar o elemento depois. Eu copio esta seção. Depois de copiar esta seção, vou colocar uma vírgula e depois colar e substituir antes por depois Vou configurar esse arquivo. Agora, para definir esse arquivo quando abro meus carros nos itens do menu, você pode ver o belo efeito de transição. Nosso elemento anterior começa do lado esquerdo e cresce para o lado direito, e nosso elemento posterior começa do lado direito e cresce para o lado esquerdo e completa a forma. Agora está claro para você como podemos criar esse lindo efeito de animação de menu. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 28. Efeito de hover do menu com atraso de transição: Olá, pessoal. Bem-vindo à nova lição deste curso. E neste tutorial, vamos criar esse belo efeito de foco no menu Quando eu passo o mouse sobre meu carro ou qualquer um desses links, esse link se move para o topo e a segunda etiqueta de extensão assume a posição Depois disso, um fundo vermelho cobriu toda a área do vão. E se eu removê-lo, ele voltará à sua posição. Isso é o que vamos construir hoje neste projeto. Vamos começar a prática e ver como podemos construí-la. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão de servidor ativo e já crio um documento HTML para nomear o ponto de índice TML Com isso, eu já crio arquivo css do styler e vinculo esse arquivo a este documento Em seguida, dentro da tag body para criar o menu, vou pegar a tag UL e a lista de pedidos. Depois disso, dentro dela, vou pegar uma etiqueta LI. Então, dentro da etiqueta LI, aqui, eu vou pegar uma etiqueta Anca, A. Em seguida, dentro da etiqueta Anca, eu vou pegar a etiqueta span, span, e aqui vou dar uma dica para casa. E lá vou pegar outra tag span que contém o mesmo texto para casa. O primeiro par é aquele que se moverá para o topo e o segundo se moverá de baixo e ocupará o primeiro lugar. Em seguida, copiarei a tag LI várias vezes e substituirei o texto. Eu vou acelerar esse processo. Então, eu acelero esse processo e adiciono o portfólio de serviços e o contato. Depois de criar os itens do menu, vamos entrar no arquivo CSS e começar a estilizar Então, vou entrar no arquivo CSS de estilo. Em primeiro lugar, vou selecionar a tag corporal. Bd Lá dentro dos carros, a primeira propriedade, vou usar a cor de fundo. Cor de fundo, e aqui vou usar fundo cinza escuro, Hastag Em seguida, vou definir a altura desse corpo. Height e Heund usam altura de 100 H e, na tela, vou torná-la flexível Depois disso, justifique o conteúdo, justifique o conteúdo. Vou colocar todos os elementos no meio desta página, às vezes centralizar, e também alinhar o item e alinhar os itens no centro Vou alinhar vertical e horizontalmente o centro de conteúdo desta página Então, para satisfazer isso, era o que parecia. Depois disso, vou mudar a fonte. Digite a família de fontes, eu vou usar a fonte aérea. Você pode usar qualquer fonte , depende de você. Vou configurar esse arquivo. E a seguir, vou mirar na média. Vou digitar UL dentro do css, a primeira propriedade, vou usar display. Display Heun usa flex vue , então eu quero listar um item acima do outro Para isso, para isso, ela usa outra propriedade chamada direção flexível e direção flexível, vou torná-la coluna e vou configurar esse arquivo Além disso, vou fazer do Justify Content Center. Centro. Alinhe os itens e alinhe os itens também Vou submeter esse arquivo. Em seguida, vou direcionar os itens da lista que estão dentro da tag UL. Vou digitar ULI dentro do Clses primeiro, vou definir a posição Posição e aqui, vou usar a posição relativa. Depois de definir a posição, na próxima probidade, vou usar style, least style, e vou fazer com que seja zero porque quero remover os pontos Depois disso, vou adicionar uma pequena margem. Margem, com o leme de adicionar margem de todas as direções, cinco escolhas, então vou selecionar uma etiqueta, A. Então, dentro do carlver, a primeira probidade, vou usar a posição novamente, a exibição real da posição, e vou fazer Além disso, vou atribuir altura de 40 pixels. Em seguida, vou usar decoração de texto, decoração de texto, decoração de sabor, vou fazer com que não seja nenhuma porque quero remover o sublinhado e vou configurar o arquivo Depois de serem sufocados, é assim que eles ficarão. Além disso, quero mudar a cor da fonte. Então, diga cor, e eu quero torná-los brancos e isso vai torná-los totalmente visíveis. Além disso, vou definir os tamanhos das fontes. Depois de adicionar a cor, também vou adicionar preenchimento. Estofamento. De cima para baixo, vou adicionar cinco pixels da esquerda para a direita, vou adicionar dez pixels. Em seguida, vou adicionar fonte a oito, espessura da fonte, e aqui vou fazer com que a fonte seja 8300 Eu quero uma fonte um pouco mais clara. Espaçamento entre letras, espaçamento entre letras. Aqui, adicione dois pixels. E transbordar, e eu vou fazer com que transborde escondido. Depois desse arquivo, é assim que ele se parece. Depois disso, se você quiser aumentar o tamanho da fonte, sim, você pode, mas, por enquanto, não vou aumentar o tamanho da fonte e, em seguida, vou focar na tag span, que está dentro da tag âncora Para isso, heraldie UL AI, anchor tag e, em seguida, alvejo Então, no interior, o calibre diz, eu vou definir a posição Posição, vou torná-la relativa. Em seguida, vou definir com e altura. W, vou atribuir 100 pessoas de largura e altura. Aqui eu vou definir 100. Ei, vou definir a altura e a aparência de 100 pessoas. Nesta peça, vou flexioná-la, agora a pergunta é por que quero dizer esse linho Como precisamos alterar a ordem do segundo intervalo, precisamos movê-lo para baixo do primeiro intervalo. É por isso que eu uso linho. Agora, ele vai para o final da primeira tag de extensão. Eu não tenho espaço ao lado dela. É por isso que foi movido para o fundo. Em seguida, vou adicionar alinhar itens ao centro e justificar o conteúdo, justificar o conteúdo e também centralizar Então, ele vai centralizar horizontalmente e verticalmente Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele oculta o texto. Agora, o segundo intervalo se deslocou abaixo do primeiro. Além disso, você não tem espaço suficiente, como você pode ver, aqui use a propriedade oculta de transbordamento É por isso que não é visível. Se eu descomentar a propriedade oculta do overflow, deixe-me mostrar e definir esse arquivo novamente Agora está visível novamente. É por isso que precisamos usar a propriedade overflow dn e salvá-la. Em seguida, vou adicionar uma pequena transição nela Transição, e aqui, eu vou fazer a transição 0,5 segundo, 0,5 segundo. Depois disso, você pode adicionar cor, mas eu já adicionei a propriedade colorida em nossa cópia anterior Vou cortar essa cor dessa etiqueta de âncora e colocá-la aqui Em seguida, vou adicionar o tamanho da fonte. Tamanho da fonte, vou torná-la de 20 pixels. Além disso, transformação de texto, transformação de texto, vou torná-la maiúscula e transformação de texto, vou fazer com que seja Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Agora, esse elemento bronzeado parece muito melhor. Agora, se eu passar o mouse sobre essa etiqueta de âncora, quero mudar a posição Eu quero primeiro mover o espaço de sua posição. Eu quero movê-lo de cima para cima e para o segundo ângulo de baixo e tomar seu lugar Quando eu passo o mouse sobre essa etiqueta de âncora, algum tipo A, dois pontos Então, eu quero ter como alvo o filho da tag span. Então, abrange o cólon, a nona criança, enésima criança, e eu quero atingir a primeira Um. Então, dentro da lista, vou usar a propriedade transform, transform, translate Y, translate Y, e aqui vou passar -100% Eu quero configurar esse arquivo. Eu defino esse arquivo, se eu for pular para o arquivo de estimativa de pontos de índice , a partir daqui, vamos ter como alvo a primeira tag de extensão, a primeira tag de extensão Então, depois de definir esse arquivo, se eu sentar esse arquivo e passar o mouse sobre meus carros na etiqueta de extensão, você pode ver que a primeira etiqueta de extensão foi movida para cima Basicamente, ele sobe até o topo e depois desaparece. Agora precisamos mover essa segunda tag de extensão, que tomará seu lugar. Para isso, vou duplicar esta seção e, desta vez, vou focar na enésima criança e não precisamos mudar muito. Só se eu definir esse arquivo e quem quer que seja meu carro nesse elemento, você poderá ver o resultado Agora, o segundo, ocupe o primeiro lugar. O primeiro se move para cima e o segundo vem de baixo Esse é o efeito exato que queremos. Agora, precisamos trabalhar no plano de fundo e criar o plano de fundo que vamos usar antes do pseudo-elemento Alguns para criar um pseudo-elemento de ncatax no tipo A, dois pontos anteriores Então, dentro do carro, Leia diz , aqui, eu vou digitar, vou pegar um conteúdo em branco. O conteúdo é um conteúdo em branco. Depois disso, vou posicionar sua posição, e aqui vou definir a posição obsoleta Então eu vou colocá-lo de cima, vou posicioná-lo zero e da esquerda, vou colocá-lo zero, zero. Depois disso, vou fornecer dentro da altura. Aqui vou usar 100% de largura de spantagt, 100% de altura e também 100% Então eu vou dizer cor de fundo. Cor de fundo, e aqui vou usar a cor de fundo vermelha. Vermelho. Vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim. Agora eu quero essa cor de fundo quando eu passar o mouse sobre este link Para isso, vou usar a propriedade transform. Então digite, transforme. Transforme escala X, a escala X, vou passar de zero e quero ir do lado esquerdo definido para o lado direito, então vou mudar a posição de origem. Transformsin, vou passar o elevador aqui, à esquerda, e vou definir a transição Transição, vou definir 0,5 segundo. Vou configurar esse arquivo. Depois de definir este arquivo, como você pode ver, ele tem a altura do fundo vermelho. Agora, quando passo o mouse sobre esse link, quero aumentar o plano de fundo do lado esquerdo e encolher para o lado direito Para isso, precisamos criar o seletor de foco. Âncora, passe o mouse, dois pontos, vou mirar no elemento antes, antes Dentro dos cálices, primeiro vou usar probabilidade de transformação, transformar, transformar, e vou dizer escala V, escala, desculpe, escala X. Desta vez, vou fazer com que seja escala X valor Ele preencherá completamente o fundo e começará do lado do lábio. Se eu passar o cursor sobre o cursor, você pode ver o resultado. Mas o problema é quando eu movo meu mouse dessa etiqueta de extensão, esse fundo de volta para o lado do lábio novamente, mas eu não quero isso. Eu quero terminar esse plano de fundo no lado direito. Para isso, precisamos usar transform ou zing novamente. Transform ou Z. Desta vez, vou mudar o lado, que é o lado direito, o lado direito , e vou definir esse arquivo Depois de definir esse arquivo, se eu passar meu c sobre ele, ele não está funcionando de acordo com o resultado desejado, não se preocupe Vou comentar esta linha e vou adicionar um pouco de transição Dlay Transição D. E eu vou atrasá-la em até 0,5 segundo. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu mouse meus carros sobre esse elemento, esse elemento de extensão, como você pode ver, após um atraso de 0,5 segundo, nosso plano de fundo aparecerá Se eu tirar meus carros dela, ela volta instantaneamente para a posição antiga. Eu não preciso dessa linha, então vou mover essa linha, e é isso que criamos em nosso projeto. Vou configurar esse arquivo. Espero que agora esteja claro para você como podemos criar esse lindo efeito MnuHover Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 29. Efeito de menu de bordas com fundo: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo menu relacionado ao projeto Hova effet Hoje, neste tutorial, vamos criar esse lindo menu. Quando eu passo meu rodízio sobre esses itens do menu, como você pode ver, temos uma cena de desvanecimento de fundo e temos uma borda total E está limitado a sair desse link. Uma borda, mova para o canto superior direito e outra borda se mova para a parte inferior esquerda. Então, vamos ver como podemos criar esse lindo MnuHaeFet. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão de servidor ativo e já crio um nome de documento HTML, índice, ponto de índice, HTML. Com isso, eu crio arquivo css de pontos de estilo e vinculo esse arquivo a este documento. Agora, a princípio, dentro da etiqueta corporal, aqui vou pegar ULAULEL, sigla para nowada Então, dentro dessa tag UL, vou pegar o item I da lista dentro da tag LI, vou pegar a tag Anca A. E aqui, vou digitar que nosso primeiro item do menu está em casa. Então eu duplico essa linha, e vou fazer essa sobre Então eu dupliquei essa linha novamente. Este é para serviços. Além disso, quero duplicar essa linha, e esta é para portfólio E o último é para contato. Vou configurar esse arquivo e agora colocar os itens do menu no meio desta página. Para isso, precisamos entrar no estilo de arquivo CSS CSS. Primeiro, vou direcionar a tag body, body. Dentro do surge, primeiro, vou atribuir margem. Margem, eu quero remover a margem padrão de cada um dos eleitos. Eu uso zero. Depois disso, vou fazer uma exibição. Display, vou flexioná-lo. Justifique o contido, justifique o centro contido também alinhe Então eu vou atribuir altura, altura, aqui vou atribuir altura 100 H. Depois disso, vou atribuir família de fontes. Família de fontes. Família de fontes, aqui vou atribuir a fonte aérea Vou configurar esse arquivo. configurar esse arquivo, como você pode ver, ele alinhou os itens no meio desta página vertical e Em seguida, vou focar na lista de Nowata. Para isso, vou selecionar UL. Em seguida, dentro dos aliases. Primeira propriedade, vou usar a margem e vou fazer com que a margem seja zero. Na próxima propriedade, vou usar preenchimento, preenchimento também zero Depois disso, vou fazer com que a tela seja flexível Em seguida, quero remover os pontos, esses ícones. Meu tipo é azulejo. Eu vou fazer com que não seja nenhum, e vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, ele removeu os pontos e reproduz os itens lado a lado por causa da propriedade displayflx Em seguida, precisamos fornecer espaço entre eles. Precisamos remover o sublinhado, também precisamos trabalhar nas fontes Mas antes, vou atribuir uma cor de fundo a essa tag corporal. fundo aqui, vou usar a hashtag de fundo 222, cinza escuro Vou configurar esse arquivo. Depois de definir esse arquivo, vou direcionar a tag âncora sot UL I e, em seguida, vou direcionar a tag ancha dentro dela Então, dentro do Css, depois dentro do Calviss primeiro, vou atribuir uma cor a essa fonte Então use a propriedade de cor, cor, e eu vou torná-la, e vou torná-la branca totalmente visível. Depois disso, vou definir o tamanho da fonte, o tamanho da fonte e vou torná-la de 20 pixels. Então eu quero remover o sublinhado. Para isso, precisamos usar a propriedade de decoração de texto. Precisa de decoração, nenhuma. Precisamos fazer com que seja zero para remover o sublinhado. Em seguida, precisamos converter essas tomadas em maiúsculas. Para isso, vou usar a propriedade text transform, takes transform, vou torná-la maiúscula Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que ele se parece. Agora precisamos fornecer um pouco de acolchoamento entre eles. Além disso, precisamos atribuir uma pequena margem. Sou datilografado. De cima para baixo, quero atribuir um preenchimento de cinco pixels e, da esquerda e da direita, vou atribuir um preenchimento de dez pixels Então eu vou adicionar uma pequena margem, margem. De cima para baixo, vou atribuir uma margem de zero pixels e, da esquerda e da direita, vou atribuir uma margem de dez pixels. Eu tenho que configurar esse arquivo. É assim que parece. Depois disso, vou atribuir uma posição. Posição, vou torná-la relativa. Então eu quero atribuir a transição. Quero atribuir transição a todo esse elemento, transição total e nossa duração de transição é de 0,5 segundo, agora nosso menu está muito bom. Em seguida, precisamos trabalhar no efeito de foco. Em seguida, precisamos trabalhar na borda do canto inferior do lábio nessa posição. Então, para criar a borda do canto inferior do lábio, vamos usar o pseudo elemento anterior Então, digite catch e eu quero selecionar antes. Vou usar antes do pseudoelemento. Então, primeiro, dentro da carruagem, queremos criar um conteúdo em branco O conteúdo é um conteúdo vazio. Depois disso, aqui, vou definir a posição desse conteúdo. Posição, vou torná-la absoluta. Em seguida, vou posicioná-lo na parte inferior, então vou digitar o zero inferior e o lept também zero Em seguida, vou definir dentro da altura, W eu quero definir a largura para agora 12 pixels e a altura também 12 pixels. Em seguida, vou definir uma cor de fundo. Plano de fundo, como plano de fundo, vou usar a cor Ylo. Eu uso essa cor de fundo para fins temporários. Depois de definir esse arquivo, aqui você pode ver o resultado. Nessa posição, criamos uma caixa, uma caixa quadrada. Agora, precisamos adicionar uma borda, borda no lado esquerdo e no lado inferior. Mas, a princípio, vou definir a fronteira para toda a direção. Então, vou digitar propriedade de borda, borda, e vou atribuir borda em C pixels, e nossa cor de borda e nosso estilo de borda são sólidos. E a cor da nossa borda é vou usar a cor branca se estiver totalmente visível. Vou configurar esse arquivo. Depois de definir esse arquivo, se você observar com cuidado, poderá ver a borda ao redor dessa caixa quadrada. Mas, como eu disse, quero a borda na parte inferior e na lateral do lábio. Para isso, precisamos usar fronteira com propriedade. Digite borda com borda com para cima, vou passar zero para a direita, também para passar zero de baixo, vou passar três pixels e para o layout também vou passar três pixels. Vou submeter esse arquivo. Abaixo deste arquivo, agora você pode observar a borda no lado esquerdo e na parte inferior Se eu mudar a cor do fundo, se eu deixá-lo vermelho, acho que agora está mais visível. Então, para criar a borda, agora eu não preciso desse plano de fundo, então vou comentar este slide e salvá-lo novamente. Agora precisamos fazer a mesma coisa no canto superior direito. Para isso, basta duplicar essa linha e aqui, em vez de usar antes, vou usar o possível elemento After after, e precisamos mudar a posição Em vez de baixo, aqui vou usar e, em vez de tarde, aqui vou usar a direita, logo da direita, vou passar do zero. E eu vou configurar esse arquivo. Desta vez, precisamos atribuir a borda no canto superior direito. Vou remover isso para valor. Agora, para o topo, eu uso três pixels para a direita, também uso três pixels para o fundo, vou usar zero e para a esquerda, também vou usar zero. Se eu definir esse arquivo, você poderá ver o resultado. Em seguida, precisamos trabalhar de novo. Mas antes, vou enviar essa fronteira um pouco para dentro e também vou invisibilizá-la. Para isso, vou mudar a posição deles. Então, para o elemento anterior aqui, em vez de usar a posição zero, vou usar el pixel da parte inferior e do pixel esquerdo Vou configurar esse arquivo. Agora ele é enviado para o pequeno interior e eu vou definir a opacidade e torná-la zero Agora ficou invisível. Depois de definir esse arquivo, como você pode ver, a borda fica invisível. Agora, ao passar o mouse sobre esse link, quero mover a borda para fora Eu quero mover a fronteira para fora novamente. Para isso, para isso, vou digitar A e, ao passar o mouse sobre esse link, quero direcionar o pseudo-elemento anterior Então eu disse os apelidos, primeiro, vou transformar a opacidade em um A. E, desta vez, quero mover a borda para fora Para isso, vou alterar o valor inferior, inferior e vou torná-lo menos cinco pixels e o valor da leath, também menos Eu quero esse movimento sem problemas. Para isso, precisamos usar a propriedade de transição, transição, e eu vou usar o tipo, e vou definir 0,0 0,33 segundo Eu quero configurar esse arquivo. Depois de definir esse arquivo, se eu passar o mouse sobre o elemento, você poderá observar o resultado Foi assim que ele moveu a fronteira. Tudo bem, precisamos fazer a mesma coisa para a borda superior direita. Eu vou mudar essa posição. Em vez de zero, vou fazer com que seja em pixels, 12 pixels, e vou definir a opacidade Além disso, vou usar a propriedade de transição. Transição total e a duração da transição é de 0,3 segundos. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, ele desaparece da borda Agora precisamos trabalhar no destino de Hvar. Eu seleciono esta seção. Basicamente, copie esta seção e eu vou colá-la aqui. Depois disso, em vez de usar antes, vou começar depois do elemento E eu vou configurar esse arquivo. Além disso, você precisa mudar a posição deles, precisamos fazer de baixo para cima e da esquerda para a direita. Vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, ele desaparece tanto o elemento quanto as bordas, e quando eu passo minha cor acima das tags ancha, aqui, ela reaparece Ele se move de dentro para fora. Agora só nos resta uma coisa. Precisamos mudar a cor de fundo quando eu passar o mouse sobre este link Para isso, precisamos criar o seletor de foco da tag ancha Então, aqui, depois disso, vou digitar A, passar o mouse sobre dois pontos No início, dentro das Carras, vou definir a cor do fundo, a cor do plano de fundo e vou torná-la branca Além disso, quero alterar a cor do texto porque, se não mudarmos a cor do texto , a cor da fonte corresponderá à cor do plano de fundo e nosso texto e nosso texto ficarão invisíveis. Eu vou dizer cor. Cor da fonte, eu quero torná-la 222, cinza escuro. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu passar meus carros sobre essa etiqueta de ancoragem, aqui você pode ver o lindo Então é assim que criamos esse lindo menu de efeito Hova. Espero que agora esteja claro para você como você pode vencê-lo. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 30. Menu animado em tela cheia: Olá, pessoal. Mais uma vez, estou de volta com uma nova animação de cursor do menu relacionada ao projeto usando as propriedades de transição e transformação do CS E neste projeto, vamos criar esse belo efeito de foco no menu Então, quando eu passo o cursor nesses itens, como você pode ver, a princípio, a cor desse link fica semitransparente e depois disso, pequenos textos se juntam e criam esse efeito brilhante Então é isso que vamos construir hoje. Então, vamos começar a prática e ver como podemos criá-la. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor Light e já crio um nome de documento ML com o nome do índice de pontos HTML. Com isso, eu crio o arquivo CSS Style D e vinculo esse arquivo a este documento. Agora, dentro da etiqueta corporal, primeiro, vou pegar uma etiqueta de seção. Seção. Agora, dentro desta tag de seção, vou pegar a lista nodal U. Em seguida, vou pegar um item da lista i. Em seguida, dentro da tag LI, aqui vou pegar uma tag âncora e vou atribuir dados de atributo dados texto texto de dados de texto igual ao tipo M home E dentro dele, eu vou digitar dentro do Anchte Eu vou digitar em casa também Depois disso, vou configurar esse arquivo. Depois de definir esse arquivo da mesma forma, vou criar outros itens de menu, então dupliquei essa linha várias vezes Isso é por cerca de. Além disso, vou alterar o texto dos dados sobre, e este é para serviços. Além disso, precisamos fazer alterações no texto dos dados, e a última é para o portfólio. Em seguida, vou duplicar esta sessão novamente e esta é para contato, e vou subtrair esse arquivo Depois disso, vamos entrar no arquivo CSS e começar a estilizar seu CSS Primeiro, vou importar um texto. Aqui, vou usar texto pop-up do Google Fonts. Eu quero configurar esse arquivo. Depois disso, vou usar a estrela seletora universal Então, dentro do alias, diz: primeiro, vou atribuir Margem, Margem e vou usar zero. Quero remover a margem de toda a direção e o preenchimento, também zero, depois o tamanho da caixa, caixa de borda do tamanho da caixa e a divertida família de fontes familiares Vou usar Poppins e ela vem da Precisamos movê-lo para dentro dos códigos duplos, e eu vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nosso texto se parece. Em seguida, vou estilizar o texto da seção. Vou digitar seção, Seção dentro das caixas. Primeiro, vou definir posição, posição e vou torná-la relativa. Depois disso, vou definir a altura do Éden com bainha Assn com 100 Altura. Aqui vou atribuir altura, 100 VH. Depois disso, vou atribuir display, display e vou flexibilizá-lo, justificar o centro de conteúdo e também alinhar o centro do Basicamente, ele alinhará os itens no meio desta página vertical e Depois disso, vou fazer transbordar, transbordar, vou fazer com que fique Em seguida, vou definir uma cor de fundo, plano de fundo. Antecedentes. Quero usar o fundo cinza, esse código de cores, e vou configurar esse arquivo. Depois de definir esse arquivo, é aqui que colocamos o elemento e nosso plano de fundo fica assim. Depois disso, vou remover os pontos desse item da lista Vou segmentar a tag LI, AI, e , dentro da lista, a propriedade que vou usar pelo menos o estilo, e vou fazer com que ela não seja nenhuma Eu vou satisfazer. Depois de sufocar, como você pode ver, remova os pontos dos itens da lista Em seguida, vou mirar na etiqueta âncora. Vou estilizar a etiqueta da âncora. Aqui, primeiro, vou definir a posição. Posição, vou torná-la relativa. Então eu vou fazer disso, doutor. Dessa forma, vou fazer com que ele bloqueie. Depois disso, decoração de texto, decoração de texto. Vou fazer com que não seja nenhum, então ele removerá o sublinhado Linha de texto, linha de texto e leme tornam-no centralizado Além disso, vou converter essas tomadas em maiúsculas, alguns tipos de texto transformam letras maiúsculas alguns tipos de texto transformam Depois disso, vou definir o tamanho da fonte, o tamanho da fonte, aqui, vou usar quatro EM, quatro EM. Então eu vou definir a cor. Cor e cabelo, vou usar a cor branca. Portanto, use a etiqueta has se A, totalmente visível, branca. Depois disso, quero usar uma fonte um pouco mais ousada, para digitar a espessura da fonte, fonte até 8700 Em seguida, transição, transição. Eu vou fazer isso em 0,5 segundo. E eu vou subtrair esse arquivo. Depois de definir esse arquivo, é assim que nossos itens de menu se parecem. Agora parece muito melhor. Agora, quando eu mostro esse link, quero torná-lo semitransparente Eu passo o mouse sobre este link, então vou criar o seletor Ha A, esfriar e passar o mouse dentro das calices, vou definir a cor e aqui vou usar a cor RGBA, RG BA Cor RGBA para vermelho, vou usar 255 para verde, também vou usar Basicamente, eu quero usar cores brancas, então eu uso 255 para todas as cores Para o valor Alpha aqui, eu quero usar transparente , então vou passar 0,1. Isso vai torná-lo transparente e eu vou configurar esse arquivo. Depois de configurar este arquivo, quando eu pulo meu carro neste texto, você pode ver o resultado. Basicamente, quando eu passo o mouse sobre ele, isso reduz a opacidade Agora, vamos trabalhar no texto pequeno. Quando eu passo meu cursor, eu quero que apareça o texto pequeno Eu quero colocá-lo acima do texto grande. Para isso, precisamos usar o pseudo elemento before. Vamos usar o elemento before psudo, subtype nga tag before Então, dentro da carira diz, aqui, precisamos passar o conteúdo conteúdo aqui, precisamos usar o atributo, e eu vou passar o texto dos dados do texto dos dados. Basicamente, aqui recuperamos o texto de dados do atributo de texto de dados que eu uso em nossa tag âncora, esta, e ela pode funcionar para cada link Agora precisamos posicioná-lo exatamente acima do texto. Para isso, vou usar a posição da propriedade position e vou torná-la absoluta. Depois disso, para o valor máximo, aqui, vou usar 50%. 50% a partir do final, também vou usar 50%. Então eu vou usar a propriedade transform, transform, transform, aqui, eu vou usar translate value, translate, translate dentro da resis redonda, aqui, eu vou passar -50% do Xxs e dos YxS Em seguida, vou atribuir uma cor, cor aqui, vou atribuir a cor esverdeada SmtiHTag três B F se for sete, esse código de cores se for sete, esse código de Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Agora, o texto verde está cobrindo os links e agora vou reduzir o tamanho da fonte. Então, digite o tamanho da fonte. Aqui eu vou usar 0,4 EM. Eu vou definir esses cinco. Em seguida, vou adicionar um pouco de espaçamento entre letras. Aqui mais tarde, com espaçamento entre letras, vou passar quase 40 pixels Acho que é o suficiente para isso. É o suficiente por enquanto. Deixe-me mostrar. Agora, todos os personagens se separam um do outro. Temos uma lacuna de 40 pixels entre eles e a próxima propriedade, vou usar sombra de texto. Pegue a sombra aqui, eu vou usar dessa forma. Essa é a posição dessa sombra de captura, e essa é a desfocagem dessa sombra de captura Esse é o valor de dispersão dessa sombra de captura e essa é a cor dessa sombra. Eu quero configurar esse arquivo. É assim que cresce o texto. Em seguida, vou reduzir o peso da fonte. Seu tipo, espessura da fonte, bainha da fonte para usar o valor 500, Fonte um pouco mais clara. Em seguida, vou usar a opacidade, opacidade aqui vou definir a opacidade Por padrão, ele ocultará esse texto e, em seguida, usarei a propriedade de transição. Transição, vou fazer 0,5 segundo e vou definir esses cinco. Basicamente, aqui eu aumento o valor do desfoque toda vez. Primeiro eu faço dez pixels, depois faço 30 e por último faço 80. Em seguida, quando eu passo o mouse sobre os itens da lista, então LI col e passo o mouse, quero direcionar o pseudo-elemento anterior , A, before Então, novamente, eu quero enviar uma mensagem de texto visual. Vou definir a opacidade, vou definir a opacidade um e também vou reduzir o espaçamento entre letras Depois do espaçamento, vou torná-lo de seis pixels e vou definir esse arquivo Depois de definir esse arquivo quando passo meus carros sobre esse texto, agora você pode ver o lindo efeito Agora você pode ver todas as letras se juntando. Reduz a distância entre as letras quando eu passo mouse sobre elas e cria um efeito bonito No início, o texto grande desaparece e, em seguida, o texto pequeno se junta Agora, o problema é que os carros de Jen Hoberm estão nesse link. Ao mesmo tempo, ele desaparece e o pequeno texto se junta Mas eu não quero isso. Eu quero um pouco de atraso entre eles. Para isso, precisamos pular para a tag anche, e aqui precisamos usar atraso de transição, atraso de transição, e eu quero um atraso de 0,5 segundo Eu quero definir essa multa. Além disso, quando eu passo o mouse sobre ele , quero um atraso na transição, um atraso na transição Desta vez eu quero Z. Além disso, precisamos adicionar um atraso de transição em nosso companheiro anterior Aqui, vou digitar atraso de transição atraso de transição, vou usar 0,5 segundo. Agora, para definir esse arquivo quando eu passo meus carros sobre esses elementos, esse é o resultado que vamos procurar Agora eu crio esse lindo efeito de transição de muitos horizontes. Espero que agora esteja claro para você como podemos criá-lo. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 31. Efeito hover do menu vertical: Olá, pessoal. Bem-vindo a outra nova lição deste curso. E nesta lição, vamos criar outro efeito de flutuação do menu Aqui você pode ver um belo menu vertical com texto transparente e traçado de um pixel. Além disso, temos um laboratório para delimitar todo esse link. E quando eu passo o mouse sobre este link, como você pode ver, a borda do laboratório se move para o lado direito e preenche o texto com cores O traçado do link é preenchido com a cor e cria um efeito muito bonito. Então, hoje, o sutial, vamos criar isso. Então, vamos entrar neste editor de código de estúdio e começar nossa codificação. Então, finalmente, estou no meu médico do Visual Studio e dentro da tag body, vou pegar a tag UL e a lista de pedidos Então, dentro dessa tag UL, vou pegar uma tag LI para o item da lista e, dentro dela, vou pegar uma tag âncora, A. Depois disso, vou usar um atributo chamado texto de dados Texto de dados. Texto de dados igual ao Hera Mu tipo home. É um texto de dados domésticos do tipo nus e também está dentro do formulário ncatag I'm Então eu vou duplicar esta seção e vou duplicá-la até quatro vezes Para cada link, vou mudar o texto. É sobre. Então é para contato. Depois vêm os serviços. Finalmente temos uma equipe. Eu vou colocar essa pilha. Estamos em casa sobre serviços de contato e equipe. Em seguida, vou entrar no arquivo CSS e começar a usar o tapume Primeiro, vou importar uma fonte. Vou usar fontes pop-up. Depois disso, vou usar Universal select ou start e, dentro das calices, vou definir margem e preenchimento, margem, zero, também preenchimento, também Em seguida, vou usar o tamanho da caixa, o tamanho da caixa, o tamanho da caixa, a caixa de água Depois disso, família de fontes, família de fontes. Aqui eu vou usar a fonte pop ins. Quando a porta abrir, vou digitar Poppins. E vem da família SansercFon. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, é assim que ele ficou. Agora vamos voltar ao editor de código novamente. Mas você pode notar aqui que eu cometi o erro ortográfico, pop ins, não pop ins, pop ins, e vou substituí-lo novamente Em seguida, vou ficar com o body tag. Corpo dentro dos versos frios. No início, vou usar a propriedade dist e, aqui, vou usar display flex e justificar o conteúdo, justificar o centro de conteúdo Também alinhe o centro de itens. Agora, centralizará horizontal e verticalmente a lente no meio Em seguida, precisamos atribuir a altura mínima. Altura em mm, altura mínima herm para usar 100 VH 100 de altura da janela de visualização Depois disso, vou definir uma cor de fundo, plano de fundo, e vou usar a cor de fundo, Hastag 222, arrastar o plano de fundo e vou definir Depois de configurar este arquivo, se eu mostrar meu navegador, é assim que ele fica ao vivo. Em seguida, precisamos fornecer uma lacuna entre esses links. Além disso, precisamos mudar a direção. Vamos voltar ao código novamente. Aqui, desta vez eu vou mirar a tag UL, UL, UL dentro do CariraSF, a hora em que você define a posição, posição, eu vou torná-la relativa Depois disso, vou definir display, display aqui vou usar linho Em seguida, vou usar a direção flexível, a direção flocos, quero usar a coluna Depois disso, quero um pequeno espaço entre eles, tipo, lacuna de quase 35 pixels. Acho que 35 pixels são bons para isso. Eu devo satisfazer. Satisfeito se eu voltar ao meu navegador, é assim que parece Em seguida, precisamos remover os pontos desses links. Para isso, para isso, precisamos selecionar os itens da lista do tipo LI dentro das calibragens. Vou usar primeiro a propriedade de posição, posição, vou torná-la relativa. Em seguida, vou usar o estilo de lista. Estilo de lista. Aqui eu vou usar o valor nun. Nenhuma. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode mostrar meu navegador, pois você pode ver que ele remove os pontos. Em seguida, vou direcionar o texto âncora. Digite A e, em seguida, dentro das calibragens. Além disso, para definir a posição e a posição, vou torná-la relativa novamente. Em seguida, vou definir o tamanho da fonte, o tamanho da fonte e vou fazer com que seja quatro EM. Depois disso, vou usar a decoração de texto. Precisamos remover a decoração de texto sublinhada do Sotype. Precisamos usar o tipo sublinhado, decoração de texto, aqui vou usar nenhum E espaçamento entre letras, espaçamento entre letras herm para usar o espaçamento entre letras de quase dois pixels, caso contrário, três pixels são poucos a pixels e a altura da linha, a altura da linha e a bainha atribuem a altura da linha a quase um altura da linha, a altura da linha e a bainha atribuem a altura da linha bainha atribuem Depois disso, precisamos converter o texto em maiúsculas. Aqui vou usar a propriedade de transformação de texto, texto, transformação de texto, vou colocá-la em maiúsculas Eles ficaram com uma cor acântica e, como você sabe, precisamos torná-la transparente Então, digite a cor. Cor e cabelo, vou torná-los transparentes. E eu vou configurar esse arquivo. Se eu definir esse arquivo e mostrar meu navegador, você não verá nada porque eu o deixo transparente. Então, vamos voltar ao comedor de citações e vamos tentar adicionar algumas Agora, precisamos adicionar alguns traços neste texto. Para isso, vou usar essa propriedade, webkit texts stroke, e quero adicionar aqui que quero adicionar um traçado de pixel, e vou tornar a cor do traçado um pouco transparente, alguém usa give value, RGBA Aqui, eu quero usar totalmente branco, alguém usa 255 para vermelho, 255 para verde e 255 para Para o valor Alpha, vou usar 0,5 semitransparente Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele ficou. Já estava bonito. Em seguida, precisaremos usar o pseudo-elemento anterior. Vamos decorar o código iter novamente. Aqui, vou digitar A, dois pontos Bf e, dentro do caixa, diz, aqui, vou usar a propriedade do conteúdo, o conteúdo, e desta vez não precisamos usar conteúdo dan porque já temos conteúdo Então use o atributo, e aqui vou passar o texto dos dados, texto TATA Vou submeter esse arquivo. Depois de configurar esse arquivo, aqui você pode ver o conteúdo antes do link inicial, é exatamente o mesmo conteúdo porque em nosso atributo de texto de dados, atribuímos o mesmo conteúdo. Em seguida, precisamos posicionar o elemento anterior. Mas antes de entender, o que vai acontecer aqui, vou abrir esse navegador e meu codeador lado a lado Em seguida, precisamos posicionar o texto anterior. Precisamos posicioná-lo acima do texto exato. Vou digitar a posição e vou torná-la absoluta, e vou definir o arquivo. Em seguida, vou atribuir cores de fontes coloridas. Vou digitar a propriedade da cor e, aqui, vou colar o código da cor. Esse, esse tipo de cor laranja avermelhada. Além disso, você pode observar o traçado, o traçado de um pixel atrás dele, porque em nossa etiqueta de ancoragem atribuímos ao traçado um pixel Em seguida, vou adicionar borda no lado direito, algum tipo, borda, borda direita. Eu quero oito pixels, caso contrário, dez pixels, depende de você, oito pixels, borda sólida, e a cor da minha borda é exatamente a mesma cor da fonte. Esse código de cores. Vou definir essa multa. Aqui você pode observar a borda. Em seguida, vou adicionar o mesmo traço de tomada. Vou copiar essa propriedade com esse valor e vou colá-la aqui Mas desta vez, vou atribuir a cor laranja e o semble à linha final Ao acessar este arquivo, você pode ver o resultado. Aqui está com um traço de um pixel. Em seguida, quero ocultar o pseudo elemento anterior. Quero mostrar o texto laranja ao passar o mouse sobre ele. Então, vou atribuir com capacete, atribuir com 0% e transbordar, transbordar Vou configurar esse arquivo. Defina esse arquivo, como você pode ver, ele percorre o texto do psudo anterior E, finalmente, vou adicionar a transição. Transição, e eu quero adicionar a transição por 1 segundo. O pseudo-elemento anterior tem uma largura de zero e também está oculto e você pode ver o texto original Em seguida, vou criar o seletor Hover disso antes do pseudo-elemento, some type, for some type, anchtg Passe o mouse e eu quero selecionar o pseudo-elemento antes, Então dentro dela, depois dentro do horário do CARiverst, vou aumentar a Nós, eu vou fazer isso 100%. Quando eu passar o mouse sobre esse link, ele aumentará a largura dele antes do texto e mostrará o texto novamente. Então, por favor, defina esse arquivo. Se eu passar o mouse sobre o meu carro neste link inicial, você poderá ver o resultado Se eu remover meu carro novamente, ele voltará à sua posição original. Quando eu passo meu cursor sobre esse elemento, ele cobriu o link com essa cor Mas o problema é que essa fronteira está muito próxima desse link. Seria melhor se eu adicionasse um pouco de distância a essa borda Quero mover essa borda um pouco mais longe do que o texto original Podemos fazer isso facilmente se fornecermos pouco espaço em nosso texto, também em nosso texto de dados Como você sabe, para adicionar espaços em TML, precisamos usar esse caractere especial no sinal de taxa e pessoa do NBSP e fazer isso em nosso Vou copiar, vou colar esse espaço antes do início, também antes dos serviços e também antes da equipe, e vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Agora parece muito melhor. Além disso, quando eu passo o mouse sobre este link, ele também adiciona pouco espaço no lado direito Desculpe, se você quiser adicionar pouco espaço no lado direito, você também precisa usá-lo, upc o texto do link Execute o texto, deixe-me mostrar para você. Novamente, vou passar o código DML. Desta vez, vou colar o texto e salvá-lo novamente. cima, satisfaça se eu passar o cursor novamente, agora você pode ver que no lado direito também há uma lacuna e essa aparência é uma lacuna e essa aparência Espero que agora esteja claro para você como podemos criar esse belo design de menu com a ajuda do transform property. 32. Efeito de carregamento de rotação usando animação css esv2 90p bg 10p: Olá, pessoal. Mais uma vez, estou de volta com uma nova animação CSS relacionada ao projeto. Hoje, neste projeto, vamos criar essa bela animação de carregamento usando o valor de rotação X e rotação Y em três ambientes D. Vamos ver como podemos criar essa animação. Como você pode ver, primeiro, ele gira a animação em YXS 180 graus, depois gira a animação XXS e YXS e Vamos ver como podemos construir. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão Live Server e já crio um documento HTML chamado indexoTetml Com isso, eu já crio arquivo CSS estilizado e vinculo o arquivo CSS de estilo a este documento Primeiro, dentro da etiqueta corporal, vou pegar uma etiqueta profunda, bife, e vou atribuir uma classe e o nome da nossa classe é Lodi Em seguida, vou pular para o arquivo CSS de estilo e, primeiro, vou estilizar a seção do corpo. Corpo, então dentro do CalibraSF eu vou atribuir a Altura, vou atribuir 100 janelas de visualização para altura e depois vou usar a propriedade, dessa forma flexionar Dessa forma, vou usar uma propriedade chamada justify content, Justify content center porque quero colocar o centro de alinhamento Em seguida, vou usar o centro de alinhamento e alinhamento de itens. Depois disso, vou usar a cor do plano de fundo, a cor do plano de fundo. Eu quero usar fundo cinza escuro. Então eu uso esse código de cores, tem a faixa 222, e vou definir esse arquivo, definir esse arquivo, é assim que ele se parecia Agora, vamos direcionar o elemento usando seu nome de classe. Então digite dot loading. Carregando dentro do Calibra diz que, aqui, vou usar a propriedade, a propriedade chamada Wi Wi 100 pixels Em seguida, vou usar a propriedade de altura, altura também de 100 pixels e cor de fundo, cor de fundo, e vou usar a cor Dground branca Depois disso, vou atribuir um pequeno raio de borda. Raio da borda, quero um raio de borda de 12 pixels de cada canto Agora, ao acessar esse arquivo, você pode ver o resultado. raio de borda QuillPixel fornece bela Agora, vamos trabalhar no quadro-chave da animação. É na taxa de quadros-chave. E o nome da nossa animação é, por exemplo, carregamento. Então, dentro desse quadro-chave, vou adicionar o primeiro estágio 0% na posição 0% em 0% do tempo, dentro da resina fria Aqui eu vou usar a propriedade transform, and transform rotate X zero DG Então, gire Y, gire, Y. Além disso, eu vou passar Ele iniciará a animação a partir de sua posição original. Em seguida, vou pular para o segundo estágio da animação, então dupliquei essa linha e, em 50% do tempo, quero girar essa animação em Xs em zero grau, mas quero girar essa animação, YxS 180 Com 50% da duração da animação, ele girará esse elemento em 180 graus YxS Então, na fase final, com 100% da animação, deixe-me mostrar em 100% da duração, quero girar esse elemento em XX em 180 graus Além disso, quero girar o mesmo elemento em YX em 180 graus Vou configurar esse arquivo. Então eu vou chamar essa animação na minha seleção. Vou digitar animação. Primeiro, vou fornecer o nome da animação que está sendo carregada. Em seguida, fornecerei a duração da animação, que é de segundo para a. Em seguida, precisamos fornecer a função de temporização da animação , que é linear. Finalmente, precisamos passar a contagem de iterações da animação. Quero rodar essa animação por um tempo infinito. Eu vou passar infinitamente. Como você pode notar, aqui trabalhamos com o valor de rotação x e o valor de rotação de Y, essas duas funções funcionam em três ambientes É por isso que precisamos usar a perspectiva sobre isso para entendê-lo melhor. Vou pular para a seção do corpo e aqui vou adicionar perspectiva, perspectiva perspectiva, e vou dizer prospectivos de 200 pixels Agora, depois de definir esse arquivo e recarregar meu navegador, é assim que nossa animação se parece É assim que ele gira o elemento. Primeiro, ele vai girar o elemento em YXS 180 graus, depois vai girar o elemento, XX é 180 graus, também YXS 180 graus também YXS É por isso que ele cria esse lindo efeito de carregamento. Espero que agora esteja claro para você como podemos construí-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 33. Animação de carro dirigindo: Olá, pessoal. Nesta lição, vamos criar essa linda animação infinita. Como você pode ver, temos um carro e uma moto andando neste passeio A ideia por trás desse exemplo é muito simples. Temos uma imagem de fundo que é esse passeio, temos duas imagens, uma para o carro e outra para a moto, e as imagens do carro e da moto não estão se Movemos o fundo do lado esquerdo para o lado direito e isso nos dá esse lindo efeito de direção. Vamos ver como podemos criar essa animação. Então, como você pode ver, finalmente, estou no meu coordenador do Visual Studio e já criei um documento HTML de índice de pontos de índice Com isso, eu já crio esse arquivo CSS de pontos de estilo. E, como você pode ver no meu diretório de trabalho atual, temos várias imagens. Temos imagem de imagem de fundo. Esta é nossa imagem de fundo principal, e eu junto essa imagem de fundo várias vezes e crio uma nova imagem de fundo. E aqui eu junto essa imagem de fundo várias vezes e estendo a largura dessa imagem. Assim, podemos dirigir nossos veículos nessa estrada. Vamos pular para outra imagem, que é a imagem do carro. Vou usar essa imagem PNG do carro. Além disso, eu tenho outro veículo que é essa moto. Vou adicionar a imagem da moto e do carro nesta estrada e vamos mover apenas a imagem de fundo Vamos voltar ao arquivo de pontos de índice. Primeiro, dentro da minha tag corporal, vou criar uma etiqueta profunda, tecê-la e atribuir um plano de fundo para a classe Dentro desta etiqueta de mergulho, vou tirar duas imagens IMG Como fonte, vou passar o cartão cimag e também vou atribuir uma classe e o nome da nossa classe é Então eu duplico essa linha e aqui vou adicionar a imagem da moto, moto E é uma moto. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, eu já abro meu navegador usando meu servidor ativo. Então, se eu te mostrar meu navegador, é assim que ele se parece. Agora, em nosso elemento de fundo, precisamos adicionar a imagem de fundo. Vamos voltar ao seu código para os usuários, e eu vou entrar no arquivo CSS de pontos de estilo e vou começar nossa estilização Primeiro, vou selecionar o corpo da tag body. Dentro do Cariss, a primeira probidade, vou usar Margem, Margem zero Na segunda questão, vou usar o emparelhamento. O preenchimento também é zero. Vou configurar esse arquivo. Depois disso, vou trabalhar no plano de fundo. Vou trabalhar no elemento background deep, então vou copiar o nome da classe, o plano de fundo e voltar para o arquivo CSS do estilizador Vou selecionar esse fundo profundo usando o nome da classe. Em seguida, vou atribuir altura, altura e vou atribuir 100 alturas de janela de visualização Em seguida, vou atribuir o plano de fundo, o plano de fundo e vou usar o URL. URL e dentro dela, passo a imagem de fundo. Qual imagem de fundo é essa imagem de fundo? Essa longa imagem de fundo. Fundo do tipo Ham de três BG três para JPG. Então, precisamos posicionar esse plano de fundo. Posição de fundo, e eu quero posicioná-la de baixo, com a parte inferior iluminada. Vou configurar esse arquivo. Depois de configurar esse arquivo, vamos ao navegador. É assim que nosso plano de fundo se parece. Agora precisamos colocar a moto e o carro na posição correta Para isso, precisamos estilizar o carro. No começo, vou estilizar o carrinho. Vou usar o nome da classe. Então, no interior, o calibre diz , primeiro, vou definir a posição Posição, vou torná-la absoluta. Então eu vou definir a partir de agora, eu quero colocá-lo em 300 pixels. De baixo, quero colocá-lo em 250 pixels. E também, vou definir a largura desse carro. Aqui eu vou definir a largura desta imagem do carro, e eu vou dizer 500 pixels. Da mesma forma, vou posicionar a moto. Para isso, vou usar o nome da classe. Eu copio o nome da classe e adiciono ao arquivo CSS de estilo, e vou selecionar a imagem da moto Então, dentro do CalibrSSF, quero definir a posição da posição, que é a posição absoluta Aqui usamos a posição absoluta porque não vamos mover a imagem de um carro e uma moto É por isso que usamos a posição absoluta e , da esquerda e da esquerda, quero colocá-la em 1.100 pixels e, na parte inferior, 360 pixels Além disso, vou definir a largura dessa imagem. Largura, vou fazer com que seja de 250 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, ficou assim. Acho que preciso ajustar um pouco a imagem do carro. Vamos voltar ao código novamente e, de baixo para baixo, vou torná-lo 250, não 150. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador novamente, é assim que ele se parece. Agora, colocamos nosso carro e a moto na posição correta Agora precisamos executar a animação. Precisamos correr da volta inferior para o canto inferior direito. Quero dizer que precisamos mover esse plano de fundo da volta inferior para a posição inferior direita, e isso nos dará esse lindo efeito de animação. Deixe-me te mostrar como. Então, como você pode ver, aqui definimos a posição de fundo, elevação inferior. Em nossa animação, precisamos movê-la para o canto inferior direito. Vamos definir um quadro-chave. Então, nos quadros-chave vermelhos e o nome do quadro-chave é Driving Driving e, dentro da Classe, vou usar a Dentro do recesso cl, quero alterar apenas a posição de fundo Posição de fundo, e vamos começar da posição inicial, então vou usar o mesmo valor, no canto inferior esquerdo. Copie esse valor e eu vou colá-lo aqui. E então eu dupliquei essa linha e quero subir para, então vou usar dois Qard, e desta vez, quero subir para o canto inferior direito Canto inferior direito. Vou substituir essa pilha Depois de definir esse arquivo, precisamos chamar essa animação em nossa seleção. Em nosso plano de fundo, quero executar essa animação. Vou usar a propriedade de animação animation e nosso nome de animação é driving. Em seguida, precisamos fornecer a duração da animação , que é de dez segundos. Em seguida, precisamos fornecer a direção da animação, que é linear. E também precisamos fornecer o tempo de animação. Quantas vezes queremos executar essa animação e eu quero rodar essa animação por tempo infinito, então vou usar infinito. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, como você pode ver, ele executa minha animação. É assim que podemos executar qualquer animação de direção. Precisamos apenas mover o fundo e não precisamos mover nossos objetos, e não precisamos mover nossos objetos como carros, caso contrário, motocicletas Só precisa mover o fundo de outro lado para outro lado. Aqui, apenas movemos esse fundo para o lado esquerdo para o lado direito e isso nos dá esse lindo efeito de direção. Então, espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 34. Animação rotativa de texto: Olá, pessoal. Mais uma vez, estou de volta com outro projeto CSS. Neste projeto, vamos criar essa animação de takes to rotator Como você pode ver, primeiro digite, adoro transformação, transição e animação CSS. Agora vamos ver como podemos alterar o texto usando a animação CSS Hl op, não pelo JavaScript. Vamos entrar no editor de código do isults Studio. Como você pode ver, lado a lado, abro meu editor de código visual Studo e meu navegador usando a extensão de servidor Lip e já criei nome de um documento HTML, índice, ponto de índice Com isso, eu crio esse estilo de arquivo de estilo CSS. Primeiro, dentro da tag body, vou pegar H, uma tag com o título W e digitar Hebru, adoro E então eu vou pegar uma etiqueta, span. Então, dentro da tag span, diabos, eu não vou digitar nada. Por enquanto, está vazio, mas conterá animação, transição e transformação. Mas vamos adicioná-los usando CSS, não pelo HTML Agora, para configurar esse arquivo, é assim que ele se parece. E agora precisamos entrar no arquivo CSS tile dot. No começo, primeiro, vou estilizar a etiqueta corporal. Corpo, depois dentro das maldições, primeiro, vou atribuir altura, altura e vou definir a altura, 100 alturas da janela de visualização Então eu vou atribuir dessa forma. Os filmes exibidos justificam o centro de conteúdo porque eu quero alinhar esse sabor horizontal e verticalmente porque eu quero alinhar esse sabor horizontal e verticalmente no centro desta página. Em seguida, vou tentar alinhar os itens também ao centro. Depois disso, aqui vou definir a cor do plano de fundo, a cor e vou definir a cor cinza escuro, tag 222, esta, e vou definir esse arquivo Ao configurar este arquivo, é assim que ele se parecia. Agora vou mudar a cor do texto. Vou segmentar a tag H one usando seu nome de tag H one e atribuir cor E eu quero usar a cor branca. Com isso, também vou definir o tamanho da fonte. Tamanho da fonte, e eu quero uma fonte um pouco maior, então vou torná-la de 40 pixels. Acho que 40 pixels é bom para mim. Sim. E então vou direcionar a tag span e quero criar um elemento antes antes do pseudoelemento Então digite, expanda o cólon antes. Então você disse que o clivss aqui eu vou passar o conteúdo que eu quero adicionar Alguns tipos contêm dois pontos e eu quero adicionar dentro dos códigos únicos, e eu quero adicionar transição, primeiro lugar, então digite transição Em seguida, prepare este arquivo, aqui está. Eu adoro a transição CSS. Em seguida, vou atribuir texto, texto, transformação em maiúsculas Além disso, vou definir a área da família de fontes da família de fontes. Vou definir esse arquivo para a cor do texto, vou usar esse valor hexa, essa cor azul e vou definir esse arquivo Agora eu quero mudar a palavra transição. Podemos fazer isso usando animação. Vou criar uma animação no quadro-chave vermelho, nosso interruptor de palavras de animação O interruptor de palavras dentro da resina do carro. Agora, dentro do quadro-chave em 0% do tempo de animação, eu escrevo 0% dentro da resina do carro, gostaria de alterar o conteúdo, mas gostaria de fazer a mesma transição de conteúdo de valor Eu digito cólon contido e sou transição de tipo. Então, vamos fazer nesta linha. Depois disso, dupliquei essa linha em 50% do tempo de animação, 50% da duração, animação do Hemotyp e, em 100% da duração, vou alterar a transformação contag Em vez de usar animação, vou substituí-la por transform. Vou configurar esse arquivo. Depois de definir esse arquivo, vou chamar essa animação de switch Word, copiar o nome da animação. Vou chamar essa animação dentro dessa tag span, span antes do pseudo elemento Portanto, t animation e nosso nome de animação é Wordswitch e a duração da animação é de cinco segundos Além disso, quero executar essa animação por tempo infinito, então vou usar valor infinito. Vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Em 5 segundos, ele completa a animação. Primeiro, ele dá dicas de animação, transição e depois digita animação. Eu adoro animação CSS e depois ela passa e depois dá a ponta na transformação da animação. Se eu aumentar a velocidade, então vou reduzir o tempo, vou fazer dois segundos e depois configurar esse arquivo. Agora você pode ver que isso mudou rapidamente. Transição de transformação de animação. É assim que podemos criar esse efeito. Espero que esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 35. Botão animado com animação em CSS: Olá, pessoal. Neste tutorial, vamos criar essa bela animação O de agitação para nosso botão Como você pode ver, quando eu passo meu cartão sobre esse elemento, ele aperta o botão Para criar esse botão, vamos usar animação CSS. Eu quero dizer animação de quadro-chave CSS. Vamos ver como podemos criar esse efeito de tremor. Vamos entrar no código do estúdio. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão Live Server e já crio um documento STMA chamado index dot TML Primeiro, dentro da minha etiqueta corporal, vou criar uma etiqueta âncora, A, e aqui vou digitar Hober Ela é eu. E como você pode ver, eu já vinculo com o estilo de arquivo de estilo CSS. Vou configurar esse arquivo. Depois de configurar esse arquivo, até configurar esse arquivo, você pode ver a tag âncora no meu navegador Em seguida, vou entrar na página CSS. Aqui, primeiro, vou estilizar a seção do corpo, o corpo. Em seguida, dentro do cli diz, primeiro, vou atribuir altura à altura do nosso corpo, Hermon para usar 100 alturas de janela de visualização Então eu vou definir desta forma, exibir flocos porque eu quero colocar o botão no meio desta página É por isso que eu uso esses flocos. Justifique o conteúdo, justifique o conteúdo centrado. Além disso, um centro de itens de linha. Depois de definir esse arquivo, como você pode ver, ele reproduz essa tag âncora particularmente e horizontalmente no meio desta página Em seguida, vou adicionar um fundo cinza escuro a esse corpo. Aqui eu estou digitando background, e vou dizer que o background tem a tag 222 Ele fornecerá uma cor cinza escuro. Em seguida, vou mirar na etiqueta âncora. R, e dentro dos versos de Cali, primeiro, vou remover a decoração apertada do texto sublinhado Eu vou fazer com que não seja nenhum. Depois disso, vou definir cor, cores, e aqui eu quero usar a cor branca, branca. Como você pode ver, isso já me sugere alguma propriedade e valor Em seguida, vou definir a família da fonte. Família de fontes, e aqui, vou usar o Sensai Depois disso, vou definir o tamanho da fonte. Tamanho da fonte, vou usar 40 pixels. Em seguida, vou definir borda, borda e aqui vou usar uma borda sólida de três pixels. Depois disso, vou definir aquarela, branco, e vou definir esse arquivo Em seguida, vou definir um pouco de preenchimento de cima para baixo Preenchendo de cima para baixo, vou usar 40 pixels e esquerda e direita, vou usar 80 pixels e vou definir esse arquivo Defina este arquivo, é assim que nosso botão se parece. Em seguida, vou usar a propriedade de transição. Transição e aqui eu quero executar a transição para toda essa propriedade e vou definir o horário. O tempo de transição é de 0,3 segundo. Eu vou definir esses cinco. Em seguida, vou criar um seletor de foco dessa tag âncora Aqui eu vou amarrar a âncora A, dois pontos, Hovl. Então, dentro da propriedade CaribaSF vou usar border A primeira propriedade, eu vou usar a fronteira. Eu quero mudar a borda sólida de três pixels, sólida. E aqui, vou definir cor, cor diferente. Então, aqui, eu vou definir a cor A quatro, quatro, A quatro, 336, esse código de cores Este tipo de cor laranja é vermelho alaranjado. Vou configurar esse arquivo. Depois disso , também quero mudar a cor do texto. Alguém usa a mesma cor de texto. Então eu copio o código de cores e vou digitar a propriedade da cor, cor Vou colar essa cor de texto síncrono. Vou configurar esse arquivo. Depois de definir este arquivo, se eu fizer o cursor Hoberm , você poderá ver o pecado Foi assim que mudou a cor da borda, também a cor da fonte. Agora vamos criar o quadro-chave de animação para a animação Então, digite os quadros-chave de taxa e nome dos nossos quadros-chave é shake porque vamos agitar esse botão usando essa animação Então, dentro dos aliases, nos primeiros 33% de duração, eu quero rotacionar todo esse elemento Quero digitar transform property, transform, e vou usar o valor de rotação, girar Quero girar esse elemento em dez graus, semicícone de dez graus para finalizar Com 33% de duração, ele girará o elemento em dez graus Então eu dublo esta seção e aqui vou dizer 66%, 66% Eu quero girar esse elemento menos dez graus. Eu quero dizer na direção oposta, lado do lábio. Então, com 100% de duração, eu quero girar esse elemento, lado direito novamente, então eu uso dez graus positivos e vou configurar esse arquivo Agora, quando coloco meu carro nesse botão, quero chamar essa animação Vou chamar essa animação no seletor de Hobart. Então, para digitar animação, nosso nome de animação é forma. A seguir, vou dizer a duração da animação que é de 0,3 segundo. Então, a direção da animação é linear. Depois disso, precisamos passar o tempo de animação. Quantas vezes queremos rodar essa animação? Vou digitar a introdução da animação, contagem, valor um. É isso mesmo. Agora, se eu definir esse arquivo e passar o cursor sobre esse botão, você poderá ver esse lindo efeito de animação Esta é uma bela animação de tremor. Quando eu passo meu cursor sobre este botão, como você pode ver, ele agita o botão em 0,3 segundos. No início, ele roteou o botão no lado direito, depois rotacionou o botão no lado esquerdo e, em seguida, roteou o botão para o lado direito novamente Se eu aumentar o tempo de duração, se eu fizer cinco segundos e depois definir esse arquivo e quem quer que minhas cartas estejam nele, agora você pode notar a princípio que ele inclinará esse botão para o lado direito Depois de dez graus, ele girará para o lado esquerdo e, novamente , para o lado direito e completará lado direito e completará a animação em 5 segundos Para uma melhor experiência, vou usar o valor anterior de 0,3 segundo. Espero que agora esteja claro para você como podemos aplicar o quadro-chave de animação em nossos botões Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 36. Botão animado com animação CSS: Olá, pessoal. Neste tutorial, vamos criar esse vazamento, esse vazamento animado Agora, se você der uma olhada, temos um fundo vermelho e ele tem uma largura específica e distorcemos um pouco esse elemento. Também está se movendo da esquerda para a direita continuamente. Tempo infinito, ele executará a animação. Mas sempre que eu passar o cursor sobre esse elemento, deixe-me mostrar se eu passar o cursor sobre esse elemento, agora você pode vê-lo parar a animação Além disso, o botão é preenchido com esse fundo vermelho. Eu estendo a largura desse elemento inclinado e cubro todo o botão É isso que vamos criar neste projeto. Espero que você goste. É um projeto muito simples e fácil. Não é muito difícil. Então, vamos entrar no editor de código do User Studio. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server e já crio um documento HTML chamado index dot TML Com isso, eu crio o arquivo CSS Stylo. Por enquanto, está vazio. Agora, dentro da etiqueta corporal aqui, vou pegar uma etiqueta de ancoragem, A, e aqui, vou digitar Hover Aperte-o para configurar este arquivo, aqui você pode ver o link no meu navegador Mas precisamos estilizar esse link. Para isso, precisamos entrar nesse arquivo CSS de pontos de estilo. No início, vou começar a estilizar com body tag, algum tipo de corpo Lá dentro do Cli vers está a primeira propriedade em que vou usar a altura Vou definir uma altura e, para altura, vou amarrar 100 VH, colocar altura Então eu vou definir a tela e vou torná-la de linho Exiba flocos e justifique item no centro do conteúdo, alinhe alinhe Seja qual for o elemento que passarmos dentro dessa tag corporal, ele centralizará vertical e horizontalmente Depois disso, também vou passar uma cor de fundo, cor de fundo aqui vou usar a cor de fundo cinza Então, o tipo tem a tag 222, e eu vou definir esse arquivo Depois de definir esse arquivo, você verá o resultado. Como eu disse, horizontal e verticalmente, ele centralizará o elemento desta página nesta página Em seguida, vou estourar a etiqueta da âncora. Então digite A, então dentro do ClirasSF eu vou remover o sublinhado desse texto, algum tipo de texto, decoração Eu vou fazer disso uma freira. Vou configurar esse arquivo, você pode vê-lo remover o sublinhado Depois disso, vou torná-lo visível em algum momento, em cores. Vou fazer com que seja branco. Além disso, cabelo, vou definir o tamanho da fonte, o tamanho da fonte e vou torná-la de 40 pixels, acho que 40 pixels são suficientes para o exemplo. Em seguida, vou definir a família da fonte, a família da fonte. Aqui eu vou usar o sensorial. Depois disso, vou definir fronteira, fronteira. Quero três pixels, borda sólida, sólida, e nossa cor de borda também é branca. Então eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Depois disso, precisamos adicionar um pouco de preenchimento. Então, esse preenchimento, de cima para baixo, eu vou passar 40 pixels e da esquerda e direita, eu vou passar 80 pixels Então eu vou me posicionar. Posição, vou torná-la relativa. Depois disso, vou definir estouro. Transbordamento oculto. Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nosso botão se parece. Em seguida, vou criar o elemento interno usando a pseudoclasse before. Aqui, vou criar uma pseudoclasse anterior da tag âncora A, dois pontos Então, dentro dos aliases, a primeira propriedade, vou usar o conteúdo para criar um conteúdo em branco para isso Conteúdo, conteúdo é um conteúdo em branco. Depois disso, precisamos definir a posição desse conteúdo em branco. Então, do topo, da posição superior, vou fazer com que seja zero. Do laboratório também vou começar a dormir com zero. Depois disso, vou definir uma cor de fundo, cor de fundo. Vou usar a cor avermelhada someti haTAGF quatro, quatro, três, três, seis Depois disso, vou definir id. Largura, leme para usar a largura, 120 pixels Em seguida, vou definir altura, altura e bainha para usar altura, 100%, 100%. Depois disso, vou definir a posição da posição e quero torná-la absoluta. E eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso elemento se parece. Mas o problema são as letras embaixo dela. Então, para isso, precisamos usar o valor do índice Z. Então, aqui está o índice T Z, e eu vou passar menos um Vou configurar esse arquivo e resolver o problema. Agora vou transformar esse elemento. Eu quero distorcer esse elemento. Para isso, precisamos usar a propriedade transform, transform, e eu vou usar o valor de distorção, distorção E eu quero incliná-lo até -15 graus no EG, e eu não quero configurar esse arquivo Depois de definir esse arquivo, é assim que nosso elemento ficará. Além disso, você pode notar que esse elemento não está visível fora da área da borda porque aqui usamos a propriedade oculta de transbordamento É por isso que não podemos ver essa parte da área desse elemento que. Agora precisamos trabalhar na animação que moverá esse elemento para o lado direito. Mas antes de começar a animação, vou comentar esse estouro de linha oculto e aqui, vou declarar a animação usando o quadro-chave vermelho e o nome da nossa animação é, você pode nomeá-la de qualquer coisa, vou chamá-la de mover Então, dentro do que Caira diz aqui, eu vou usar a palavra-chave from, a partir desta é a posição inicial desta animação Em seguida, o calibre diz, aqui, eu vou usar a propriedade chamada P. A partir da volta, eu quero começar a animação com menos 120 pixels Desculpe, 120, não 12. Então eu vou configurar esse arquivo. Quero dizer, ele vai colocar esse elemento naquele lugar. Deixe-me te mostrar. Se eu alterar o valor, se eu alterar o valor esquerdo, se eu fizer com menos 120 pixels e, em seguida, definir esse arquivo Como você pode ver, movemos esse elemento nessa posição. Agora, em nossa animação, vamos começar esse elemento a partir dessa posição. Por enquanto, vou torná-lo zero, zero novamente porque essa é a posição inicial desse elemento. Mas na animação, vamos começar esse elemento nessa posição. E na segunda palavra-chave, nosso destino final é o valor esquerdo f aqui, eu vou passar 100%. Vou configurar esse arquivo. Além disso, agora, vou descomentar essa linha novamente. Vou configurar esse arquivo novamente. Depois disso, vou chamar essa animação em nosso BFCEDelimate Dica de animação, primeiro precisamos fornecer o nome da animação que é move, depois precisamos fornecer a duração da animação e vou usar 1,2 segundo. E nossa derivação de animação é linear. Para contagem de interconexões de animação, aqui vou usar valor infinito, infinito Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, tempo infinito por tempo infinito, ele moveu esse elemento para trás dessa parte inferior. Por um tempo infinito, ele executará a animação, mas eu quero parar essa animação quando eu colocar meu cursor neste botão. Além disso, quero estender a largura desse elemento de inclinação. Para isso, precisamos criar um seletor de foco desse elemento anterior Aqui, vou digitar o ponteiro de dois pontos NCatag e vou aplicar o seletor Her no elemento anterior . Então, dentro da propriedade calibrSF, vou usar wed Quero estender a largura desse elemento e quero torná-lo 100%. Em seguida, vou remover o QVLu. Eu quero fazer disso um quadrado. Vou digitar transform e quero torná-la Qvalu zero DG e também vou remover a animação ao passar o cursor sobre esse elemento Então digite animação, e aqui eu vou passar Nn Value. Vou definir esse arquivo após definir esse arquivo Se eu passar o cursor sobre esse botão, como você pode ver, ele interrompe instantaneamente essa animação Também preenche o botão com esse pseudo-elemento anterior. Mas o problema é que não podemos experimentar a transição nela. Ele cobriu instantaneamente todo o botão. Para isso, aqui precisamos usar uma propriedade chamada transição. Faça a transição de todo esse elemento e nosso tempo de transição será de 0,5 segundo. Win hub em segundo lugar, ele vai encobrir esse elemento. Deixe-me te mostrar. Sempre que eu passo meu coração sobre esse botão, você pode experimentar essa animação Você pode experimentar essa transição. É assim que podemos criar esse belo efeito de animação neste botão com a ajuda de quadros-chave e antes do pseudo Então, obrigado por assistir a esta programação de vídeos para nosso próximo projeto. 37. Efeito de iluminação de texto: Olá, pessoal. Mais uma vez, estou de volta com uma nova animação CSS relacionada ao projeto. E hoje, neste projeto, vamos criar essa animação de texto de iluminação, como você pode ver, como você pode ver, palavra de animação Hearty e todos os personagens se iluminam um após o outro Não está piscando ao mesmo tempo. Um após o outro, ilumina todos os personagens. Então, vamos ver como podemos criar essa animação sem usar JavaScript. Na maioria dos casos, para criar esse tipo de animação, precisamos de um script Java. Mas neste tutorial, não vamos usar nenhum JavaScript. Vamos usar em CSS e HTML. Então, vamos começar o código. Então, como você pode ver lado a lado, abro meu editor de código do Visor Studio e meu navegador usando a extensão Live Server e já criei um documento HTML, chamado index dot HTML Com isso, eu crio um arquivo CSS de estilo e vinculo esse arquivo a este documento. Agora, primeiro dentro da etiqueta corporal. Primeiro, dentro da etiqueta corporal, vou pegar uma lista abaixo, UL. Então, dentro dessa lista nodal, vou pegar o item da lista, eu, e vou pegar vários itens da lista Aqui vou digitar animação, A, A N I A, T, I, vou duplicar isso várias vezes ON e vou definir esse arquivo Depois de definir esse arquivo, vamos entrar no estilo ou no arquivo CSS. Agora vou começar com body tag, algum tipo, body. Então, dentro da Curless, primeira propriedade, vou usar a altura Vou atribuir uma altura a esta página e que é 100 VH. Depois disso, vou atribuir a exibição flexível, justificar o conteúdo, justificar o centro de conteúdo Também alinhe o centro de itens e eu vou definir esse arquivo. Ele vai alinhar horizontal e verticalmente este item, no centro desta Depois disso, aqui vou atribuir família de fontes, família de fontes e vou usar fonte aérea. Vou configurar esse arquivo. Em seguida, vou adicionar uma cor de fundo a essa tag corporal, algum tipo de fundo, e aqui vou usar a hashtag 222, essa cor de fundo cinza escuro Depois disso, vou segmentar a tag UL, a UL e a lista. Então, dentro dos cartuchos aqui, vou definir a margem Margem, zero, adicionando também preenchimento zero. Em seguida, vou usar a propriedade de exibição. Mostre flocos e eu vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que ele se parece. Agora, todos os itens da lista desaparecem lado a lado. Depois disso, vou focar em todos os itens da lista. Aqui estou digitando, ULI dentro dos cartuchos, a primeira propriedade que vou usar é que vou usar Estilo de lista, vou fazer com que não seja nenhum porque quero remover os pontos. Depois disso, aqui, vou atribuir uma cor, cor, e quero usar um pouco de cor acinzentada, cinza claro, algum tipo tem etiqueta, outro tipo tem etiqueta, quatro, 848, 48 Depois disso, vou atribuir o tamanho do telefone. Tamanho do telefone Hemon atribui o tamanho do telefone de oito pixels. Pixel. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nossas tomadas se parecem. Além disso, vou fornecer um pouco mais tarde de espaçamento entre esses caracteres Aqui estou digitando espaçamento posterior, 15 pixels, acho que 15 pixels são bons para isso, e vou configurar esse arquivo Agora, é assim que parece. Depois disso, precisamos criar a animação usando quadros-chave Para isso, aqui, vou digitar os quadros-chave de peso, adicionar quadros-chave e aqui vou nomear a iluminação do quadro-chave vou nomear a iluminação do quadro-chave Iluminando dentro da classe a primeira probabilidade de 0% de duração dentro da menor, vou usar a propriedade de cor, cor Eu vou mudar a cor. Basicamente, não vou mudar a cor, vou continuar como está. Eu uso dessa maneira. Com isso, vou usar sombra de texto, sombra de texto. Por enquanto, não vou digitar nenhum. Posteriormente, vou alterar o valor da sombra do texto. Então eu dupliquei essa linha. Então eu duplico esta seção, e aqui eu vou passar aqui eu vou passar com 90% de duração Quero usar a mesma cor, mas vou duplicá-la novamente agora com 100% de duração Eu vou definir a cor. Eu vou mudar a cor. Aqui eu vou usar essa cor, FS se nove fizer zero, essa cor amarela. Agora vou aplicar um valor de sombra de página com duração de 100%. Aqui, vou substituir o nano por esse valor. Eu já copio esse valor, então eu o coloco aqui e vou definir esse le. Depois disso, vou chamar essa animação de iluminação, copiar os nomes da animação e vou chamá-la aqui dentro dessa tag LI, vou chamar a animação. Animação, primeiro vou fornecer o nome da animação, que é iluminação. fornecer o Depois de fornecer o nome da animação, precisamos fornecer a duração da animação, e a duração da animação é de 1,4 segundo. Com isso, precisamos passar a função de temporização da animação, que é linear. Depois disso, precisamos passar o valor da contagem de iterações da animação, que é infinito porque eu quero executar essa animação por tempo infinito Infinito e eu vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver a animação em nosso texto. Mas o problema é que todos os personagens piscam ao mesmo tempo. Agora eu quero adiar. Eu quero um intervalo entre cada personagem. Para isso, precisamos selecionar todos os elementos um após o outro. Eu quero dizer todos os personagens. Para isso, vamos usar a enésima criança. Vamos usar a técnica de seleção avançada. Herna tipo UL, Ali, Colon, enésima criança. Isso significa usá-lo, podemos direcionar as médias do LIE usando seu número de índice. Dentro das rodadas aqui, eu vou passar por uma Em primeiro lugar, eu quero selecionar o primeiro personagem. Basicamente, quero dizer que o alvo será A. Agora, um por um, alveje todos os personagens de N para I, para M, para A, T I O N. Aqui, dentro do Kalis, está o personagem-alvo peludo A, e eu quero atribuir um pouco de atraso na animação Atraso na animação. Esse é nosso primeiro personagem, então eu vou passar de zero. Então eu dupliquei essa linha, e esta é a enésima segunda criança aqui vou atribuir um atraso de 0,1 segundo à animação Depois disso, dupliquei esta seção e, em seguida, direciono o caractere I I usando seu número de índice Então aqui eu quero atribuir um atraso de 0,2 segundo. Depois disso, eu o dupliquei novamente e, desta vez, vou selecionar aqui que vou atribuir um atraso de 0,3 segundo Então eu o duplico novamente, e desta vez, vou atrasar para A, esse caractere, A. Aqui, vou passar o índice número cinco e 0,4 segundo Em seguida, eu o duplico e, em seguida, vou direcionar T usando o índice número seis, 0,5 segundo Então, novamente, eu dupliquei esse número, dupliquei essa linha e, em seguida, vou direcionar I usando o índice número sete e o valor de atraso 0,6 Depois disso, eu dupliquei isso novamente. Desta vez, vou selecionar a enésima criança número oito e atrasar 0,7 para duplicá-la novamente, isso é para o objetivo do último personagem Vou mudar o índice número nove. E aqui, eu vou mudar o valor. Vou fazer com que seja um atraso de 0,8 segundo. Se eu definir esse arquivo, agora você pode ver agora depois de definir esse arquivo, você pode ver um após o outro , aumentando os caracteres. É assim que podemos obter esse efeito de iluminação. Espero que agora esteja claro para você como podemos conseguir isso. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 38. Desenho de lua criativo: Olá, pessoal. Mais uma vez, estou de volta com uma empolgante animação CSS relacionada a projetos. Hoje vamos construir uma lua dinâmica e visualmente deslumbrante, efeito de animação rotativa Como você pode ver, temos a órbita central da lua e, lado a lado, colocamos as letras M e N, a lua orbita continuamente em um movimento circular suave e criando um efeito hipnotizante E aqui usamos g box para posicionar os elementos. Aqui, estilizamos criativamente esse elemento e o colocamos na posição correta E então, basta implementar a animação de rotação de 360 graus. Vamos começar e ver como podemos criá-lo. Como você pode ver lado a lado, abro meu editor de código iso studio e meu navegador usando extensão de servidor ao vivo e já crio um nome de documento STML com o nome do índice de pontos HTML Com isso, eu crio arquivo de censo de estilo e vinculo esse arquivo a este documento Agora, dentro dessa tag de corpo, primeiro, vou criar um elemento DV, Dev, e vou nomeá-lo Vou atribuir um contêiner de classe, contêiner pontos profundos. Funciona como um invólucro. Esse continuador conterá todos os elementos necessários para essa animação De tempos em tempos, vou adicionar os elementos nele, como texto, lua, etc Agora, vamos entrar nesse bloco ou arquivo CSS. Primeiro, vou usar o seletor universal estrela e, em seguida, dentro do arredondamento aqui, vou usar o valor do preenchimento, a propriedade do preenchimento, o preenchimento zero, a margem, também. Com esse tamanho da caixa, o tamanho da caixa, caixa Depois disso, vou usar a família de fontes. Fonte, família, e aqui vou usar a fonte Area, Area. Em seguida, vou selecionar o corpo. Vou estilizar a etiqueta corporal, uma espécie de corpo apertado. Então, dentro da primeira propriedade, eu vou usar a cor de fundo, cor fundo, e eu quero usar fundo cinza escuro, caso contrário, fundo azul escuro Então, eu gostaria de usar cinza escuro, algum tipo tem etiqueta, 222 E eu quero satisfazer. Depois de definir esse arquivo, é assim que nossa página da web se parece. Então eu vou usar essa forma de flix. Dessa forma, flix, justifique conteúdo porque precisamos mover todos os elementos para o centro desta página, alguns tipos justificam o centro de conteúdo, também alinham o item, alinham, alinham os itens também centralizam centralizam Agora ele vai centralizar horizontalmente e verticalmente todos os elementos Depois disso, vou atribuir uma altura a esta página. Altura aqui, vou atribuir 100 alturas de janela de visualização, 100 VH, vou definir este arquivo Em seguida, vou estilizar as profundezas do continente. Para isso, vou usar o nome da classe, copiar o nome da classe e entrar no contêiner de pontos do tipo de arquivo CSS dentro do livess a primeira propriedade em que vou usar a altura Vou atribuir 31 de altura EM. Como eu vou atribuir largura com 31 EM. É isso mesmo. Basicamente, é um recipiente quadrado. Com isso, vou adicionar uma borda branca. Para isso, vou digitar border border property, e aqui vou usar um sólido de um pixel e nossa cor de borda é haTagfff. Vou subtrair esse Depois de submeter este arquivo, depois de definir este arquivo, aqui você pode observar a caixa quadrada com uma borda sólida de um pixel Além disso, vou definir a posição e vou torná-la absoluta. Com isso, vou definir a cor, vou definir a cor da fonte branca, totalmente visível. Em seguida, vou definir o tamanho da fonte e também o tamanho da fonte em pixels. Acho que 20 pixels são ótimos para cada um. Vou substituir essa correção . Agora, o contêiner serve como uma moldura de estilo. Moldura de estilo para nossa animação. Agora está pronto para armazenar o texto e os elementos da órbita. Agora, vamos entrar no índice para estimar o arquivo e criar essa estrutura dentro do contêiner. Aqui, vou pegar um total de dois parágrafos do tipo P, atribuir uma classe e nomeá-la mais tarde E eu vou fazer essa linha. Nosso primeiro parágrafo mantém o caráter, e nosso segundo parágrafo mantém caráter. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Você pode notar que ela está posicionada no canto superior esquerdo. Em seguida, vou estilizar as duas letras usando seus nomes de classe. Eu copio o nome da classe mais tarde e volto para o arquivo css de estilo e vou selecionar o ponto mais tarde Dentro das calibragens, primeiro, vou definir o tamanho da fonte, algum tipo de fonte, tamanho e vou fazer com que seja às 3,5 da manhã, às 3,5 da manhã Eu vou satisfazer. Depois de satisfeito, é assim que fica Além disso, você pode usar uma fonte um pouco maior , depende de você. Em seguida, quero posicionar as letras. Quero colocar uma letra no lado esquerdo e outra no lado direito. Para isso, vamos usar o flexbox. Aqui, vou usar a exibição da propriedade display e vou torná-la flexível Depois disso, alinhe o item para o centro de alinhamento vertical. Então justifique o conteúdo, justifique o conteúdo. Aqui eu vou usar o espaço entre o espaço entre. Vou ver o arquivo subifyteri, é assim que parece. Agora, colocamos a carta com sucesso no lado direito e esquerdo. Em seguida, precisamos criar a órbita. Para isso, precisamos entrar no arquivo de índice e , entre esses dois livros contábeis, vou usar uma etiqueta profunda, Dev dot orbit Eu atribuo um nome de classe orbit ao Dep Elegant. E dentro desse elemento orbital profundo, vou pegar uma tag P, parágrafo e herm pass O, e vou submeter esse arquivo Agora você pode notar que o O é colocado entre as duas letras. Basicamente, a órbita é colocada entre essas duas letras. Agora vamos rotular esse elemento orbital div e P, que está dentro do elemento orbital div Agora vou entrar nesse estilo CSS five. Aqui vou digitar a órbita e dentro do CarbasSF vou posicionar sua posição e vou torná-la relativa Em seguida, vou definir a altura desse elemento da órbita d. Então digite altura. Aqui eu vou atribuir a altura 18 pontos lm cinco N. E eu vou subtrair este arquivo E também, vou definir com 18.18 0.7 5:00 A.M. Então, aqui criarei uma E para tornar essa caixa quadrada circular, vou usar a propriedade do raio da borda, raio da borda, e vou torná-la 50% Eu quero subtrair esse arquivo. E para entender a borda, eu sou bom em uma borda, algum tipo, borda eu quero borda sólida, um pixel, borda sólida, sólida, a cor da borda é ter etiqueta se for F. Agora você pode ver a órbita é a forma de circo dentro dessa profundidade contínua Agora, vamos trabalhar na tag P, que está dentro da órbita, algum tipo, ponto, órbita, parágrafo P e, em seguida, dentro da figura surge. Primeiro, vou definir a posição e quero torná-la absoluta. Depois disso, pare o valor do pastp Ami 4,7 M. Além disso, late e passe, late valore dois Em seguida, vou definir o tamanho da fonte também, tamanho da fonte, e vou fazer com que seja às 3,5 da manhã. Vou configurar esse arquivo. Depois deste arquivo, é aqui que colocamos esse círculo. Rec este arquivo, é aqui que colocamos o O mais tarde. Basicamente, quero dizer que o mentiroso O agora se posiciona no círculo da órbita e dá a aparência exata que queremos Agora, vamos criar o movimento. Para isso, precisamos entrar no arquivo estal e agora, abaixo da tag P, aqui vou criar outra tag dip, a lua de dardo Percebi neste arquivo que esse elemento seria um círculo menor que representa uma lua. Além disso, ele girará junto com a órbita. Agora vamos estilizar esse elemento da lua. Aqui dentro do arquivo de estilo, vou mirar em uma lua dentro do Claus Primeiro, vou definir altura, altura, vou definir a altura oito EM. Além disso, vou dizer com EM. Como precisamos fazer nossa lua redonda , vou usar o raio da borda, raio da borda, vou torná-la 50%, 50% Com isso, precisamos fornecer uma cor para a cor de fundo. Quero ver a cor de fundo, uma cor de fundo estreita, e aqui vou fornecer o hastag cinco, cinco, cinco, vou subdividir esse arquivo, mas quero posicionar essa mas quero posicionar lua no centro dessa órbita profunda Para isso, vamos usar a probidade do Flexbox. Dentro dessa órbita, vou digitar, exibir, flexionar, justificar o conteúdo, centralizar, também alinhar, alinhar os itens centralizados e vou subtrair Substituo este arquivo, como você pode ver, ele paga o elemento lua, centro dessa órbita Agora, vamos atribuir uma pequena caixa de sombra nesta lua, mas antes de posicioná-la, eu a tornaria absoluta aqui, vou usar a sombra de caixa para fornecer um efeito crescente. Alguns tipos de sombra de caixa aqui Eu vou usar um Vd aqui Eu uso esse valor de sombra de caixa para criar esse efeito crescente desta lua E as sombras estão espaçadas igualmente. Para o primeiro valor, aqui distribuímos 0,6 am e para o segundo valor, ela usa 1,2 am e para o terceiro valor, ela usa 1,8 am. Em cada estágio, estendemos essa sombra até 0,6 da manhã e criamos esse efeito de olá. Finalmente, precisamos trabalhar na animação giratória. Precisamos girar a órbita. Agora vamos criar a animação. Aqui, vou criar o quadro-chave nos quadros-chave vermelhos e vou nomear a rotação da animação. E dentro do menos a 100% da duração, quero aplicar a propriedade transform, transform, e aqui vou usar o valor de rotação Gire, e eu vou passar a girar 360 graus do DAG. É isso mesmo. Eu vou satisfazer. Agora, precisamos chamar essa animação em nossa órbita. Agora, vamos pular para o elemento orbital profundo, e aqui vou chamar a animação de animação e o nome da nossa animação é spin. E a duração da nossa animação é de oito segundos. A função de temporização da animação é linear. A contagem de iterações de animação é infinita porque eu quero executar essa animação por um tempo infinito, então eu passo infinito e vou definir esse valor Depois de definir esse valor, como você pode ver, ele inicia a animação e gira todo o elemento da órbita em 360 de em oito segundos Agora, precisamos esconder essa caixa quadrada e o caminho da órbita. Para isso, basta ocultar o valor da borda. Então, para digitar, alguns comentam essa propriedade. Então isso é esconder a órbita, circular, e então eu vou esconder esse valor da água do recipiente, essa caixa quadrada. E eu vou configurar esse arquivo. Depois de definir este arquivo, aqui você pode aproveitar esse lindo efeito de rotação da lua Então, espero que agora esteja claro para você como podemos criar essa bela animação. Então, obrigado por assistir a este vídeo Stadium para nosso próximo projeto. 39. Texto animado e refletível editável: É bom ver vocês, bandidos. Mais uma vez, estou de volta com uma nova animação CSS relacionada ao projeto. E hoje, neste tutorial, como você pode ver, criamos essa bela animação de texto. Aqui você pode ver como nosso texto está crescendo e também pode ver o reflexo desse texto. Além disso, nosso texto também é irritante. Deixe-me te mostrar. Suponha que, se você quiser digitar seu nome, remova o texto desse local e digite seu nome. É uma prática muito boa e um exemplo de animação CSS. Você pode usar essa animação em seu site. Isso pode dar ao seu site uma aparência muito criativa. Sem mais delongas, vamos começar o projeto e ver como podemos criá-lo. Como você pode ver, lado a lado, abro meu codaor do Visual Studio e meu navegador usando a extensão if server, e já crio um documento HTML, chamado index dot Com isso, eu vinculo o estilo de arquivo*** ao CSS. Primeiro, dentro da tag body, vou criar uma tag de cabeçalho, H dois cabeçalhos dentro dessa tag, por enquanto, vou digitar texto. Se eu definir esse arquivo, você poderá ver o resultado. Texto. É um conteúdo estático. Não podemos editá-lo em nosso navegador e, se você quiser torná-lo conteúdo adequado, nesse caso, precisamos usar um atributo e o nome do atributo é adequado para conteúdo. Deixe-me te mostrar. Aqui vou digitar o conteúdo. Editável. Eu quero tornar isso realidade. Se eu tornar isso verdadeiro e depois definir esse arquivo, agora podemos editar nosso conteúdo nosso navegador. Deixe-me te mostrar. Quero converter texto em nome. Você pode ver o resultado. Então, fizemos nossa parte da mesa com sucesso. Vamos entrar na nossa parte de design. Vou pular o estilo de arquivo CSS ou CSS. No começo, vou usar o seletor universal, digito estrela Dentro do Caliss, quero definir a margem. Margem, zero. Com isso, também quero definir o preenchimento, o preenchimento zero. Também quero usar a propriedade de dimensionamento de caixa, tamanho de caixa, caixa de borda de tamanho de caixa Em seguida, vou usar a família de fontes da família de fontes. Família de fontes, e eu vou usar a fonte aérea. Aéreo, héldico e sensorial. Se eu disser esse arquivo, você pode ver o resultado. Em seguida, quero estilizar nossa etiqueta corporal, body. Em vez disso, o Kalis é, eu quero começar com a propriedade display, display flex Ei, se você não está familiarizado com flex and read, pode conferir meu curso Em seguida, justifique o conteúdo. Centro. Também quero alinhar esse centro de itens Quero usar a propriedade de alinhamento do item, o centro do item alinhado. Nossa próxima propriedade tem altura mínima. Precisamos definir a altura mínima. Altura do homem. Altura mínima, eu quero usar 100 VH. Com isso, quero definir a cor de fundo escura. Plano de fundo, e eu vou usar o amarelo RGV. Para vermelho, vou usar cinco. Para verde, vou usar 30. E para azul, vou usar 71. Se eu definir esse arquivo, você poderá ver a cor. Você pode ver a cor de fundo azulada escura e também centralizar nosso conteúdo no meio desta página porque usamos o flexbox para alinhar E então vem a parte mais importante : o design da tag de cabeçalho H two. H dois está no CalibraSSO, a primeira propriedade é posição, posição relativa e nossa segunda propriedade é Tamanho da fonte 6:00 A.M. Se eu definir esse arquivo, você poderá ver o resultado Com isso, quero dizer espaçamento entre letras. Espaçamento entre letras, espaçamento entre letras, 15 pixels. Nossa próxima propriedade é cor significa cor da fonte, cor, e eu vou usar o valor RGVA Para vermelho, vou usar quatro. Para verde, vou usar 50. E para azul, vou usar 124. Se eu definir esse arquivo, você poderá ver o resultado. Essa cor é bem idêntica à cor de fundo, e agora vou transformar essas tomadas em maiúsculas Usa a transformação em maiúsculas. Se eu definir esse arquivo, você poderá ver o resultado. Então eu vou molhar cem por cento. Alinhe o texto, centralize e, em seguida, vem a parte muito importante deste vídeo Agora precisamos refletir esse texto. Eu quero criar um reflexo no espelho. Para isso, precisamos usar uma nova caixa de nome de propriedade reflectida. Deixe-me te mostrar. Ei, como você pode ver, eu trabalho com o navegador Chrome. É por isso que precisamos usar um prefixo. Chave web do Dash. Nossa caixa de nome de propriedade reflete. Reflita com um traço. Primeiro, precisamos declarar a direção da nossa reflexão, que está abaixo, e então precisamos fornecer o comprimento dessa reflexão, que é um pixel Se eu definir esse arquivo, você poderá ver o resultado. Isso cria um reflexo perfeito do nosso texto. Nosso primeiro valor é o valor da direção da reflexão. Nosso segundo valor é o valor oposto. E terceiro, precisamos fornecer o valor magnético. E para o valor magnético, vou usar o gradiente linear. Então, aqui vou digitar gradiente linear. Dentro do parêntese ou do primeiro valor é transparente. Nosso segundo valor é RGVA dentro dos parênteses, precisamos fornecer o Mas, primeiro, vou ligar o envoltório de água. Agora vou passar o valor ou o primeiro valor é o valor vermelho. Para vermelho, vou usar 11 para verde, vou usar 70 para azul, vou usar 138 Por fim, precisamos passar o valor Alpha. E, como você sabe, o valor Alpha é usado para transparência. Então, para o valor Alpha, vou usar 0,267 Se eu definir esse arquivo, você poderá ver o resultado. Em seguida, vou usar ponto e vírgula para finalizar essa linha. Nossa próxima propriedade é a altura da linha. Altura da linha. Para a altura da linha, vou usar 0,70 EM E a seguir, quero ativar o contorno das apostas. Vou usar a propriedade outline. Esboço, nenhum. Se eu definir esse arquivo, você poderá ver o resultado. Depois de remover o esboço, nossa reflexão é anexada ao nosso conteúdo Agora, nossa reflexão parece realista. Daí vem nossa parte final, que é animação. Então, primeiro, eu quero criar um quadro-chave nos quadros-chave de taxa Nosso nome de animação é animate. Então, dentro da resistência de Cali, como você sabe, temos que dizer dois tipos de seletores de quadro-chave Você pode usar a palavra-chave from ou two, caso contrário, você pode usar o valor percentual. Para este exemplo, precisamos usar o valor percentual. Além disso, precisamos trabalhar com vários valores percentuais, e eu já preparei o valor percentual para este exemplo. Vou copiar e quero colar aqui, colar. Então, dentro do caliss, precisamos usar nossa propriedade. No começo, quero mudar a cor do texto. Vou usar o valor da cor. Cor e eu vou usar o valor argv. E eu uso a mesma cor que uso em nossa tag de cabeçalho. Nossa próxima propriedade é tomar sombra. O tipo Sonu assume sombra. Pegue a sombra, nenhuma. Como você pode ver, eu aplico essa propriedade, 0% da animação, 18% da animação, 20% da animação, 50,1% da animação, 60% da animação, 65,1% da animação, 80% da animação, 90,1% da animação 92% da Agora, vamos chamar a animação e tentar ver se ela funcionou corretamente ou não. Então, eu quero usar a propriedade de animação. Animação. E o nome da nossa animação é animate. E o tempo de duração da nossa animação é de 1 segundo. E nossa direção de animação é linear. E para o tempo de duração da nossa animação, vou usar o valor infinito. Infinito. Se eu salvar esse arquivo, vamos ver o que aconteceu. Como você pode ver, nada está acontecendo porque, para criar o efeito de crescimento, precisamos brincar com o valor da sombra. Então, para isso, precisamos usar mais um seletor de porcentagens. Eu já copiei o seletor de porcentagem e vou colá-lo aqui Então, dentro da classe de cores, vou usar a propriedade de cor. Cor, cor branca, etiqueta Haz, se for. E agora precisamos brincar com a propriedade tee shadow. Então, a digitação usa sombra. Pegue a sombra. Primeiro, você precisa passar o valor XXS, que é zero, depois você precisa passar o Y X vero. Eu vou usar zero. Em terceiro lugar, você precisa passar o valor do desfoque Então, aqui, eu vou usar dez pixels. Por fim, você precisa passar a cor da sombra. Para a cor da sombra, vou usar RGV Vo RGB, dentro dos parênteses, vou digitar o valor vermelho seis, o valor verde 149 e o valor azul 231 Se eu definir esse arquivo, você poderá ver o resultado. Você pode ver como está piscando. Além disso, você pode ver o reflexo. E agora eu quero criar esse efeito mais atraente. Vou duplicar essa linha, copie. No próximo slide, quero duplicar essa linha. E agora eu só quero aumentar o valor do desfoque, 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver uma borda de efeito de luz brilhante desse texto. Então, depois, eu quero duplicar essa linha, mais uma vez, eu quero aumentar o valor do desfoque de 40 pixels. Então, mais uma vez, quero duplicar essa linha e agora vou usar 80 pixels Por fim, vou usar 160 pixels. Se eu remover a última vírgula e definir esse arquivo, você poderá ver o efeito Como você pode ver, agora nosso efeito crescente parece mais atraente. Além disso, também é adequado. Suponha que você queira digitar seu nome. Vou remover esse e vou digitar Smith. Você pode digitar qualquer texto aqui porque usamos conteúdo irritável Como você pode ver, o conteúdo é verdadeiro. Espero que agora esteja claro para você como podemos criar esse efeito crescente. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 40. Efeitos de animação em CSS 3D com círculos ondulados: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com uma nova animação CSS relacionada ao projeto e hoje vamos criar esse lindo carregador de círculos ondulados CSS em três D. Como você pode ver, temos vários círculos com tamanhos diferentes e como executam uma bela animação ondulada. Vamos ver como podemos criá-lo. Vamos entrar no editor de código do estúdio. Então, como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão de servidor Lip e já crio um documento ETML chamado index dot TML Além disso, vinculo este documento ao tyler CSS five. Então, primeiro, dentro da minha tag corporal, vou pegar uma tag Deep, Dev, e também vou definir uma classe para esse carregador de classes Deep Então, dentro da tag dip, vou usar a extensão múltipla da tag span Basicamente, vou usar o Spentag vazio para criar alguns círculos Para este projeto, vou usar a tag pipten span, então vou duplicar essa linha Temos um total de 15 tags de extensão para 15 círculos, fizemos nossa parte HTML com sucesso Agora, vamos entrar no arquivo CSS, estilo CSS de pontos. Aqui, primeiro, vou selecionar o seletor universal, que é estrela Então, dentro dos calibres, vou usar a propriedade de margem Margem, zero, então vou usar a propriedade de preenchimento. Preenchimento zero. Então eu configuro esse arquivo. Em seguida, vou selecionar a tag body. Aqui eu sou o tipo de corpo. Então, dentro dos aliases, primeiro, vou usar display property, display flex, Justify content, Nossa próxima propriedade é o item Align. Também é centro. E então vou dizer altura mínima para nossa página da web. Para isso, vou usar a propriedade de altura média IN height. Altura principal, 100 VH. Quero selecionar a página inteira para este projeto. É por isso que eu uso 100 VH. Nossa próxima propriedade é o plano de fundo. Plano de fundo e para plano de fundo, vou usar o valor RGV RGB Para vermelho, vou digitar 70. Semelhante ao verde, vou digitar também abnty. E para o nosso valor azul, vou digitar 70. Se eu definir esse arquivo, aqui você pode ver que nossa cor de fundo é cinza escuro e agora vou estilizar a classe Loader Então, para selecionar o carregador de pontos. No início, dentro da calira, vou usar a propriedade de posição Posição relacionada. Além disso, vou definir o peso de Haydn para este carregador, com 300 pixels Altura, 300 pixels também. Agora vou usar a propriedade mais importante, que é transformar estilo, transformar estilo. Em nossa propriedade de estilo de transformação, vou usar preservar três valores d porque quero dar ao nosso círculo três D L. Nossa próxima propriedade é transformar. Transformar. Nosso primeiro valor é a perspectiva. Prospectivos 500 pixels, e nosso próximo valor é girar o valor x, girar X. Aqui vou passar pelo ângulo de 60 graus Em seguida, vou estilizar todos os gastos dentro da classe mais antiga Então, aqui eu quero amarrar o dot loader, espaço, vou selecionar todo o theta, span Então, dentro da resina de Cali, nossa primeira propriedade é posição, posição absoluta Nossa próxima propriedade é display, display block. E agora vou definir uma borda para nossa tag de extensão. Fronteira. Cinco pixels. Vou definir uma borda com cinco pixels e quero uma borda sólida. E a cor da nossa borda é branca. Tipo Sm FFF. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver como criar várias caixas no mesmo local. Por enquanto, não está claro para nós. Portanto, nossa próxima propriedade é box shadow box shadow. E eu vou posicionar essa sombra. Zero pixel, cinco pixels e zero pixel. E também vou usar uma cor para essa sombra de caixa. Etiqueta de hash, CC. Ele fornece uma cor cinza claro à nossa sombra. Agora, com esse valor, quero usar outro valor, que é inserido Além disso, quero colocar sombra dentro de parte desses anéis. É por isso que eu uso o valor inserido. E então eu vou copiar o valor, e vou colá-lo aqui. Vou configurar esse arquivo. Nossa próxima propriedade é o tamanho da caixa, o tamanho da caixa. E aqui vou usar o valor de Border works. Além disso, vou usar outra propriedade que é raio de borda, raio de borda, raio de borda, 50% Se eu definir esse arquivo, você poderá ver o resultado. Eu sei que ainda não está claro para você, e agora vou aumentar o tamanho do círculo um por um. Para isso, precisamos selecionar todas as tags Spen, uma por uma. Então, vamos selecionar todas as etiquetas gastas, uma por uma. Tipo S: ponto, carregador ou etiqueta Spen, span. Colon, e agora vou usar o seletor de enésima criança, criança NH Primeiro, vou selecionar nosso primeiro spentag. Vou digitar um Então, dentro dos alivss precisamos posicionar nossa primeira etiqueta de gastos No começo, vou usar a propriedade superior, a primeira zero. Nossa próxima propriedade é lipped, p, também zero. E então vem nossa outra propriedade, que é inferior, inferior e também zero. E nossa última propriedade de posicionamento é correta, correta, também zero. Com isso, vou usar outra propriedade que é o atraso da animação. Atraso na animação. Por enquanto, vou deixar em branco. Eu vou te dizer mais tarde por que eu uso essa propriedade. Se eu definir esse arquivo, como você pode ver, ele cria nosso primeiro círculo, e esse é o maior círculo do nosso grupo. E para criar nosso segundo círculo, vou duplicar essa seção inteira Primeiro, vou mudar o seletor, enésima segunda criança Com isso, vou alterar o valor superior, o valor esquerdo, o valor inferior e o valor direito. Deixe-me mostrar os dez primeiros b, dez, posição inferior, dez, posição direita, dez. Se eu definir esse arquivo, aqui você pode ver que nada está acontecendo aqui. Eu não crio outro círculo porque não fornecemos nenhuma unidade. Aqui precisamos fornecer a unidade. Eu quero fornecer pixel hell de dez pixels, dez pixels e dez pixels. Se eu definir esse arquivo, agora você poderá ver o resultado. Há outro círculo dentro desse círculo. Então, um por um, vou criar esse círculo. Então, vou duplicar esta seção e aqui vou selecionar a criança três Além disso, vou aumentar os valores da posição, 20 pixels, 20 pixels para a parte inferior e 20 pixels para a direita. Se eu definir esse arquivo, você poderá ver o resultado. Ele adiciona um terceiro círculo neste grupo, e agora vou avançar rapidamente nesta seção para concluir o processo. Então, como você pode ver, concluímos o processo de criação. Se eu definir esse arquivo, você poderá ver o resultado. Você pode ver que todos esses círculos estão perfeitamente alinhados, e aqui você pode ver, e aqui você pode ver toda vez que eu adiciono um valor de dez pixels ao nosso valor anterior Em nosso seletor 13, usamos o valor máximo de 120 pixels Mas em nosso próximo seletor, ou seja, em nosso seletor 14, usamos 130 Vale Dessa forma, em nosso seletor 15, adicionamos dez pixels e passamos 140 ondas Então, criamos nosso círculo com sucesso. Agora precisamos animá-lo. Só precisamos jogar com o valor do Zatdex para criar a onda Então, vamos criar um quadro-chave para essa animação. Então, volto à seção superior e, aqui, vou criar o quadro-chave No quadro-chave vermelho. E então precisamos digitar do quadro-chave e nosso nome do quadro-chave é animado Então, dentro das calices, precisamos selecionar a posição Para selecionar a posição da animação, vou usar o valor percentual. Primeiro, vou selecionar duas posições 0% e 100%. Então, dentro da resina viva nessa posição, eu quero transformar esses círculos Então, aqui vou usar um nome de propriedade transform, Transform, e vou usar o valor Translate Z. Traduza Z. E eu quero traduzi-lo em -100 pixels na direção de Z x. Em seguida, vou selecionar 50% da posição, 50%. Então você em Cali diz, mais uma vez, eu vou usar transform probity, transform, Translate Z 100 pixels E agora precisamos chamar essa animação em nosso spentag. Aqui vou digitar a animação. Nosso nome de animação é animate. E eu quero rodar essa animação por 3 segundos. Com isso, também quero dizer que está no modo de animação. Por fim, vou passar valor da contagem de iterações da animação, que é infinito Se eu definir esse arquivo, como você pode ver, todos esses círculos se movem juntos para cima e para baixo porque usamos o índice Z em. Aqui você pode vê-lo movendo todo o círculo ao mesmo tempo. Agora precisamos usar a propriedade de atraso, atraso de animação. Usando essa propriedade, podemos atrasar nossa animação, e é muito necessário criar o círculo ondulado. Então, aqui, primeiro, vou usar o atraso de 1,4 segundo. Se eu definir esse arquivo, como você pode ver, 1,4 segundo, ele iniciará a animação do nosso primeiro filho. Da mesma forma, para nosso segundo filho, vou passar 1,3. Segundo. E para nosso terceiro filho, vou passar 1,2 segundo. E no nosso quarto, vou passar de 1,1 segundo. E para nosso quinto filho, vou passar 1 segundo. E para nosso sexto filho, vou passar 0,9 segundo. Para nossos sete filhos, vou passar 0,8 segundo. E para nossos oito filhos, vou passar 0,7 segundo. E para nossos nove filhos, vou passar 0,6 segundo. Para nossos dez, vou passar 0,5 segundo. Para nossos 11 filhos, vou passar 0,4 segundo. Para nosso 12º filho, vou passar 0,3 segundo. Para nosso filho de 13 anos, vou passar de 0,2 segundo, e para o 14º seletor de intervalo, vou passar de 0,1 segundo, e para o nosso último, vou passar de zero segundo Eu defini com sucesso a propriedade de atraso de animação, toda essa tag de extensão. Se eu definir esse arquivo, agora você poderá ver o resultado. Como você pode ver, agora ele cria círculos perfeitos na web. E agora está incrível. Na verdade, criou ondas muito bonitas. Espero que agora esteja claro para você como podemos criar essa animação de círculo na web. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 41. Efeitos de animação de rotação em CSS3 3D: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação CSS relacionada ao projeto. Neste projeto, vamos criar uma animação de rotação de CD. E aqui você pode ver a demonstração, como ela gira e como ela se inclina Então, sem perder tempo, vamos estudar a prática e ver como podemos criar esse tipo de animação em três D. Aqui você pode ver, lado a lado, que abro meu coordenador do Visual Studio e meu navegador usando a extensão lip server, e já crio um arquivo HTML chamado index dot E E eu também vinculo esse arquivo ao nosso arquivo, Style dot CSS. Então, primeiro, dentro da tag body, vou criar um DevTef e também vou definir uma classe Caixa de aula. Então eu defino essa tag dip, vou criar a tag dip, D, e vou definir qualquer classe para essa tag dip Então, dentro dessa tag dip, vou criar um total de quatro tags de extensão, span E vou duplicar essa tag de extensão três vezes. Agora somos a tag de extensão PlotLF. Se eu definir esse arquivo, você não verá nada no meu navegador. Então, fizemos com sucesso nossa parte de HTML. Agora, vamos entrar no arquivo CSS do estilizador e começar a estilizar nossos elementos Primeiro, vou começar com o body tag. Então, aqui vou digitar corpo. Então você disse que o CalSSF eu vou usar a propriedade de margem, margem zero Em seguida, vou usar a propriedade de preenchimento. Estofamento, zero. Nossa segunda propriedade é o plano de fundo. Plano de fundo, e eu vou definir uma cor de fundo. Para isso, vou usar o RGV do RGB. Para vermelho, vou usar 66. Além disso, para verde, vou usar 66, e para o azul, vou usar 66. Se eu definir esse arquivo, como você pode ver, ele preencherá nossa página com a cor cinza escuro. Você pode usar qualquer cor que quiser. E agora vou estilizar esta seção da caixa. Para isso, vou selecionar o ponto ou o nome da classe é caixa. Então, no AliSo, a primeira propriedade é posição, posição absoluta Nossa próxima propriedade é a melhor. Eu quero posicioná-lo no meio do discurso. É por isso que vou passar de 50%, 50%. Nossa próxima propriedade é essa, também 50%. Em seguida, vou usar a propriedade de transformação, Transform. Aqui eu vou usar a Perspectiva Prospectiva. Perspectiva de 1.000 pixels. Sem perspectiva, nosso modelo tridimensional não funciona corretamente. Em seguida, vou dizer Dan com largura de 200 pixels, depois altura, altura, 300 pixels. Também precisamos usar outra propriedade que seja um estilo transformado. Transforme o estilo, vou usar preserve três D will. E agora precisamos estilizar essa, essa profundidade que está dentro desse pai D. Então, aqui eu vou selecionar o espaço da caixa de pontos D. Então, dentro do Alivso, a primeira propriedade é posição, posição absoluta, e nossa segunda propriedade é topo superior, zero E também vou usar P zero. Então eu vou dizer altura e largura para esse elemento div Com 100%. Também altura, 100%. Agora, vamos definir uma cor de fundo e ver como ela fica. Plano de fundo Eu vou usar a cor branca. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que ele cria uma caixa, mas não está alinhado no meio desta página Agora precisamos alinhar essa caixa, no meio desta página. Para isso, aqui vou usar o valor calc. Deixe-me te mostrar. Então, aqui, vou digitar a função calc, CALC. Então, dentro dos versos redondos, precisamos calcular a posição, como você pode ver, nossa altura é de 300 pixels Aqui vou para menos 150 pixels. A partir de 50% do hub de posição da altura, que é de 150 pixels. Da mesma forma, vou usar a função Cal para nossa posição de elevação. O CALC está arredondado em 50% menos, aqui você pode ver, nossa largura é de 200 pixels, então vou para Agora, se eu definir esse arquivo, como você pode ver, agora nosso DV está perfeitamente alinhado no meio desta página Depois, volte para a seção dip, e aqui vou usar a propriedade transform style, transform, transform style, transform style, pressione até três D. E agora precisamos estilizar nossas tags span, que estão dentro dessa tag dip Então, aqui, vou selecionar caixa de pontos, espaço, espaço de Dave, extensão Então, dentro do AliBasso, a primeira propriedade é posição, posição absoluta E no topo zero, também é zero. Nossa próxima propriedade é display, display, e aqui vou usar block. Como precisamos definir com altura de 100% de altura, 100%. E então eu vou definir o plano de fundo. Antecedentes. E como plano de fundo, vou usar cor de gradiente linear, radiante linear Primeiro, precisamos ultrapassar o ângulo do gradiente, e nosso ângulo do gradiente é zero grau E aqui eu vou fornecer três cores. Nossa primeira cor é dólar, se um, se um, se um. Vamos começar com a embalagem da enfermaria. Agora você pode ver isso claramente. Então nossa próxima cor é a etiqueta B, B B. É uma cor cinza claro, e nossa terceira também é eu vou usar essa cor novamente. Copie a cor e cole aqui. Se eu definir esse arquivo, aqui você pode ver a cor do gradiente. Começa com a cor cinza claro, depois com um pouco de cinza escuro e, mais uma vez, com a cor cinza claro. E então eu vou dizer raio de borda para essa cor de gradiente. Deixe-me te mostrar. Raio da borda, 20 pixels Se eu definir esse arquivo, você poderá ver o raio da borda na esquina Agora, vamos remover a cor de fundo do item div pai Então, para comentar esta linha e definir novamente. Agora você pode ver o resultado. Agora precisamos selecionar todos os senteg um por um. Para isso, vou selecionar, vou digitar ponto, caixa, espaço, espaço Bev, extensão Colon, nona criança, nona criança, uma. Então, dentro da rodada versus, vou usar uma propriedade chamada transform. Transformar. Quero girar nosso primeiro filho na direção de X X. Então, aqui eu vou digitar rotate in, rotate x, e eu quero girá-lo com zero dige E então eu vou selecionar a seção inteira e duplicá-la E agora vou selecionar nosso segundo filho. E eu quero girar este na direção xs de 45 graus. Então eu vou duplicar mais uma vez. E agora vou selecionar o terceiro filho. Aqui vou dizer ângulo de rotação de -45 graus. Se eu definir esse arquivo, você poderá ver o resultado. Um por um, alternamos nossos itens de reposição. Em seguida, vou selecionar toda essa seção e duplicá-la mais uma vez e, desta vez, vou selecionar o quarto filho Agora vou definir o ângulo de rotação de 90 graus. Como eu vou configurar este arquivo. Agora vou girar a seção inteira na direção YxS Para isso, após a prospectiva, vou usar rotação Y rotação Y. vou usar rotação Y rotação Y. -45 graus. Se eu definir esse arquivo, você poderá ver o resultado. Agora parece um objeto de três e você pode ver toda a parte da tag span. Agora precisamos trabalhar com nossa parte final, que é a parte de animação. Aqui vou chamar nossa propriedade de animação Animation. Ou o nome da animação é Animate. E o tempo de duração da nossa animação é de cinco segundos. E nossa direção de animação é linear. Quero rodar essa animação por um tempo infinito. Então, aqui, vou usar a contagem infinita de iterações de animação E agora precisamos criar o quadro-chave para essa animação Então, vou copiar o nome da animação. Por fim, vou criar o quadro-chave no quadro-chave de taxa, quadros-chave e o nome da nossa animação Então, em vez dos calibres aqui, vou usar o valor percentual na posição de 0% Dentro dos aliases, vou usar transform Bbalty Transformar. Primeiro, vou dizer prospectivo. Prospectivos de 1.000 pixels. Depois de prospectiva, vou dizer rotacionar valor x. Gire, x0t. Em seguida, vou duplicar esta seção e, na posição de 100%, vou definir a rotação de 359 graus Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que ele já gira nosso objeto. Essa rotação de três D parece muito boa. Espero que agora esteja claro para você como podemos criar essa animação de rotação em três D. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 42. Nuvem chuvosa animada, parte 1: É bom ver vocês. Mais uma vez, estou de volta com um novo projeto de animação CSS. E neste projeto, vamos criar o Rainy Cloud. É um projeto de animação CSS muito avançado porque vamos usar variáveis. Vamos ver a demonstração, como está. Como você pode ver na tela, as gotas de chuva caem das nuvens e desaparecem no chão, e você pode notar as gotas de chuva aleatoriamente Sem perder seu tempo, vamos ver como podemos criar esse projeto Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo, e já crio um arquivo TML de ponto de índice e também crio um arquivo SASS de pontos de estilo Como você pode ver, vinculamos nosso arquivo de estilo a este documento ETML E, como você sabe, precisamos começar com a estrutura HTML. Primeiro, vou criar um contêiner, que conterá Cloud e Ring. Vou criar um contêiner de pontos de classe D. Como você pode ver, criamos uma classe chamada container. Então, dentro desse contêiner Dev, vou criar o Cloud. Aqui eu vou criar outra De Dev Cloud. Vou configurar esse arquivo. Agora vou pular para a seção de estilo, arquivo css de pontos de estilo. Primeiro, vou selecionar a página do documento usando o deslizamento universal para digitar estrela Então, dentro do Liss, primeiro, vou usar a propriedade de margem Margem zero. Com isso, também vou usar preenchimento, preenchimento e também zero Em seguida, vou usar a propriedade de dimensionamento de caixa, tamanho de caixa, e aqui vou usar a caixa Bader V. Por padrão, não há margem de atraso neste documento Agora vou estilizar nossa etiqueta corporal. Aqui eu vou amarrar o corpo. Então, dentro da resina de Cali, primeiro, vou usar essa propriedade lúdica, display . Tela flexível Em seguida, vou usar o Justify, o centro de conteúdo do Justify Além disso, precisamos usar outra propriedade, alinhar itens. Alinhe o centro de mensagens instantâneas. Se você não está familiarizado com flexbox e ganância , pode conferir meu curso E então eu vou dizer a altura mínima desta página. Então, para digitar altura média, altura média, cem VH. Nossa próxima propriedade é o plano de fundo. Plano de fundo, e eu vou dizer cor de fundo. E aqui, eu vou dizer algo de cor cinza escuro. Cinza escuro. Eu quero um pouco mais de cor escura. Eu seleciono a cor, essa, e vou definir esse arquivo. Essa cor é boa, por exemplo e você pode escolher sua própria cor. Agora precisamos estilizar a seção do contêiner. Vou copiar o nome dessa classe de contêiner aqui e vou digitar dot container. Então, dentro dos cliras nossa primeira propriedade é, na verdade, a posição Além disso, vou dizer altura desse contêiner, altura de algo de 400 pixels. Eu vou colocar esse lado. Agora precisamos projetar a parte da nuvem. Então, para copiar o nome da classe cloud e , em seguida, um contêiner, Amsltt Então, dentro da resina de Cali, nossa primeira propriedade é posição, relação posição Também vou dizer isso à altura desta nuvem com 320 pixels. E altura, 100 pixels. Então eu vou dizer cor de fundo, fundo e vou usar fundo branco. Para isso, vou usar hexadecimal, has tag Se eu definir esse arquivo, como você pode ver, ele cria um retângulo e precisamos dar a ele uma forma redonda É por isso que vou usar borda, raio da borda de Cuperty, raio da borda, 100 pixels Vamos definir o arquivo e C. Além disso vou posicioná-lo a partir do topo. Aqui eu vou usar a propriedade superior, os 50 pixels superiores. Eu vou configurar este. Para dar a forma de nuvem, precisamos usar o seletor posius Aqui, vou criar um seletor de posius para nuvem, nuvem e cólon Então, dentro da calivss, vou criar Blank contain blank, basicamente, vou criar uma cópia dessa nuvem A próxima propriedade é posição, posição e, desta vez, vou usar absoluto Obsolt. Em seguida, quero mover essa nova nuvem para essa posição. Para isso, precisamos usar a propriedade, top -50 pixels. Então eu vou me colocar dentro da altura dessa nuvem. Temos 110 pixels. Além disso, vou definir altura, altura e também 110 pixels. E então eu vou definir a cor de fundo. fundo e para cor de fundo, vou definir também branco. Vou configurar esse arquivo. Agora precisamos dar uma forma redonda. Para isso, precisamos usar o raio da borda. Raio da borda, 50%. Eu vou configurar este. Para o meio de plástico, precisamos mover esse círculo para o lado do lábio. Aqui eu vou usar a propriedade lift, p p 40 pixels. Se eu estiver satisfeito, você pode ver o resultado. Agora, aqui precisamos criar outra forma de círculo para criar uma nuvem perfeita. Para isso, vou criar uma sombra de caixa sólida. Deixe-me te mostrar como. Aqui eu vou usar a propriedade box shadow, box shadow. Primeiro, precisamos posicionar essa sombra. Do topo, vou dar 90 pixels. Da direita, eu vou dar zero. De baixo, também, vou dar zero e da esquerda, vou dar 30 pixels. Por fim, vou dar uma cor sólida a essa sombra de caixa. Aqui eu vou amarrar, tem etiqueta, cor branca, se for. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, criamos uma forma de nuvem perfeita usando DML e CSS Na próxima parte deste projeto, vamos criar. Obrigado por assistir a este vídeo, a próxima parte. 43. Nuvem chuvosa animada, parte 2: Que profissionais, essa é a segunda parte desse projeto. Na parte anterior, criamos a nuvem com sucesso. Mas nesta parte, vamos criar as gotas de chuva. Então, sem perder seu tempo, vamos começar. Primeiro, vou criar uma etiqueta profunda, que conterá gotas de chuva RL de pontos profundos. Como você pode ver, criamos um elemento profundo com capas de chuva Então, dentro desse elemento profundo, vou criar uma etiqueta de extensão múltipla para nossas gotas de chuva Então, aqui, dentro dessa tag profunda, vou criar uma tag span. Em seguida, vou usar o atributo de estilo nesse estilo de plano. Aqui eu vou usar variáveis CSS. Eu sei que parece um pouco avançado, mas é muito eficaz limpar uma variável CSS, precisamos usar dads sin Deixe-me mostrar como o traço e o nome da nossa variável são I, então precisamos usar dois pontos Então, precisamos usar l para definir nossa variável. Depois de dois pontos, precisamos fornecer o valor. Para obter um valor aqui, vou digitar um número aleatório, algo 11. No total, vou usar 20 gotas de chuva, mas você pode usar quantas quiser. Vou duplicar essa linha aqui, vou passar 12 Então, novamente, vou duplicar essa linha aqui, vou passar dez Você pode usar um número aleatório, qualquer número aleatório. É um pré. Para duplicá-lo, mais uma vez, aqui eu vou usar 14 Então, novamente, vou usar 18. Vamos primeiro encaminhar esta seção para economizar seu tempo. E então eu vou duplicar essa seção de trabalho novamente. Eu crio 20 gotas de chuva usando a tag span. Se eu definir esse estilo, como você pode ver, nada é paraíso aqui. Agora precisamos estilizar os pingos de chuva em nosso arquivo SSS. Quero copiar o nome da classe reinado em nosso arquivo de estilo, vou selecionar essa classe Reg Então, dentro das calibrações, nossa primeira propriedade é posição, posição relativa Nossa segunda propriedade é display, display flex. E nossa terceira propriedade é o índice Z. Um índice um. Agora precisamos estilizar as gotas de chuva. Para isso, selecionamos grão e espantago. Para isso, igualamos a seção SpantaGrg , espaço, amplitude. Em seguida, insira a primeira propriedade do AliBaso, é position relay. Nossa próxima propriedade é dnwidth, altura, dez pixels, também largura, dez pixels Agora vou definir a cor do diagrama para nossas gotas de chuva. Aqui eu vou usar a propriedade do diagrama, fundo vermelho. Vamos configurar o arquivo e ver o que aconteceu. Se eu definir esse arquivo, como você pode ver, parece uma linha de estado, mas são todas 20 gotas de chuva Vamos dar um pouco de acolchoamento à nossa chuva. Aqui vou usar a propriedade de preenchimento, preenchimento. Primeiro, para cima e para baixo, vou usar zero, e para esquerda e direita, vou usar 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Em seguida, precisamos colocar uma margem entre as gotas de chuva. Para isso, precisamos usar a propriedade de margem. Margem. Para cima e para baixo, vou usar zero e da esquerda e direita, vou usar dois pixels. Agora você pode ver que nossos deuses da chuva estão perfeitamente organizados e agora precisamos manter os pontos de chuva em forma redonda ou que precisamos usar a propriedade do raio da borda Aqui vou digitar o raio da borda. Raio da borda, 50%. Vamos configurar o arquivo e você poderá ver o resultado. Agora ele é enviado para criar a animação. Vou usar a propriedade de animação. Animação. Nosso nome de animação é animate. E a duração da nossa animação é de cinco segundos. Além disso, a direção é linear. Por fim, precisamos fornecer a contagem de iterações de animação, que é infinita porque eu quero seguir o intervalo de tempo infinito Agora, vamos adicionar o quadro-chave a essa animação. Devo digitar nos quadros-chave vermelhos , nosso nome de animação é animate Então, primeiro dentro das cálices na posição de 0%, vou usar a propriedade transform, transform e quero mover esses pontos vermelhos para É por isso que precisamos usar translate Y. Translate Y. Quero começar nossa animação de ponto vermelho da posição 0% É por isso que eu passo zero. Da mesma forma, vou duplicar essa linha e, na posição de 70%, quero movê-la 300 pixels para baixo É por isso que vou passar dos 300. Também na posição de 100%, quero usar 300 pixels. Vamos submeter o arquivo e ver se ele funcionou corretamente ou não. Como você pode ver, as animações funcionam perfeitamente com a propriedade translate Y, eu quero usar a propriedade de escala. Escale na posição de 0%, quero escalar uma vez. Então, na posição de 70%, eu quero escalá-lo mais uma vez, mas na posição de 100%, eu quero escalá-lo o. Se eu definir esse arquivo, agora você pode ver o resultado. Como você pode ver, quando nossas gotas de chuva caem no chão, elas desaparecem, não voltam à posição antiga porque usamos o valor da escala zero na posição de 100% É por isso que desapareceu quando caiu no chão. Agora precisamos mudar a posição de origem da transformação. Aqui eu vou usar transformações, e vou usar bottom Val então vem a parte mais importante deste projeto Aqui você pode ver que as gotas de chuva estão caindo juntas, mas eu não quero cair gotas de chuva assim Eu quero que as gotas de chuva caiam uma a uma aleatoriamente. E para fazer isso, precisamos brincar com a propriedade de duração da animação. Se alterarmos a duração da animação , todas as gotas de chuva cairão uma a uma aleatoriamente Se você se lembra, como você pode ver no meu arquivo SML, criamos nossa tag span com variável e nossa variável lime é I e dizemos um valor aleatório para essa variável, 16, 11, 12, etc Vou usar esse valor aleatório para criar um anel real. Vamos voltar ao arquivo CSS, e aqui vou usar a propriedade de duração da animação, Duração da animação. Além disso, vou usar a função Cal, que é uma função do CSS, e quero dividir 15 segundos com nossa variável I. Aqui vou digitar onde, dentro ressondas, o nome da nossa variável é eu para chamar nossa variável , precisamos usar traço, depois I. Se eu definir esse arquivo, agora você pode ver que nossas gotas de chuva caem Está muito bonito e agora parece gotas de chuva reais, precisamos mudar a cor das gotas de chuva, e vou usar a cor branca para Se eu definir esse arquivo, agora você pode ver que ele funciona perfeitamente. Nosso projeto está quase concluído, precisamos criar o solo e, para criar uma parte do solo no local da morte, precisamos usar a propriedade border bottom. Precisamos encontrar um contêiner aqui, vou digitar border bottom. Vou usar uma borda de dois pixels. Também quero uma cor sólida para nossa borda, sólida, nossa cor de borda é branca, se for. Se eu definir esse arquivo, você poderá ver o resultado. Como precisamos remover as gotas de chuva do fundo. Aqui vou digitar os dez pixels inferiores. Eu configurei esse arquivo, agora ele funcionou perfeitamente. Concluímos com sucesso nosso projeto de nuvem e chuva. Espero que você goste desse vídeo. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 44. Carregamento de CSS: É bom ver vocês. Mais uma vez, estou de volta com um novo projeto de animação. E, como você pode ver nesta animação, como a animação de carregamento funciona. Então, sem perder seu tempo, vamos ver como podemos criá-lo Então, aqui você pode ver lado a lado, eu abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor L, e eu já criei um documento HTML chamado index dot HTML. Com isso, você também cria ou estiliza seu arquivo CSS. Então, primeiro, dentro da tag body, vou criar a tag H two. H dois. E dentro da tag HT, vou digitar Blod. Em seguida, ponto ponto ponto. Mas na minha tag H two, vou usar data atr. Aqui estou digitando dados, texto de dados. Então, igual a dentro do curso duplo, vou passar pelo mesmo carregamento de texto. Copie o texto e cole-o dentro do curso duplo. Se eu definir esta página, você poderá ver as imagens no meu navegador. Esta é a nossa parte da estimativa. Agora precisamos entrar no arquivo CSS. Primeiro, vou importar um formulário. Deixe-me atirar. Aqui você vê que eu importo pop in sporm e a fonte é 700 em negrito, e agora vou selecionar o seletor universal Star dentro do caliss ou da margem da primeira propriedade Margem, zero ou segunda propriedades, preenchimento e agora vou selecionar o seletor universal Star , preenchimento, também zero ou terceira propriedade é tamanho da caixa, tamanho da caixa, caixa E então eu vou usar a propriedade da família de fontes, família de fontes, família de fontes, e aqui vou usar pop-ins. Esta fonte é da família sensory. Sopkoma, vou digitar Sanseri. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver o resultado da fonte. Você pode usar qualquer tipo de fonte. Depende de você. Agora, vamos ladrilhar nossa seção corporal. Eu uso o corpo. corpo dentro do alias é nossa primeira propriedade exibida, e eu vou usar linho Eu quero colocar esse texto no meio do discurso. É por isso que vou usar o flex. Então, nossa próxima propriedade é justificar conteúdo, o centro de conteúdo Justify Além disso, vou alinhar esse item. Alinhe o centro do item. Se eu definir esse arquivo, você pode ver o motivo. Então eu vou dizer altura mínima. Aqui vou digitar altura mínima, altura mínima, 100 VH. Com isso, também, quero dizer antecedentes. Como plano de fundo, vou usar a cor RGV, RGB. Além disso, você pode usar qualquer cor mais escura, mas aqui vou usar uma largura três, valor verde é 40 e o valor azul é 53 Se eu definir esse arquivo, você pode ver o. Você pode usar qualquer cor de fundo suja. Depende de você. Em seguida, vou estilizar esse H para amarrar. Aqui eu vou empatar H dois. Então, dentro dos fígados, vou digitar a posição Posição relativa. Nossa próxima propriedade é o tamanho da fonte. Tamanho da fonte. 14 VW. Se eu definir esse arquivo, você poderá ver o resultado. Agora está perfeito. E agora vou definir a cor da fonte. Aqui eu vou amarrar a cor e vou usar a mesma cor RGV Estou copiando o valor e vou colá-lo aqui. Vou configurar esse arquivo e agora você pode ver que ele combina com a cor do plano de fundo É por isso que você não consegue ver a cor. Nossa próxima propriedade é taketro. Para isso, novamente, vou usar a cor RGV. Mas desta vez, vou trocar o véu e o nosso é dois, 108 e para azul, vou usar 146 Se eu definir esse arquivo, você ainda não poderá ver esse traçado porque não dizemos traçado. É por isso que vou passar de 0,3 VW. Se eu definir esse arquivo, agora você pode ver o motivo. Além disso, você pode aumentar esse golpe. Depende de você, e agora precisamos replicar a forma usando o Poseo select Para isso, vou digitar H de dois cólon e cólon antes. Em seguida, dentro dos calores ou primeiras propriedades contidas. E aqui eu vou usar a função de água. Agora precisamos passar esse atributo, texto de dados. Eu copio esse atributo e, aqui, vou passar um texto de dados. Se você perceber, poderá ver nosso texto de dados e nosso conteúdo é semelhante. É por isso que ele criará a mesma réplica. Nossa próxima propriedade é a posição. Eu quero posicioná-lo de forma absoluta. Então precisamos usar o pedal superior top zero, P também zero. Além disso, vou dizer que, por enquanto, pesamos de 30 pixels Se eu definir esse arquivo, você não verá nada porque não definimos nenhuma cor e altura para esse elemento. Para isso, vou usar a propriedade de altura. Altura, 100%. Além disso, vou usar cores. Pinte e aqui, vou usar uma identificação hexadecimal, hash tag Se eu definir esse arquivo, agora você poderá ver o resultado. Por enquanto, vou definir com zero. Isso não vai impactar nada. Mais tarde, vou mostrar por que precisamos usar com propriedade. Antes de fazer qualquer coisa, quero esse texto em maiúsculas. Aqui vou usar a propriedade de transformação de texto, mas antes vou usar ponto e vírgula Em seguida, vou digitar text transform text transform, em maiúsculas E então também precisamos definir o traçado para esse clone. Aqui eu vou usar essa propriedade e valor e depois da cor, vou colá-los. Mas desta vez, vou trocar o véu. Aqui eu vou passar zero VH. Acidente vascular cerebral com zero VH. Se eu definir esse arquivo, você poderá ver o resultado. Se você pode notar, aqui você pode ver não há nenhum derrame neste clone Nossa próxima propriedade é transbordante, transbordamento escondido. Defina este arquivo, agora você pode ver o resultado. Como você pode ver, nossa largura é zero e excesso é zeran, por isso você não consegue ver o texto Mas se eu aumentar o valor da largura, deixe-me mostrar 40 pixels e depois definir esse arquivo, você poderá ver o resultado. Como você pode ver um lento, parece o texto com a cor. Da mesma forma, se eu aumentar o valor, 90 pixels e depois definir esse arquivo, você também poderá ver o resultado. Na animação, precisamos brincar com essa propriedade, W. Por enquanto, vou tornar o W zero e depois definir esse arquivo. Em seguida, vou usar outra propriedade, que é fronteira. Border, certo. Borda direita, e eu vou usar borda sólida de dois pixels. Sólido. Além disso, vou usar uma cor decimal HA 01 DE FEVEREIRO DE 87. Se eu definir esse arquivo, você poderá ver o resultado. Se eu aumentar a largura dessa vez, então aqui vou passar 120 pixels e depois definir esse arquivo. Como você pode ver, parece que essa linha tem a cor desse texto. Mais uma vez, vou passar de zero. E agora precisamos brincar com a animação. Eu vou criar uma animação. Animação e nosso nome de animação é Animate. E eu quero executar essa animação por 6 segundos e nossa direção de animação é linear, e eu quero executar essa animação por tempo infinito. Aqui eu vou usar infinito. Agora precisamos criar o quadro-chave. Aqui estão os quadros-chave da taxa. Quadros-chave e nosso nome de animação é animate. Como você pode ver, eu digito a grafia errada para animar. É por isso que vou corrigi-lo. Vou digitar o nome animate. Então, dentro do caliss na posição 0%, novamente, dentro da resistência de Cali, vou definir com Vou duplicar esta seção. Agora, na posição de 70%, vou definir com 100%. Se eu definir esse arquivo, você poderá ver a animação, como ela funcionou, funcionou perfeitamente. Se eu jogar com algum valor percentual com 0%, vou passar de 10%. Além disso, com 10%, vou passar de 100%. Na posição de 0%, posição de 10% e posição de 100%, quero um traçado com zero. Mas com 70% da posição e 90% da posição dessa animação, eu quero a semana 100%. Se eu pisar nesse arquivo, agora ele terá uma aparência perfeita, como funciona. Isso é exatamente o que queremos. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 45. Animação de texto em Javascript com efeito brilhante, parte 1: Olá, pessoal, mais uma vez, estou de volta com uma nova animação JavaScript relacionada ao projeto. Nesta lição em particular, vamos criar esse lindo efeito flutuante. Você pode ver quando passamos o mouse sobre esse texto, esses efeitos acontecem Como você pode notar, o texto brilha da esquerda para a direita. Além disso, você pode notar que todas as letras tinham cores diferentes. Quando eu o afasto, esse efeito de luz desaparece. Criaremos esse efeito usando DML, CSS e um pouco de JavaScript. Vamos começar a criar como podemos construir esse. Como você pode ver, lado a lado, abro meu código de estúdio Wizard aer e meu navegador usando extensão de servidor b e já crio um documento HTML chamado indexdt TM Com isso, eu já crio o arquivo CSS estilizado e vinculo esse arquivo a este documento Em seguida, também crio um arquivo Js de raiz de script. Por enquanto, nosso arquivo CSS e script de estilo e o arquivo Script DJs completamente vazios Primeiro, dentro da etiqueta corporal, vou pegar uma etiqueta H dois, H dois. Dentro dessa tag H two, Amuotype JavaScript, animação, essa, e então eu vou definir Depois de configurar esse arquivo, é assim que é obrigatório. Em seguida, vou atribuir uma classe à tag H two, para digitar class, e o nome da nossa classe é texto. E eu vou configurar esse arquivo. É esse arquivo, agora vamos pular para o estilo ou arquivo CSS. Primeiro, vou usar um seletor universal, estrela. Então, dentro do ali versus primeiro, vou definir margem, margem e preenchimento Margem, vou dizer margem zero para toda a direção. Então eu vou dizer acolchoamento. O preenchimento também é zero. Em seguida, vou definir o tamanho da caixa. Tamanho da caixa, vou torná-la caixa de borda. Em seguida, vou definir a família da fonte, a fonte, a família e vou usar a fonte aérea, área na qual vou definir esse arquivo Depois de definir esse arquivo, é assim que ele se parece. Em seguida, vou mirar na etiqueta corporal. Corpo, depois a propriedade calissF, vou usar display Esta peça, eu vou fazer com que ela se desfaça. Em seguida, justifique o centro de conteúdo. Também alinhe o centro do item. Na próxima propriedade, vou usar a altura mínima, altura mínima, e aqui vou definir a altura mínima, 100 v Vote height. Em seguida, vou definir a cor do plano de fundo. Cor de fundo, e aqui vou usar a cor de fundo, tem a tag 222, é uma cor cinza escuro Se eu definir esse arquivo, é assim que ele se parece. Em seguida, vou direcionar a tag H two, o cabeçalho para a tag, H dois dentro dos cálices. Primeiro, vou definir a posição da posição, vou torná-la relativa Em seguida, vou definir o tamanho da fonte, o tamanho da fonte e vou fazer com que seja de três valores M EM e, em seguida, vou transformar essas tomadas em maiúsculas para digitar texto, transformar maiúsculas digitar texto, transformar Depois disso, vou adicionar um pouco de espaçamento entre letras. Para isso, vou digitar o espaçamento posterior e vou usar o valor EM de 0,05 Em seguida, vou usar a propriedade cursor, cursor, e vou tornar o curs padrão. Depois disso, vou definir a fonte como oito. Vou digitar a fonte para oito e quero usar o mínimo de fondwd, então vou usar 500 e vou definir esse Depois de definir esse arquivo, ficou assim. Se eu aumentar um pouco o fundo, se eu fizer 700, vamos ver como ficou, acho que 700 é bom para ele Agora vamos para o arquivo JavaScript. Agora, o que fazer. Primeiro, precisamos separar todo o texto dessas palavras e colocá-lo em uma tag span. Cada caractere dessa palavra, precisamos colocá-lo em uma tag span. Então, mais tarde J, precisamos agir em uma tag span. E da mesma forma, precisamos agrupá-lo A em uma tag de extensão, depois a, depois C. É assim que vamos agrupar cada caractere desse texto em uma tag de extensão. Depois disso, vamos estilizar esse personagem, e vamos fazer isso usando JavaScript. Primeiro, vou selecionar o elemento H dois e vou armazená-lo em uma variável. Primeiro, vou definir uma variável AET Late e nossa variável n é texto Texto equivalente a aqui, vou usar um método dom chamado document Quis lector Ciector, então, dentro das rodadas está aqui, vou escolher o nome da classe Aqui, vou direcionar o nome da classe, nosso nome de classe é texto com pontos e semirredondo nesta linha Basicamente, aqui eu tenho como alvo essa tag H two, esse elemento H two usando seu nome de classe com a ajuda do Javascript Dom. Agora, precisamos embrulhar cada letra em uma etiqueta de extensão. Então, aqui, vou definir outra variável ALT e o nome da nossa variável é spans Extensões iguais ao texto, ensinadas em nosso texto, em nosso método de texto Agora, o que basicamente fazer em um texto? Basicamente, ele extrairá o texto dessa variável. Se eu imprimir essa variável no meu console, deixe-me mostrar algum tipo de log de pontos do console, log pontos do console dentro do Run Brass, vou passar os spans do nome da variável Depois de configurar esse arquivo, se eu te mostrar meu console no meu navegador, Ispatle Aqui você pode ver o texto, animação em JavaScript. Você extrai o texto usando o método de texto interno. Agora precisamos recuperar cada caractere, caso contrário, individualmente posteriormente, porque precisamos pegá-lo dentro de uma tag de extensão, e podemos fazer isso facilmente usando a função de velocidade Aqui eu digito dot split. Esse método. Então, dentro dos vestidos redondos e dentro da roupa redonda, quero dividir o texto por cada caractere É por isso que eu uso essa expressão regular. Basicamente, aqui passamos uma string vazia e é uma matriz escrita. Quem vai armazenar todos os personagens espiões nele. Se eu definir esse arquivo, como você pode ver, ele é escrito e está em matriz. Que armazenam cada personagem separadamente, animação em JavaScript. É uma técnica de expressão regular e, se eu passar um espaço , ela armazenará apenas dois itens de matriz, JavaScript e animação. Deixe-me te mostrar. A fornece espaço se eu definir esse arquivo, como você pode ver, desta vez ele é armazenado nesta matriz totalizando dois índices, JavaScript e animação. Vamos cuspir esse texto usando uma string vazia, não por espaço Então, configuramos esse arquivo, voltamos à posição anterior. Todos esses são elementos de matriz. Agora eu quero dar uma olhada nesse Ay. Para isso, você vai usar o método map. Depois da função de divisão, vou digitar o mapa de pontos Mthood aqui, precisamos passar o valor e o índice Para o valor como primeiro parâmetro, vou salvar a letra. Eu vou passar uma carta. Então eu vou passar, depois vou passar I I por índice. Basicamente, esse método examina a matriz e cria uma nova matriz. Lembre-se, aqui eu represento o número do índice. Se passarmos zero, então ele representará J. Se passarmos um, se passarmos um índice, ele representará A. Se passarmos dois, ele representará. É assim que funciona. Em seguida, dentro desse método de mapa, eu quero chamar uma função. Quero criar uma função, deixe-me mostrar aqui que vou usar a função de seta igual ao sinal de seta dentro do alias que diz: vou retornar. Retorne, e aqui vou usar o modelo literal. Aqui eu vou usar backticks. Dentro desses backticks, eu quero retornar uma tag span. Eu quero retornar uma tag span, span. Dentro da etiqueta de extensão, vou usar o cifrão e dentro dos escultores aqui, vou passar a letra, essas variáveis Essa variável. Eu copio a variável letra e vou colá-la aqui. Então, configuramos esse arquivo, como você pode ver, esse método de mapeamento percorre cada caractere e aqui colocamos cada caractere dentro dessa tag span. Aqui você pode ver que cada tag de span contém um caractere. E agora precisamos converter essa matriz em uma estimativa normal. Precisamos injetá-lo em nosso documento HTML. Para isso, vamos usar o método Join. Então, em todas as corridas aqui, vou usar a junção de pontos. Método de junção. Vou juntar todas as matrizes separadas vdus agora, se eu definir esse arquivo, você poderá ver o resultado diferente Agora você pode ver no meu console que é um único texto. Não é mais uma matriz. Basicamente, é uma string, e precisamos colocar essa string dentro do documento TML Basicamente, precisamos colocá-lo dentro da tag de cabeçalho. Para isso, como você pode ver, já direcionamos a tag de cabeçalho usando seu nome de classe e a armazenamos em uma variável chamada texto. Aqui vou digitar texto, texto com pontos, ponto interno, ML e igual a ela para fornecer o nome da variável chamada spans Agora, se eu definir esse arquivo e voltar para a seção de elementos, agora você pode ver dentro do elemento da tag HT, que temos várias tags de extensão para cada caractere. Então, aqui colocamos com sucesso cada caractere em uma tag span com a ajuda do JAScript Mas há um problema. Ele fornece vírgula entre todos os personagens. Precisamos resolver esse problema. Se eu te mostrar meu console, aqui você pode ver a vírgula Para isso, dentro da minha função de junção, vou juntá-la com um fluxo vazio e, em seguida, vou definir esse arquivo novamente. Depois de definir esse arquivo, como você pode ver, ele resolve o problema 46. Animação de texto em Javascript com efeito brilhante, parte 2: Agora vamos entrar novamente no arquivo CSS de estilo. Em seguida, vou selecionar essa caneta que está dentro da caneta H two, H two space pen. Então eu disse a propriedade ClivusSF , vou Colorido, e eu quero usar essa cor, Hastag 555, essa cor cinza claro, e vou configurar Depois de configurar esse arquivo, como você pode ver, ele mudou a cor. Ele mudou todas as cores dos personagens de uma só vez. Além disso, vou adicionar uma pequena transição, transição e caça em 0,25 segundos, essa quantidade de Então, abaixo dela, quando eu passo o mouse sobre isso, H dois, H dois, dois pontos, então eu quero carregar a extensão que abrange o calibre novamente, vou usar vou Pinte e eu vou usar essa Hashtag 00 FF two A, esse código de cores, essa cor verde clara Vou definir esse arquivo, configurar esse arquivo, se eu passar o mouse sobre ele, você pode ver o resultado, como é apenas a cor Então, para dar um efeito brilhante, vou usar sombra de texto Digite sombra de texto, esta. Aqui eu uso essa sombra suspensa e vou definir esse arquivo. Depois de configurar esse arquivo, nessa sombra projetada, se eu passar o mouse sobre esse link, você poderá ver esse lindo efeito de iluminação por causa dessa sombra Em seguida, adicionarei atraso de transição detalhado em nosso texto extenso. Para isso, precisamos entrar no arquivo Js com script e, aqui dentro da tag span, vou usar a tag style É um método de estilo embutido, igual às aspas duplas, vou usar a propriedade chamada transition Atraso na transição. Atraso na transição, então vou adicionar a cotação N de aspas duplas e dentro dela, aqui vou usar novamente aqui, novamente, vou usar o cifrão Então, dentro do CarlSSF eu vou passar o número do índice, que é I. Então eu vou multiplicar o número do índice 14 e vou definir esses cinco Depois de configurar esse arquivo, é assim que ele se parece. Opa, também é necessário definir a unidade. Aqui me passe o segundo MH. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu passar meus carros sobre esse texto, aqui você pode ver o belo efeito de transição por causa desse atraso na transição Para esse atraso de transição, aqui usamos o valor do índice. Com o índice, multiplicamos por 40. Toda vez que o primeiro índice for multiplicado por zero Em seguida, ele vai se multiplicar por um. Em seguida, ele vai se multiplicar Pois, ele vai se multiplicar por dois. F A, ele vai se multiplicar por três vezes 40. Então, ele retornará resultado diferente. Meu segundo resultado. Por causa desse atraso, ela criou essa bela transição. Você pode notar que nossas letras brilham uma após a outra. Em seguida, vamos mudar a cor de cada letra usando a propriedade de filtro CSS. Da mesma forma, dentro dos códigos duplos, adicionarei outra propriedade chamada filtro, filtro, dois pontos e usarei Huotd Value Hu para girar. Você gira. Dentro das rodadas, lá dentro eu vou usar o cifrão. Depois, dentro da civilha e depois dentro da caris, vou passar, indexar, multiplicar por 30, 30 graus Fora do tipo Cl versus Amil, una o EG. Depois de definir esse arquivo, se eu passar o cursor sobre esse elemento, você poderá ver um resultado diferente Você pode ver esse lindo texto colorido. Como você pode ver, cada personagem representa uma cor diferente. É feito com cores diferentes. É assim que podemos criar esse lindo efeito de animação de texto em faixa Java. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto Espero que você goste desse projeto. 47. Efeito paralaxe para sites: Hoje, vou criar esse lindo efeito de animação Paralex Como você pode ver, quando percorri minha página, ela moveu as montanhas e as folhas do mar Então, vamos ver como podemos criar esse lindo efeito de animação do Parlex com a ajuda de JavaScript, CSS e HTML Então, finalmente, estou no meu editor de código vis studio. Como você pode ver, eu já criei o arquivo TMLFle com pontos de índice, arquivo css com pontos de estilo e o script com o ponto JS five Além disso, você pode ver no meu diretório de trabalho atual que temos uma pasta chamada imagens dentro desta pasta, temos todas as imagens, como hell Image, Hill two, L four, Hill five, leaf e plant. Além disso, o coqueiro, esse. Essas são todas imagens PNG, e eu vou usar todas essas imagens para criar esse efeito paralítico Então, vamos ao ponto cinco do índice. Primeiro, dentro da etiqueta corporal, vou pegar outra etiqueta chamada headtag Então, dentro desse ataque na cabeça, primeiro, vou pegar um título para a tag H two, e aqui vou digitar Logo. Além disso, vou atribuir uma classe à tag H two, alguma classe de tipo, e também o nome da nossa classe é logotipo. Então, dentro desse ataque na cabeça, aqui, vou pegar uma etiqueta de soneca, etiqueta de navegação nervo e vou adicionar uma classe a essa etiqueta de soneca, classe, e vou digitar Então, dentro dessa etiqueta de soneca aqui, vou pegar a etiqueta âncora A. Em seguida, vou adicionar nosso primeiro elemento âncora, nosso elemento vizinho Então eu duplico esta seção e vou dar um nome a ela Além disso, vou duplicar esta seção e, desta vez, finalmente vou chamá-la de serviços, vou adicionar contato Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parecia. Agora temos o logotipo e a barra de navegação. Agora, vamos entrar no arquivo CSS e estilizar a seção do corpo. Estou no meu arquivo CSS. Primeiro, dentro do meu arquivo CSS de estilo, vou importar uma fonte. Vou importar a fonte do Google, que são pop-ins. Eu vou usar esse. Depois disso, aqui, vou selecionar o seletor universal, iniciar Então, dentro da aula aqui, vou adicionar um pouco de estadia Primeiro, vou adicionar margem. Margem, e eu vou definir a margem por padrão, vou definir a margem zero. Então eu vou usar o preenchimento. Preenchimento, por padrão, vou dizer preenchimento zero. Depois disso, vou usar o tamanho da caixa. Caixa. Dimensionamento, tamanho da caixa, caixa de borda Então eu vou usar a propriedade da família de fontes, família de fontes, e aqui, eu vou usar os PINs duplos Poppins P O, Poppins, este e apacoma aqui, e eu vou ultrapas San sim, este, e eu vou configurar este arquivo. Depois de definir este arquivo, se eu voltar ao meu navegador, agora você pode vê-lo remover a margem de preenchimento padrão, além de alterar a fonte, fonte padrão para fonte pop-ins Agora, vamos voltar ao código do estúdio Visual. Depois disso, dentro do arquivo CSS de estilo, vou selecionar a tag body, body. Então, dentro da primeira propriedade das calices , vou usar o plano de fundo Plano de fundo, e eu vou definir essa cor. HaTagff nove, se nove uma cor cinza claro. Então eu vou dizer altura mínima. Altura do homem, altura mínima, vou dizer que é 100 de altura da janela de visualização Em seguida, vou direcionar a tag de cabeçalho, essa, essa seção de cabeçalho. Então, copio o cabeçalho do nome da tag e aqui vou digitar o cabeçalho. Em seguida, dentro dos calibradores. E primeiro vou definir a posição da posição e quero torná-la absoluta. Depois disso, de cima, quero colocá-lo em zero e, da esquerda, também vou colocá-lo na posição zero. Em seguida, vou definir a largura. Vou definir com 100%. Vou usar 100% da largura desse tamanho de tela. Em seguida, vou definir o preenchimento. Preenchendo de cima para baixo, vou usar 30 pixels e para a esquerda e para a direita, vou usar 100 pixels Em seguida, vou usar essa propriedade, exibir flex e justificar o conteúdo, justificar o conteúdo Vou usar flex start, flex start e alinhar IAM, align, IAM center Também vou definir o índice Za e vou dizer índice Za 100, vou definir este. Aqui usamos o Flick Start porque eu quero o logotipo e a guerra de navegação no lado esquerdo da nossa tela É por isso que usamos flix Start para garantir que o cabeçalho fique visível, independentemente do elemento adicionado. Eu digo índice Z 100. Agora, depois de definir esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parece. Agora você pode notar que temos preenchimento na parte superior, 30 pixels e na parte inferior 30 pixels e, no final, aqui temos preenchimento de 100 pixels também da direita, cem Em seguida, vou estilizar esse logotipo, então vou segmentar esse logotipo. Agora vou focar no logotipo. Vou digitar o logotipo dot LOGO. Em seguida, dentro da classe Aqui, primeiro, vou definir o tamanho da fonte, o tamanho e vou chegar ao EM Depois disso, vou definir a cor. Pinte e aqui vou usar esse código de cores da variante vermelha, este, e vou configurar esse arquivo. Além disso, precisamos definir alguma margem à direita, algum tipo, margem direita, passagem de rebanho de 270 pixels porque eu preciso de um espaço entre o logotipo e os elementos da rede. Eu predefino esse arquivo Se eu voltar ao meu navegador, é assim que fica. Agora vamos direcionar o menu de navegação. Vamos voltar ao código e, primeiro, vou usar a navegação do nome da classe, então copio o nome da classe e volto ao arquivo stylo css Então digite, pontue, navegue e, dentro dessa navegação, eu quero direcionar todo o texto âncora dentro das calices Dentro das cores está a primeira propriedade em que vou usar decoração de texto, decoração texto, e vou fazer com que não seja nenhuma. Não quero nenhuma decoração de texto. Quero remover o sublinhado. Em seguida, precisamos definir a cor. Pinte aqui, vou usar exatamente a mesma cor, essa, que usamos para o logotipo, vermelho escuro. Em seguida, vou definir o preenchimento. Preenchimento de cima para baixo, vou usar preenchimento de seis pixels e da esquerda e direita, vou usar preenchimento de 15 pixels Depois disso, vou definir o raio da borda, o raio da borda Raio da borda, vou fazer 20 pixels. Além disso, vou adicionar uma pequena margem. Vou digitar margem. De cima para baixo, atribuirei Margem zero e, da esquerda e direita, atribuirei dez pixels a Marin Depois disso, vou adicionar uma pequena fonte a ela, a espessura da fonte, aqui vou atribuir uma fonte a ela 600. Eu quero uma fonte pequena em pedregulho e, finalmente, vou adicionar uma pequena transição a ela, transição, e aqui vou adicionar a duração da transição de 0,5 segundo Vou configurar esse arquivo. Depois de definir esse arquivo se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parecia. Agora eu quero adicionar Olá, quando eu passo meu cursor sobre a âncora que emite Quero alterar a cor da fonte e a cor do plano de fundo ao passar o mouse sobre ela Então, volte ao código e, desta vez, vou criar um seletor Huber usando o Ancat Então, dentro do clirass aqui, primeiro, vou mudar o plano de fundo, o plano de fundo Vou fazer um fundo dessa cor. E nossa fonte. Para a fonte, vou digitar a cor e vou torná-la branca. Eu vou satisfazer. Depois de verificar se eu voltar ao meu navegador e ao Huber meus carros estão nesses elementos negativos, você pode ver o resultado É assim que parece quando os carros I Hoberm estão nele. Dizia cor de fundo vermelha e cor da fonte branca. Agora vamos trabalhar nas imagens que usamos para criar o efeito de paralaxe Vamos entrar no código do estúdio. Como você pode ver no meu personagem de trabalho atual, temos as imagens do nome da pasta. Primeiro, vou pular para o arquivo de ponto de índice H. Em seguida, uma seção de cabeçalho, vou criar uma seção. Vou usar uma seção de tag de seção e, aqui, vou atribuir uma classe, e o nome da nossa classe é paralaxe Então, dentro desta tag de seção, primeiro, vou tirar uma foto. I G. E aqui, vou passar a fonte da imagem. Dentro dos códigos duplos, vou digitar o nome da pasta images e, a partir dessa pasta de imagens, primeiro, vou adicionar essa imagem, hill dot PNG. Em seguida, vou atribuir um ID de ID ao Hill e vou duplicar esta seção Uma por uma, adiciono todas as imagens da colina. E da mesma forma, adiciono três imagens de salto e planta. E eu vou configurar esse arquivo. Então, temos que somar oito imagens, cinco imagens de colinas, uma imagem de árvore, uma imagem de folha e a última é imagem de planta. Então, para configurar esse arquivo, se eu voltar ao meu navegador e você puder ver, esta é a nossa primeira imagem de colina. Esta é a nossa segunda imagem da colina, esta é a terceira, esta é a quarta, esta é a quinta, esta é a árvore. Esta é a folha, esta é a e esta é para as plantas. Precisamos juntar todas as imagens. Mas antes, também vou adicionar outra tag, que é H dois para o texto. Aqui vou digitar H two e dentro desse h2d vou digitar ParalyxParalyx Em seguida, vou atribuir ID a essa tag H two, ID, vou torná-la texto e vou definir esse arquivo. Agora, vamos pular para o bloco seu arquivo CSS e direcionar a paralaxe D. Aqui, vou direcionar o ponto D paralelo, paralexo e dentro dele, depois dentro das calibragens depois A primeira propriedade, vou usar a posição. Posição, vou torná-la relativa. Em seguida, vou usar a propriedade de exibição. Display, vou usar o Flix. Depois disso, vou justificar centro de conteúdo e alinhar os itens e alinhar os itens também Então eu vou atribuir altura, altura e aqui vou usar altura 100 VH. Depois de definir esse arquivo. Se eu voltar ao meu navegador, você pode vê-lo colocando todas as imagens próximas umas das outras. Agora vamos voltar ao código do estúdio. Em seguida, vou esconder a área de transbordamento. Estouro, está escondido. Depois disso, para dar a forma exata que queremos, precisamos selecionar as imagens que estão dentro da profundidade da paralaxe Aqui eu vou digitar dot parallax, imagem ING, então dentro do Carlss aqui, eu vou passar posição, posição, primeiro, vou Então eu vou adicionar o valor máximo, máximo, e vou passar de zero. Em seguida, vou usar o valor da cama. Como eu vou passar de zero. Depois disso, vou desafiar a umidade, e aqui vou colocar 100% de maconha Em seguida, vou definir o evento do ponteiro. Pointer events, aqui, vou usar Nun Valu. Nenhuma. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que nossas imagens se parecem. Juntos, eles formam esse lindo fundo. Razão pela qual isso está acontecendo porque a imagem, toda a imagem, foi projetada apenas para essa finalidade. A resolução deles é a mesma. Essa é uma visualização dividida em várias imagens. Isso é tudo para este tutorial. Na próxima parte deste tutorial, concluiremos essa animação. Obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 48. Efeito paralaxe para sites parte 2: Olá, é bom ver você de volta. Essa é a segunda parte deste tutorial. Como você pode ver na parte anterior, organizamos todas as imagens no lugar certo e criamos essa bela visão. Essa é uma visualização dividida em várias imagens. Agora, vamos trabalhar na tag H two. Vou entrar no editor de código do Visual Studio e, se eu mostrar meu arquivo estimado de índice, aqui você pode ver as duas tags, dois textos de ID. Vou usar o texto do nome de ID e vamos entrar nesse arquivo CSS de estilo. Aqui, primeiro, vou segmentar, vou segmentar o texto usando seu nome de ID. Então, dentro do ibas aqui primeiro, vou definir a posição, alguma posição de tipo, vou torná-la posição absoluta absoluta Depois disso, vou definir o tamanho da fonte, e aqui vou dizer o tamanho da fonte cinco EM. Em seguida, vou definir a cor, a cor do texto, cor e vou usar a cor branca, tem a tag if if A. Depois disso, vou usar uma pequena sombra de texto. Mas antes de usar essa sombra de texto, vamos voltar ao navegador. Suponha que esse arquivo, se eu voltar ao meu navegador, é assim que ele se parece com o efeito Perlix Agora, vamos adicionar um pouco de sombra para dar um pouco de profundidade. Vamos voltar ao código do Studio e à sombra de texto do tipo Hem. Pegue a sombra, e eu vou usar essa sombra, e vou me contentar se eu voltar ao meu navegador, é assim que parecia Agora, ele fornece pouca morte neste texto. Agora, vamos adicionar a seção de conteúdo. Vamos entrar no código do Studio e entrar no arquivo de estimativa de pontos do índice. Depois desta seção, aqui, aqui, eu vou adicionar uma nova seção, Seção, depois dentro desta seção, mas antes eu vou adicionar uma classe, e eu vou chamá-la de conteúdo. Então, dentro desta tag de seção, primeiro, vou pegar uma tag H dois, H dois. Então, dentro dessa tag H two, tipo hemo, site de rolagem paralela Então eu vou pegar uma tag de parágrafo. Dentro dessa tag de parágrafo, vou pegar um texto fictício para rolar Eu preciso de conteúdo para rolar. Digite m, adicionarei quase 750 palavras e configurarei esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador, e é assim que ele se parece. Agora, precisamos estilizar essa seção de conteúdo. Então, vamos adicionar alguns estudos. Vou entrar no coordenador do estúdio e vou usar open style ou CSS five. Vou começar a estilizar. Primeiro, vou ver a seção de conteúdo usando seu nome de classe dot content. Lá dentro da classe, primeiro, vou definir a posição e a posição, vou torná-las relativas. Depois disso, vou definir a cor de fundo, o plano de fundo e, para esse plano de fundo, vou usar exatamente a mesma cor vermelha, essa. Copie o código de cores e eu vou colocá-lo aqui. Depois disso, vou adicionar um pouco de preenchimento de todas as direções, preenchendo 100 pixels de todas as Depois de satisfazer se eu voltasse ao meu navegador, ficou assim. Acho que essa cor vermelha é muito vibrante, então vou tentar combinar com essa cor Vamos mudar o código de cores e desta vez vou usar essa cor. Algo corresponda a esse plano de fundo e volte ao meu navegador novamente. Agora, combina bastante com essa cor de fundo. E então precisamos mudar o texto. Precisamos organizar o texto. No início, vou segmentar essa tag de cabeçalho, então o Hemo digite dot content H two, header to tag Depois disso, dentro da coluna ResSF, vou definir o tamanho da fonte, o tamanho da fonte, vou usar três tamanhos de fonte EM Então eu vou definir a cor. Cor e cor do hemótipo branco. Hastag, se for. Então eu vou definir margem, margem na parte inferior. Na margem inferior, vou passar dez pixels. E vou ficar satisfeita Se eu voltar ao meu navegador, é assim que parece. Depois disso, precisamos estilizar essa seção de conteúdo. Para isso, novamente, vou entrar no arquivo CSS e, desta vez, vou segmentar o conteúdo de pontos do conteúdo e quero segmentar o parágrafo. Então, primeiro dentro das cores, vou definir o tamanho da fonte, o tamanho da fonte, vou usar o tamanho da fonte um EM depois disso, vou definir a cor do texto, cor, Hen para defini-la, branco, tem tag, tem tag, se for Finalmente, quero usar um telefone um pouco mais leve, então tenho três fontes, peso 300 Vou configurar esse arquivo. Depois de definir este, volto ao meu navegador. Agora é assim que parecia. Agora está melhor e temos conteúdo suficiente para rolar. Portanto, concluímos com sucesso nossa parte de estilização e agora precisamos trabalhar no efeito paralexo Para isso, precisamos entrar no arquivo JavaScript. Vamos entrar no arquivo JavaScript, script dot js. Em primeiro lugar, precisamos direcionar esses elementos. Eu quero dizer essas imagens, eu quero mover quando eu rolo para baixo na minha página. Para isso, vou declarar uma variável atraso e nosso primeiro nome de variável é texto, THT Primeiro, quero direcionar o texto usando o texto do nome de ID igual ao documento que obtém elemento por ID. Aqui vou passar o nome de identificação. Então, dentro dos vestidos redondos, vou passar o texto do nome de identificação e o semícone nesta linha Então, da mesma forma, vou mirar na Colina 4, na Colina 5 e na Colina 1. Além disso, vou mirar na folha. Vou copiar a folha do nome de ID e voltar para o arquivo JS do script. Vou duplicar essa linha e, desta vez, vou para a folha de destino e a armazeno nessa variável de folha e passo a folha do nome de ID Então eu vou mirar na Colina 1, Colina 4 e na Colina 5. Então, a partir daqui, vou mirar na Colina 1. Copie seu nome de ID e aquele para o arquivo Js do Scribb e eu dupliquei essa linha no total duas vezes Desta vez, vou mirar na Colina 1. Então eu vou mirar na Colina quatro, no inferno quatro, e também vou mudar o nome de identificação na Colina quatro e, finalmente, vou mirar na Colina cinco, H cinco. Não é uma folha cinco, é uma colina cinco, então eu copio inferno, não folha e substituo folha por colina. Portanto, direciono com sucesso os elementos que desejo mover ao rolar minha página para baixo, como este texto, a primeira colina e a quarta colina e a quinta colina, também a folha. Eu não quero selecionar esse coqueiro e isso e essas plantas. Não quero selecioná-los. Eu quero mover apenas a colina de fundo. Eu quero ver a primeira colina, a quarta colina e a quinta colina, também a folha e o texto. É por isso que eu seleciono todos eles e os armazeno em uma variável em diferentes variáveis. Esses são os elementos que eu quero animar. Agora vamos trabalhar no efeito. Então digite, Window, dot e até mesmo listener. Então, por dentro, o redondo diz, primeiro, eu quero rolar Se eu rolar, quero executar uma chamada para essa função. Aqui estou para usar a função de seta. Então, dentro do crass, basicamente significa que qualquer código que escrevemos dentro dessa chamada função, quando eu rolar, ele executará esse código Dentro dessa função, vou criar uma nova variável mais tarde e nossa variável está bem. Valor T igual ao henótipo e eu quero extrair o valor da rolagem Y, janela do tipo Su, e aqui precisamos extrair o valor da janela do tipo Scrolly, ponto, rolagem, Y e subterminar esta linha porque precisamos apenas da rolagem e subterminar esta linha Y xs, não da rolagem de Xs para executar o efeito de paralaxe Basicamente, vai exceder a distância vertical. Agora vamos trabalhar nos elementos que eu quero mudar. Agora, para obter o valor, primeiro eu quero mudar a posição do texto ao rolar minha página para baixo. Eu quero adicionar uma pequena margem. Eu quero adicionar uma margem no topo deste texto, para que ele se mova para baixo Para isso, vamos usar o método de estilo, deixe-me mostrar como. Então, digite o herói, primeiro, vou digitar o nome da variável. Que armazenou esse texto, W é texto, texto, ponto, estilo, ponto, eu quero adicionar o valor máximo da margem. Margem, no topo. Então, igual ao torque da margem, então eu vou atribuir um valor. Igual a aqui, eu vou passar. Basicamente, vou usar modelos literais. Vou usar carrapatos nas costas. Então, dentro dos ticks invertidos, vou usar o cifrão, depois dentro do Carlss, depois dentro do crass, primeiro, vou fornecer o valor, o valor que obtemos desse pergaminho, algum valor de tipo, e vou multiplicá-lo quero multiplicar por 2,5 Toda vez que eu rolar minha página para baixo, ela muda o valor e se multiplica por 2,5 pixels e, em seguida, fornece a unidade PX. É isso mesmo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e tentar rolar para baixo nesta página, aqui você pode ver o resultado. Sempre que eu rolo para baixo nesta página, como você pode ver, esse texto adiciona uma nova margem na parte superior. Da mesma forma, vamos mover outros elementos no lado esquerdo e no lado direito. Deixe-me te mostrar como. Vamos ao código do estúdio, e desta vez vou duplicar essa linha, e vou focar no estilo Folha, e desta vez, quero mover essa folha do topo Estilo tipo hemo, ponto, parte superior. Acima disso, aqui eu quero multiplicar -1,5 menos 115 pixels Aqui, eu quero fornecer um valor negativo. Então, quando eu rolar minha página para baixo, ela fornecerá o valor negativo, valor negativo dinâmico para essa propriedade superior. Da mesma forma, vou fazer essa linha e, desta vez, quero mover esse elemento da folha no lado do lábio, PT e aqui, vou passar o valor, vou passar o valor positivo. Vou configurar esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador. Mas antes de adicionar algo legal, é necessário Caso contrário, ele pode gerar um erro. Então, de volta ao navegador, se eu rolar na minha página, aqui você pode ver, você pode notar a folha. Sempre que eu rolo minha página para baixo, ela fornece pouco efeito de afastamento. Como você pode notar, ele se afasta dessa costura porque aqui usamos menos o valor superior e o valor esquerdo positivo É por isso que ele se move para cima e para o lado esquerdo. Da mesma forma, precisamos lidar com a colina cinco, colina quatro e a colina um. Deixe-me te mostrar como. Vou duplicar essa linha e, desta vez, vou mirar na Colina 5 Eu quero mover esta colina de cinco elementos lado esquerdo e fornecer da mesma forma também. Vai se mover para a posição dos lábios. Então eu dupliquei essa linha, e desta vez vou mirar na Colina 4, e quero mover essa colina 4 na direção oposta Então, aqui eu vou usar negativo do, fim, a elevação negativa do, temos outro elemento que é a colina cinco e eu quero mover esse elemento para cima. É a colina de fundo. É por isso que eu quero movê-lo para o topo. Então, vou passar a propriedade superior, parte superior e aqui, vou alterar o valor. Vou usar apenas um pixel. Toda vez, de acordo com o valor dinâmico, ele se multiplica por um Opa, nossa colina de fundo não é a colina cinco, é a colina um, não cinco É o principal inferno terrestre. Então, depois de satisfazer, se eu voltar ao navegador novamente e rolar esta página, agora você pode notar esse lindo efeito de paralaxe Espero que agora esteja claro para você como podemos criá-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 49. Olhos animados que seguem o cursor do mouse: Olá pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação Javascript relacionada ao projeto. Hoje, neste projeto, vamos criar esses lindos olhos animados. Como você pode ver, quando eu Huber meus carros estão sobre esse elemento da carroceria, essa etiqueta de carroceria, segue os carros apontados Se eu mover os carros para cima, ele segue para cima se eu mover os carros em p, ele segue o lado da volta, também de baixo e também da direita Se eu colocar minha cor na face dessa Imoge, dá para ver que ela mudou a reação facial Também segue o cursor do mouse. Então, hoje, neste projeto, vamos criar esses lindos olhos animados, que seguirão o cursor do mouse. Então, vamos ver como podemos criá-lo. Vamos entrar no editor de código do Visor Studio. Como você pode ver, lado a lado, abro meu iter de código do Visual Studio e meu navegador usando a extensão lip server, e já crio um documento HTML chamado index dot TML Eu já vinculo esse documento HTML ao arquivo CSS, estilo dot CSS Primeiro, dentro da tag body, vou criar uma classe De Dev e o nome da nossa classe é phase. No começo, quero criar a fase. Então, dentro dessa tag profunda, vou criar outra classe D D. Nesta seção, vamos criar Is of our pace. Então, dentro desta seção, vamos criar dois Is DV Class I. Vou duplicar essa linha Então, fizemos com sucesso nossa parte estável. Primeiro, criamos uma tag para a fase. Então, dentro dessa tag anterior, criamos um bloco para Is e, em seguida, passamos para outra tag profunda para dois Is. Agora, vamos entrar na seção de estilo. No começo, vou pegar uma estrela seletora universal. Inicialmente, dentro do alorss, vou usar a propriedade de margem Margem zero. E então vou usar a propriedade de preenchimento, preenchimento zero e caixa de borda de tamanho de caixa Em seguida, vou marcar a etiqueta corporal , o corpo dentro do display flex da Caliss, o centro de conteúdo Justify Eu uso o flex container para alinhar o centro da face desta página Em seguida, vou usar a propriedade align item. Alinhe o centro de itens. Altura mínima, altura média. Cem VH. Quero usar toda a página da web. É por isso que eu uso 100 VH. E nossa última propriedade é o plano de fundo. Antecedentes. Para cor de fundo, vou usar RGV Value RGV para vermelho, vou usar oito E para verde, vou usar o valor 84. E para azul, vou usar 139. Se eu definir esse arquivo, você poderá ver a cor de fundo. Para este projeto, vou usar a cor de fundo azul escuro. E agora eu quero estilizar a parte do ritmo. Então, eu quero estilizar ponto, face dentro do recesso de Cali. Primeiro, vou usar a propriedade de posição, posição relativa, e nossa próxima propriedade é Largura, 300 pixels Também quero dizer altura, altura, 300 pixels também. Nossa próxima propriedade é o plano de fundo. Antecedentes. E mais uma vez, vou usar o valor RGV RGV para valor vermelho, vou usar 255 Para o valor verde, vou usar 198. E para o valor azul, vou usar 54. Se eu definir esse arquivo, você poderá ver a caixa quadrada na tela. E agora precisamos converter essa forma quadrada em uma forma redonda. Para isso, vou usar a propriedade border radius. Raio de borda de 50%. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, vou usar a propriedade de exibição. Tela flexível. Justifique o centro de conteúdo. Também vou usar o centro de propriedades do item Align. Ei, se você não está familiarizado com CSS Flexbox e ganância, você pode conferir meu curso de CSS responsivo Então, moldamos nosso rosto com sucesso. Agora precisamos colocar a boca nessa fase. Para isso, vou criar dois pontos Pasol, antes do seletor, antes Em seguida, insira a carissa como você já sabe. Primeiro, precisamos pegar uma propriedade em branco e o nome da nossa propriedade está contido Contido em branco, então nossa próxima propriedade é a posição. Posição absoluta. E então eu vou dizer altura e largura, largura, 150 pixels, altura, 70 pixels. E agora vou escolher a cor de fundo. Chocolate de fundo. Se eu definir esse arquivo, você pode ver uma retangular no meio dessa face E agora precisamos mover essa fase um pouco para baixo. Para isso, vou usar o valor máximo. 180 pixels superiores. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que nossa boca parece uma caixa quadrada e, para criar um formato de boca perfeito, precisamos usar a propriedade do raio da borda Em primeiro lugar, quero definir um raio de borda nesse canto. Para isso, vou usar o raio de elevação inferior da borda. Limite o raio de elevação da parte inferior, e eu vou usar 70 pixels Se eu definir esse arquivo, você poderá ver o resultado. Em seguida, vou duplicar essa linha e substituir a esquerda por Se eu definir esse arquivo, aqui você pode vê-lo criar uma forma de sorriso, e agora eu quero mudar o movimento da boca quando abro o cursor sobre ele. Para isso, precisamos criar outro seletor. Deixe-me te mostrar. Ponto, rosto, cólon sobre, cólon antes. Dentro dos cálices, vou reutilizar esse valor e propriedade Vou copiar a propriedade e o valor. E cole aqui. Agora, um por um, vou substituir esses valores. Primeiro, vou alterar o valor máximo de 210 pixels. Se eu definir esse arquivo e Ober meus carros estiverem nele, você verá a diferença É mudar a posição da boca e, em seguida, vou mudar esse raio do bôer Raio zero do lábio inferior inferior. Além disso, o raio inferior direito da garrafa é zero. Se eu definir esse arquivo e colocar meu cursor nele, você pode ver a diferença, mas não há transição nessa transformação Para isso, precisamos usar a propriedade de transição. Então, aqui, vou digitar a transição. Transição de 0,5 segundo. Se eu definir esse arquivo e meus carros estiverem nele, você poderá ver o efeito de transição. Demora 0,5 segundos para concluir a transformação. Então, concluímos com sucesso nossa seção bucal. Vamos entrar na seção I. Como você pode ver, dentro do contêiner I, temos I. Então, vamos criar os Is desse ritmo. No início, vou estilizar a seção I como ponto Em seguida, dentro dos fígados está a posição relativa e quero posicioná-la no topo de -40 pixels Vou usar a propriedade display, display flex. Usando essa propriedade e valores, movemos com sucesso nossa seção I naquele local, não no meio dessa fase. E então precisamos criar o I. Vou selecionar a classe Is. Além disso, vou selecionar a classe I. Então, dentro do CalibraSso, a primeira propriedade é a posição. Posição relativa. E também vou dizer altura e largura para isso I Width, e ty pixel, heightetipixl Depois de largura e altura, vou dizer cor de fundo. Antecedentes. Por quê? Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, lado a lado, ele cria duas caixas quadradas com largura e altura típicas. E então eu vou usar essa propriedade de jogo, bloco de exibição. Em seguida, vou usar a propriedade border radius. Raio da borda, 50%. Se eu definir esse arquivo, você pode ver a diferença. Aqui você pode ver lado a lado, ele cria dois globos oculares, mas não há espaço entre dois globos oculares Então, para isso, vou usar a margem Bobbet Margin, zero e 15 pixels Se eu definir esse arquivo, você pode ver a diferença. No geral, esse valor de margem fornece 30 pixels de espaço entre esses dois olhos, e agora precisamos criar os globos oculares para esses olhos No começo, vou copiar essa linha. E eu vou colar aqui. Com I, vou usar antes do seletor, Cl e cólon Em seguida, insira o Cardiorss como você sabe, primeiro, precisamos criar um conteúdo em branco Contenha espaço em branco. Nossa próxima propriedade é a posição. Posição absoluta. Além disso, precisamos colocá-lo. Vou usar o melhor valor, os melhores 50%. Vamos definir 25 pixels e, para nossos olhos, vou definir com 40 pixels Também tem altura de 40 pixels. Em seguida, vou usar a cor diground para nosso globo ocular, fundo e vou usar o valor RGV Argv, para verde, vou passar 42. Então, para o vermelho, vou passar de 42 mais uma vez. Também para azul, vou passar 42. Defina este arquivo, você pode ver o resultado. Como você pode ver, ele cria duas caixas quadradas cinza escuro, mas precisamos torná-las redondas. Então, vou usar o raio da borda O raio da borda 50%. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver nossos olhos olhando para baixo nesse ângulo, mas eu quero mudar o ângulo de visão dos olhos, algo nessa posição. Para isso, vou usar a propriedade transform, transform, translate -50% para XX também é -50% para Y xs. Se eu definir esse arquivo, você poderá ver o resultado. Agora é um loop nesse ângulo. Se eu mostrar minha cura nessa fase emocional, você pode ver a reação Mas as bolas de gelo não seguem a posição curva. Para isso, precisamos usar JavaScript. Então, concluímos com sucesso nossa parte de estilo. Na próxima parte deste vídeo, trabalharemos com JavaScript. Então, obrigado por assistir a este vídeo. Fique ligado na próxima parte. 50. Olhos animados que seguem o cursor do mouse adicionando Javascript: Olá, pessoal, é bom ver vocês de volta. Esta é a segunda parte deste tutorial e, nessa seção, iniciaremos o JavaScript. Então, dentro da tag body, aqui, vou digitar a tag script. Roteiro. E dentro da tag de script aqui, primeiro, vou selecionar o corpo inteiro usando o seletor Qi Então, para digitar o seletor Qui de pontos do documento. Método selecionado. Então, dentro dos vestidos redondos, quero selecionar o corpo. Então, dentro do código único, eu sou do tipo BO BY body. E então eu quero organizar um evento. Então, para executar um evento, precisamos usar o método add event listener, algum tipo dot at event listener E dentro dos vestidos redondos, aqui, eu quero executar o mouse move Evet Dentro do código único, eu escrevo o movimento do mouse. Depois da vírgula, aqui, vou chamar uma função e o nome da nossa função é eyeball Em um globo ocular e semicone para a linha N. Agora, precisamos criar essa função eval. Mas a questão é: o que eu basicamente faço? Basicamente, aqui dissemos evento de movimentação do mouse em toda a página. Eu quero dizer o corpo. Quer dizer, sempre que eu mover meu Karsar dentro dessa etiqueta corporal, ele retornará a localização exata do CarSr, como xxS YxS, posição superior, posição correta, etc E toda vez que movermos o mouse dentro da etiqueta corporal, ele chamará essa função, essa função do globo ocular Agora precisamos criar a função. Aqui, vou declarar nome da função Ker usando a função Q, e o nome da nossa função é eyeball Como você pode ver, isso já me sugere porque eu chamo essa função, então digite I ball. Função e nosso nome de função é eyeball. Essa função vai lidar com a lógica do movimento I. Então, dentro dos portadores depois dentro dos carliras, vou declarar uma variável onde e nossa variável n é I EYE I igual a aqui, vou digitar o ponto do documento Então, dentro dos versos redondos, dentro do curso único, vou definir que esses dois tipos de Is Som são o nome da classe Vou segmentá-lo usando sua classe depois o tipo de música dot EYE e o semicroon two nesta linha Basicamente, ele selecionará os elementos que têm a classe I e, como você pode ver, temos dois elementos profundos com a classe I. Essa linha basicamente seleciona todos os elementos com a classe I e retorna em nós como uma matriz, armazenamos a matriz na variável I. Agora precisamos executar um loop. Precisamos executar um loop em cada um dos elementos I. Então, aqui, eu vou correr para cada loop. Eu ponho para cada um para cada um. Então, dentro da redonda novamente, vou chamar uma função Função e, dentro do recesso redondo que vou passar , aqui executamos um loop para cada um dos Em seguida, dentro dos cálices, precisamos calcular a posição central do elemento I. Em termos de XXs e YxS, XX significa horizontal e YX significa coordenadas verticais na tela Então, aqui, eu vou declarar uma variável. Primeiro, vou declarar um Tlate X. Isso é para Xxsvdu X, a posição I igual ao heterótipo dentro do motipo redondo I dot, e vou usar uma chamada de método get bounding client react e vou usar uma chamada de método get bounding client react. Digite get bounding client react. Então eu quero extrair o ponto de elevação iluminado com isso, eu quero concatenar com o interior dos versos redondos, eu pontuo a largura do cliente, divido por, e eu quero dividi-lo e eu quero dividi-lo Agora, o quotien é o que isso significa? Deixe-me explicar para você o que isso significa? O que eu basicamente faço aqui. Como eu disse, aqui, vamos calcular a posição central do elemento I. Primeiro, extraímos o X xs. Aqui declaramos uma variável chamada X e dentro do latão redondo, primeiro, aqui extraímos I dot, gate bounding client react Agora, a questão é: o que basicamente esse método de reação do cliente que delimita portas Ele fornece a posição e o tamanho do elemento, relacionados à janela de visualização Eu quero dizer a janela do navegador. É um objeto escrito como este, 100 na primeira posição 200 com 50, altura, 50, etc Aqui extraímos, basicamente aqui extraímos a borda final de um elemento I, essa borda. Em seguida, continuamos com a largura do cliente em 1 ponto dividida por dois. Agora, o que isso significa? A largura do cliente retorna a largura interna do elemento. Esse método retorna a largura interna desse elemento. Suponha que se o I tiver 50 pixels de largura , ele retornará ao cliente com 50. Então eu divido essa largura de 50 pixels por dois. Eu vou devolver 25. Quero dizer, isso lhe dará a posição central horizontal. Aumente a largura, forneça a posição central horizontal desse I, desse ponto Se você contatenar os dois valores, esquerda H e a metade da largura, ele retornará o centro horizontal da linha de Da mesma forma, precisamos extrair o centro vertical. Eu dupliquei esta seção desta vez, quero mudar a variável, vou torná-la Y. É para YxS para direção vertical E em vez de usar o valor do laboratório, vou usar o valor superior, o valor superior e agora temos o valor superior e a metade da largura e ele retornará o centro vertical do I. A conclusão principal é que X e Y juntos fornecem o cliente x e o cliente para I do elemento I. E essas duas coordenadas são usadas para calcular o ângulo do I até o mouse, que possamos girar o I na direção do tapete Então, agora temos a posição central disso I. Em seguida, precisamos calcular. Precisamos calcular o ângulo entre o mouse e o I. Para isso, precisamos usar o método matemático. Então, aqui, vou declarar uma variável LET tardia e nossa variável é radiana porque vamos extrair o valor radiante Radiano igual ao coração. Ei, vou usar um método chamado math dot, e amotipia em dois Em seguida, dentro do rounderse uma posição de pageY do motpevent. Evento, página Y, posição Y, menos YxS e Da mesma forma, precisamos extrair o X xs. Evento, ponto, página x, página x menos Xs Agora deixe-me explicar essa linha. O que basicamente fazemos aqui. Como eu disse, essa linha calcula o ângulo entre o centro do I e o ponteiro do mouse Agora a pergunta é: o que é matemática em dois? É uma função JavaScript inédita. É escrito o ângulo entre o Xs positivo e o ponto, como XY, e retorna o ângulo em valor radiante É útil encontrar a direção de um ponto a outro, manipulando todos os administradores corretamente. Nesse caso, estamos encontrando o ângulo do centro do I até o ponteiro do mouse Então esse é o ponteiro do mouse e esse é o centro do I. Então, precisamos extrair o ângulo, esse ângulo E aqui fizemos um elemístico. Primeiro, precisamos trabalhar no X xs vdu. Então precisamos trabalhar no YX d y. Aqui, precisamos passar esses dois parâmetros Agora, o que isso significa? O que é o pH do evento menos X? Significa a que distância o mouse está da horizontal I na direção horizontal, e esta representa a distância que o mouse está da vertical I. Vai representar a direção vertical. Basicamente, este retorna valor Delta X e este retorna o valor Delta Y. Sei que parece muito técnico, mas esse cálculo nos dá o resultado. Agora, a questão é por que calculamos isso? Usamos o ângulo para girar o I para que ele aponte para o cursor do mouse Agora precisamos converter esse valor radiante em valor de grau porque, em nosso estilo, precisamos aplicar o valor de grau, não o radiante Aqui, vou declarar outra variável AET atrasada e nome da nossa variável é raiz T. Raiz tardia significa rotação Dentro das rodadas, primeiro, vou passar o radiano Multiplique o radiano com o interior das rodadas, 180 dividido pelo ponto matemático Dot Pi. Então eu vou fechar o latão redondo e aqui eu vou digitar, eu quero multiplicar com, eu quero multiplicar com Então eu vou fechar o latão redondo. Então, fora e depois fora do processo redondo, vou adicionar mais, vou congnatar com 270 e semicon para finalizar Essa linha converte o ângulo de radiante em valor de grau. Depois disso, ele ajusta a rotação para fazer com que o I aponte corretamente para as mães Basicamente, aqui usamos uma fórmula. Grau igual ao brilho, multiplique por 180 por Pi Então é isso que fazemos aqui. Depois disso, multiplicamos por menos um. Multiplique o ângulo por menos um para inverter a direção. Aqui, invertemos a direção. Isso é necessário porque o sistema de coordenadas da tela é varrido verticalmente em comparação com o armazenamento de coordenadas matemáticas padrão Sem isso, o I poderia girar na direção errada e, em seguida, adicionamos 70, adicionamos 70 graus para alinhar o ponto inicial de rotação com o topo Agora, a questão é por que usamos 270? Por que usamos esse vedo? Podemos usar qualquer coisa, mas por quê? Porque no CSS, zero grau está voltado para a direita, 90 graus está voltado para baixo, 180 graus está voltado para o elevador e 270 graus está voltado para o elevador. Isso garantirá que as direções I comecem do topo e girem corretamente. Primeiro, convertemos o brilho em graus. Em seguida, invertemos a direção usando multiplicar menos um. Em seguida, invertemos a direção para uma rotação visual escura. Por fim, alinhamos a rotação com o padrão voltado para cima do I. Eu sei que parece muito técnico Agora temos o valor de rotação I. Se você quiser imprimir esse valor em seu console, você pode, mas não vou imprimi-lo aqui. Em seguida, vou aplicar esse valor de rotação ao nosso elemento I usando o método de estilo. Deixe-me te mostrar como. Aqui, nossa variável de tipo I, ponto , estilo, ponto e eu quero aplicar a propriedade de transformação. Transforme, igual a aqui, sou do tipo. Dentro dos códigos duplos, vou passar uma string. Dentro do código duplo, vou digitar girar, girar Então, dentro da grama redonda, novamente, vou usar códigos duplos e dentro da grama dupla porque vou digitar espaço, concatenar com aqui vou passar EG e semicoronta nesta linha. E eu vou configurar esse arquivo. Agora eu pressiono definir este arquivo. Se eu passar o cursor sobre essa seção do corpo, agora você pode vê-la seguindo o cursor, os globos oculares seguindo o ponteiro do cursor Então é assim que podemos obter olhos animados seguindo o cursor do mouse se for essa animação. Então, espero que agora esteja claro para você, obrigado por assistir a este vídeo do próximo projeto do SaduneFW 51. Animação de texto colorido: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo projeto de animação em JavaScript. E neste tutorial, vamos criar um efeito de cor de texto bonito e muito legal com animação CSS e Javascript. Aqui você pode notar que a cor das letras muda aleatoriamente e também está piscando Vamos gerar uma duração de animação aleatória. Além disso, atrasa a animação para criar esse efeito. Então, vamos entrar no editor de código do estúdio de resultados e ver como podemos fazer isso Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server, e já criei um documento HTML chamado index dot HTML. Então, primeiro, dentro da tag body, aqui, vou pegar o Htag HT Element, este, título dois, e vou atribuir uma classe e vou atribuir um texto Depois disso, dentro dessa tag H two, vou digitar um texto colorido. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o sabor no meu documento. Em seguida, vou entrar no arquivo CSS de estilo. Primeiro, vou usar a estrela seletora universal e, em seguida, dentro dos aliases, primeiro, vou atribuir a mesclagem a esta página, margem de toda a direção, vou usar zero Em seguida, vou atribuir preenchimento, preenchimento e vou definir o valor do preenchimento também zero em toda a direção Em seguida, vou usar o tamanho da caixa. Vou usar o valor da caixa de garrafas. Depois disso, vou usar a família de fontes. Fonte. Família, aqui vou usar fonte aérea, área em que vou configurar este arquivo Depois de definir esse arquivo, você pode ver o resultado. Então eu vou estilizar a seção do corpo, corpo. Então, dentro do Cali , ele diz: primeiro, vou definir display, display e quero torná-lo flexível Depois disso, vou atribuir justificar o conteúdo, justificar o centro de conteúdo e alinhar o centro Nós o usamos porque precisamos alinhar esse elemento vertical e horizontalmente Depois de definir esse arquivo, você pode ver o resultado. Agora está no centro horizontal, mas se fornecermos a altura mínima, a altura média, se eu definir a altura da janela de visualização de 100 e definir esse arquivo, você poderá ver Agora você pode vê-lo horizontal e verticalmente no centro desta página Em seguida, vou selecionar H two tat usando seu nome de tag H two. Então, dentro da propriedade Kali versus primeira, vou usar a posição e quero usar a posição relativa Depois disso, vou usar o tamanho da fonte, e aqui vou usar o tamanho da fonte três EM. Então eu vou usar o espaçamento entre letras do Ppertico mais tarde, e eu quero usar o espaçamento entre letras, 0,2 e 5:00 A.M. E então eu vou usar texto, propriedade de transformação, transformação de texto, eu quero torná-lo eu Depois disso, quero definir fontut. Quero usar a espessura da fonte do tipo de fonte um pouco mais ousada. Eu quero definir 500. Em seguida, vou definir a cor, a cor desse texto, a cor desse texto, algum tipo de cor. E aqui eu quero usar um tipo de cor cinza escuro. Então, vou usar a tag de hass F se for duas. Vou configurar esse arquivo. Depois de definir esse arquivo, ele fica pouco visível por causa da minha cor de fundo, pois não defino nenhuma cor de fundo. Se eu usar uma cor de fundo escura, deixe-me mostrar o plano de fundo. Vou definir a hashtag 222, fundo cinza escuro Se eu definir isso para, você poderá ver o resultado. Fizemos nossa parte de estilo CSS. Agora precisamos entrar no script dot js five. Agora precisamos colocar todo o caractere de texto dentro desse Pantag Primeiro, vou declarar uma variável, que selecionará o elemento H dois usando o nome da classe, algum tipo t, e o nome da nossa variável é texto Texto atrasado igual ao documento, seletor CID, seletor CID, dentro dos latões redondos, dentro dos códigos únicos, eu quero selecionar a tag H two usando seu nome de classe dot TXT, texto Em seguida, vou selecionar o texto interno dessa variável. Aqui, vou digitar outra variável. Vou declarar LET tardiamente e nossa variável é HTML HTML, span spans, TML spans iguais a texto, ponto, ML interno DML e semi Agora, se eu definir esse arquivo e imprimir no meu console, algum tipo console, log de pontos dentro do processo redondo, se eu imprimir essa variável de extensão HTML, extensão HTML e, em seguida, definir esse arquivo e se eu mostrar meu console, inspecionar, console, aqui você pode vê-lo imprimir texto colorido Agora temos o texto inerte desse T eliminado. E agora eu quero selecionar todas as letras. Então, aqui vou usar o método dot speak. Cuspir. E dentro das rosas redondas aqui, vou usar um barbante vazio. Eu quero cuspir usando uma corda vazia e Semgrodon para terminar esta uma corda vazia e Semgrodon para terminar Depois de configurar este arquivo, aqui você pode ver no meu console, agora temos que contar 13 caracteres, incluindo um espaço. Agora é criar uma matriz, e todos esses são elementos da matriz. E então eu quero criar uma nova matriz, que pode envolver cada letra dentro de uma tag de extensão. E para criá-lo, vamos usar o método. Então, para digitar um mapa de pontos. Então, dentro desse método de mapa, precisamos passar para o parâmetro. O primeiro parâmetro que eu quero passar depois. O segundo parâmetro, eu quero passar index e I significa index. Depois disso, aqui, vou usar a função de seta igual à seta. Então eu vou usar o Ciss. Então, dentro dos versos de Cali, eu quero voltar, voltar Em seguida, vou usar esse tick um método de string de modelo. Então, dentro dos acentos cravos aqui, vou usar a tag span, span seguida, fechar a tag span E aqui, eu vou usar o cifrão. Então, dentro dos aliases, vou passar a variável letra Vou chamar essa letra de letra variável. Então, vou colocar todas as letras uma a uma dentro dessa caneta com a ajuda dessa função e método de mapeamento. Agora, estou fechando esta linha, se eu definir esse arquivo, você pode ver no meu console, Harry, criar uma nova área. Mas você pode notar que agora colocamos todo o caractere dentro de uma tag span. Em seguida, precisamos converter essa matriz em string regular porque precisamos inseri-la em nossa página Eval, e faremos isso usando o método join. Então, aqui para não se juntar. Então, dentro das redondas, você precisa passar uma corda vazia como Agora, depois de definir esse arquivo, como você pode ver, agora ele se converte em uma string E está pronto para ser inserido em nossa página de estimativas. Agora eu quero colocar essas extensões de ESTiml dentro deste texto. Para isso, aqui vou digitar texto e quero definir o EstiML interno tipo de ponto DML interno igual a aqui vou passar o nome da variável HTML span e subcon para Agora, se eu salvar esse arquivo e voltar para a seção de elementos e abrir essas duas tags, agora você pode ver que temos tags de extensão e eu coloco todos os caracteres dentro das tags de extensão. Ele basicamente inspecionará essa tag span usando JavaScript. Não usamos nenhum trabalho do ESTiml. Agora vamos ao CSS para trabalhar na animação. Para definir esse arquivo, vou pular para esse bloco ou arquivo CSS. Primeiro, aqui, vou criar o quadro-chave. Vou digitar no quadro-chave de taxa. Esse é o quadro-chave de animação e nosso nome de animação é texto animado. Depois, na aula com 0% de duração, 0%. E vírgula com 20% de duração da animação. Eu quero dizer cor, cor, eu quero dizer colorido. Eu quero dizer a mesma cor, essa, essa cor cinza escuro. Depois disso, vou duplicar esta seção, depois com 21% de duração e 79% de duração Eu quero usar a cor verde. Vou usar a tag has zero F zero. E então eu recebo esta seção e com 80% de duração, 80% e 100% de duração da animação, novamente, eu quero usar essa cor de fundo escura. Este, e eu vou submeter este arquivo. Em seguida, tenho que colocar essa tag span, que está dentro da tag two do tipo two span Então, primeiro dentro do caribrass, vou definir a posição e quero torná-la relativa Depois disso, depois disso, quero definir animação, animação e o nome da animação é texto de animação, este. Eu copio o nome da animação e o coloco aqui. Depois disso, precisamos definir a duração e eu vou defini-la em 1 segundo, e então precisamos definir a direção linear da animação e a contagem de animação em voo Agora, para configurar esse arquivo, você pode ver a animação em cor verde. E agora eu quero adicionar duração de animação diferente para cada uma das letras e quero valores aleatórios. Então, se eu recarregar minha página toda vez, você retornará um resultado diferente Para isso, precisamos pular para a pilha de pontos do script Jas, e aqui dentro deste Pantag eu vou aplicar a propriedade de estilo Estilo. Estilo igual a e aqui dentro do curso duplo, quero definir a propriedade de duração da animação. Animação, duração. Duração da animação. Aqui, vou usar dentro das calibrases. Vou usar valores aleatórios, então vou usar a função matemática. Matemática matemática, pontos matemáticos aleatórios. Essa. Depois disso, depois de usar os pontos matemáticos aleatórios, quero multiplicar por Vou usar o sinal de multiplicação com cinco pontos. Toda vez que ele retornará um resultado diferente, um valor de duração diferente. Depois disso, precisamos usar for second porque precisamos fornecer o valor da duração em segundos. Depois de definir esse arquivo, agora depois de definir esse arquivo, você pode ver o crescimento aleatório dos caracteres, um por um Não sabemos qual deles vai fazer. Agora vamos mudar a cor do texto. Para isso, vou usar a propriedade de filtro. Depois de llicolin, vou usar o alimentador de propriedades de filtro, dois pontos, e aqui quero usar o valor Hu, HUE, Hu, cache, rotação Hotate dentro do pincel redondo aqui, eu vou usar o cifrão e dentro das maldições, eu quero multiplicar o índice significa que eu multiplico Vou enviar o arquivo 50 e também para passar e também na unidade de aprovação o grau BEG, 50 graus. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Depois de perseguir o valor do U lod, é assim que nossas cores se parecem Agora, o texto está piscando com cores diferentes aleatórias. Espero que agora você saiba como funciona a animação de texto piscando Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto de animação em JavaScript 52. Animação de clipe de demarcador usando Javascript, parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação JavaScript relacionada ao projeto. E hoje, neste projeto, vamos criar essa linda animação de texto em rolagem. Então, como você pode ver, quando eu rolei minha página para baixo, caso contrário, role para cima nesta página, você pode ver que aumentou o raio do círculo Tivemos que rolar dois círculos em dois cantos no canto superior esquerdo e no canto inferior direito. É um efeito de animação de caminho chave com JavaScript. No início, temos o grande título central desta página e, quando você rola para baixo nesta página, esses dois círculos ficam maiores e se sobrepõem ao texto Agora você pode ver na área sobreposta, temos o traçado do texto Ele cobriu o teste com traço e criou esse lindo efeito. Isso é o que vamos construir hoje neste projeto. Vamos entrar no código io do estúdio de resultados. Então, finalmente, estou no editor de código do meu estúdio sul. E como você pode ver no meu diretório de trabalho atual, eu já crio o arquivo scrip dot js e o arquivo CSS de estilo E agora vou vincular isso a um arquivo com este documento. Primeiro, vou vincular o estilete CSS ao tipo de arquivo Link. Dentro dessa tag de link, vou passar o estilo dot css. Então, dentro da tag body aqui, vou usar o script Scripg E como fonte aqui, vou passar o script dot js, este, e vou submeter esse arquivo Então, dentro da etiqueta corporal aqui, vou pegar uma etiqueta de seção. Seção, essa. Dentro desta tag de seção, primeiro, vou pegar uma tag H two, H two e um pergaminho do tipo herald Depois disso, vou usar a tag profunda para dois círculos, algum tipo D, e nessa tag profunda, vou atribuir um círculo de classe à classe Então eu duplico essa etiqueta de mergulho. Agora temos um total de duas etiquetas profundas para dois círculos. Basicamente, vou chamá-lo círculo um e este é círculo dois. Então eu vou colocar essa pilha. Agora, vamos pular para esse bloco ou pilha CSS. No início, vou selecionar o início do seletor universal e depois o interior do surge Primeiro, vou atribuir margem. Eu vou dizer margem zero de todas as direções. Então eu vou dizer acolchoamento. Preenchimento, em toda a direção, vou atribuir zero. Em seguida, vou atribuir o tamanho da caixa. Tamanho da caixa, aqui vou usar a probidade da Border Box, valor da caixa da garrafa Depois disso, vou atribuir o valor da fonte e vou usar a área de fonte aérea Depois disso, vou selecionar a tag body. Corpo. Eu vou estilizar este. Então, dentro dessa etiqueta corporal, vou atribuir a altura. Vou atribuir altura mínima, altura mínima, aqui, vou atribuir até 200 VHt de altura Depois disso, aqui, vou selecionar a tag da seção. Agora, dentro da tag de seção, primeiro, vou definir a posição superior a partir do topo, vou atribuir zero à esquerda. Como eu, atribuiria zero. Vamos começar nossa tag de seção partir deste canto, no canto do laptop. Em seguida, vou definir a altura e aqui vou definir a altura da janela de visualização de 100 V. Em seguida, vou definir a cor de fundo do plano de e quero usar um fundo cinza escuro escuro Então, vou digitar tem tag 333. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, se eu abrir meu navegador, é assim que ele fica. Aqui você pode observar essa barra de rolagem porque aqui atribuímos a altura da janela de visualização de 200 VH à nossa etiqueta corporal É por isso que temos essa barra de rolagem. Esta é a nossa etiqueta de seção, cuja altura é 100 VH. Agora você pode notar que, quando eu rolo minha página, nossa tag de seção sobe, mas eu não a quero Quero fixar esse elemento de seção naquele local, para isso, vou usar posição, posição e quero usar posição fixa. Agora, para definir a posição, também vou definir molhado. Vou digitar nós e aqui vou usar 100% úmido e cem por cento. Vou configurar esse arquivo. Agora eu configuro esse arquivo se eu voltar ao meu navegador e se eu tentar rolar para baixo nesta página, sim, podemos rolar, mas nossa tag de seção foi fixada nessa posição. E é isso que queremos. Agora, vamos voltar ao código do estúdio inter novamente. Em seguida, vou carregar a tag H two, a tag H two, que está dentro desta tag de seção Depois disso, vou digitar espaço, vou digitar H dois, depois dentro do carro vis, primeiro, vou definir a posição. Posição, vou torná-la absoluta. Depois disso, vou definir para, para e aqui vou atribuir o valor de 50%. Em seguida, vou definir a propriedade de transformação, transformar e aqui, vou usar transformar traduzir traduzir Y, traduzir Y -50 per Depois disso, vou definir W W 100 pers. Em seguida, vou alinhar o texto, Sletypetext, align Depois disso, vou definir o tamanho da fonte. Tamanho da fonte, e eu quero fazer isso. Quero chegar às 18:00 da manhã. E, finalmente, vou definir a cor, a cor dessa fonte, a cor, e quero a cor branca Para isso, vou digitar has tag if if if. Vou configurar esse arquivo. Eu configuro este arquivo se eu voltar ao meu navegador É assim que parecia. Vamos reduzir um pouco o tamanho. Parece muito grande. Então eu vou fazer com que seja 17 Em. Vou configurar esse arquivo novamente. Em seguida, vou trabalhar neste primeiro círculo. Vou selecionar o círculo um, dentro do carro Libs. Primeiro, vou definir a posição, posição e quero torná-la absoluta Depois disso, vou definir a largura Largura, aqui vou usar 100% de largura, 100%. Então eu vou definir altura, altura também 100%. E a seguir, vou definir a cor do plano de fundo, o plano de fundo. E para a cor de fundo, vou usar um tipo de cor verde variante tipo 22e, 760 Esta variante de cor verde. Mas antes que eu satisfaça, precisamos corrigi-lo. É uma classe, então você quer usar o ponto, e eu vou satisfazer. Depois de satisfeito, se eu voltar ao meu navegador, aqui você pode ver o elemento verde Você pode ver o elemento verde acima da tag da seção. Estou cobrindo toda a tag da seção. E agora eu quero recortar esse fundo verde. Quero mostrar apenas o círculo no canto superior do lábio. Para isso, vamos voltar ao código do Visual Studio e, desta vez, vou usar a chamada de propriedade clip path clip path Então aqui eu quero criar um círculo, algum tipo de círculo. Primeiro, vou definir o raio, que é de 150 pixels de ph, e quero colocá-lo em zero a partir de cima e, da esquerda, também zero Agora, depois de definir esse arquivo, se eu voltar ao meu navegador, é assim que nosso círculo se parece. Desenhe este diagrama com um círculo. Agora vou fazer a mesma coisa o círculo inferior direito. Para isso, vou duplicar esta seção e, desta vez, vou selecionar o círculo dois Além disso, vou mudar a posição desse círculo. Primeiro, vou mudar a posição. Eu vou fazer isso de 100% a 100%. Depois disso, vou mudar a cor do plano de fundo. Vou fazer com que seja um B seis, dois E. Vou configurar esse arquivo. Depois de definir esse arquivo, se eu voltar ao meu navegador, é aqui que colocamos o segundo círculo. Basicamente, aqui recortamos o fundo profundo do segundo círculo e criamos esse círculo teta nesse ritmo Agora temos o círculo laranja no canto inferior direito. Basicamente, aqui recortamos o fundo do segundo círculo e o testamos nessa posição. Agora, quero aumentar o tamanho desse círculo ao rolar até esta página Para isso, precisamos entrar no JavaScript. Vamos voltar ao código do estúdio novamente e entrar no arquivo script dot js 53. Animação de clipe de demarcador usando Javascript, parte 2: E aqui vamos começar com a segmentação desse círculo Primeiro, vou declarar uma variável atrasada e nossa variável é o círculo um Circule um igual a, vou passar o ponto do documento ou o seletor Escolha o seletor dentro das bases redondas dentro de um único percurso, quero selecionar este círculo, círculo um, círculo um Em seguida, semicone nesta linha, então eu dupliquei esta seção e desta vez eu quero selecionar o círculo dois Este é o círculo dois e também vou mudar o nome da classe, círculo dois. Em seguida, vou ouvir o evento Scroll. Vou amarrar Window, nem mesmo ouvinte. Dentro das rodadas, dentro de um único percurso, quero ativar o evento de rolagem SCR OL L, rolar e, em seguida, quero usar uma função de retorno de chamada para isso, vou usar a função de seta vou usar a Dentro do Carlss, então aqui, vou declarar uma nova variável tarde e quero extrair o valor da Às vezes, nome scroll, valor de scroll igual a Window ScrollY Então, basicamente, vamos extrair o valor da parte superior da janela e da barra de rolagem. E à medida que rolamos para baixo, esse valor aumenta. E se eu rolar para cima, ele diminui. Portanto, é um valor variável. E vamos usar esse valor para alterar o raio desse círculo Então, em seguida, vou digitar o estilo círculo de um ponto, estilo, ponto, traçado do recorte, caminho do recorte, igual a, e usar o método de literais escalonados Eu uso cravos. Dentro dos carrapatos traseiros, vou digitar círculo, depois dentro do latão redondo, aqui, vou usar seno mais alto Então, dentro dos cravos aqui, eu vou fazer um cálculo Vamos adicionar 150. É o raio padrão do círculo. Com isso, quero adicionar valor de rolagem. Essa. Com isso, quero multiplicar esse valor de rolagem por zero ponto por 0,75 Depois disso, definimos o pixel. É um pixel. É um valor de pixel, então precisamos definir a posição do círculo centralizado E, como você sabe, colocamos nosso primeiro círculo em zero e zero, e semi terminamos essa linha Aqui estendemos o raio. Primeiro definimos, primeiro passamos o valor do raio inicial, que é 150 pixels, depois adicionamos o valor de rolagem, que você obtém após rolar a barra de rolagem E então multiplicamos esse valor de rolagem por 0,75. E como você sabe, quando você rola minha página para baixo, caso contrário, rola a página, ela aumenta. Então, vamos tentar isso. Defina este arquivo, se eu acessar meu navegador e tentar rolar esta página, como você pode ver, depois de rolar, ele aumenta o tamanho do círculo e copia Até você rolar completamente a página para baixo. E se eu rolar esta página para cima, como você pode ver, isso reduz o raio do círculo Então, quando rolamos para baixo, ele aumenta o raio do círculo e quando rolamos para cima, ele diminui o raio do Agora, vamos fazer a mesma coisa para o próximo segundo círculo. Então, para isso, precisamos entrar no estúdio Cod Eater novamente e eu vou duplicar essa Depois disso, vou selecionar o segundo círculo e aplicar esse estilo e, desta vez, quero apenas mudar a posição. Aqui, precisamos fazer com que seja 100% da esquerda e 100% da parte superior. É isso mesmo. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, deixo isso para o navegador. Agora você pode ver que quando eu rolo minha página para baixo, raio de ambos os círculos aumenta, e quando eu rolo para cima nesta página, ele diminui o raio de ambos os círculos Em seguida, precisamos tornar esse elemento H dois coloridos transparentes. Para isso, vamos ao código inicial, aqui vou pular para o arquivo da tabela de índice, copiar esse código e colocá-lo dentro desse elemento circulativo Também no círculo para elementar , o círculo um e o círculo dois, ambos os elementos Em seguida, defina esse arquivo e volte ao estilo ou CSS five. Em seguida, vou ter como alvo o elemento H dois, que está dentro do segundo círculo e, para o círculo profundo, algum tipo de ponto, círculo um, espaço H dois, coma. Em seguida, vou mirar no círculo de pontos dois, espaço, H dois. Então, dentro do CarlRassF, vou mudar a cor. Cor, eu quero mudar a cor desse círculo, transparente. Transparente, e então eu quero adicionar entusiasmo a este texto. Para isso, vou digitar webt take stroke, dash, stroke, este, e aqui eu quero cinco pixels take Cinco pixels recebem um traçado e, além disso, vou definir a cor. Quero usar as cores cinza do tipo Haztag 333 e vou configurar esse arquivo Agora, depois de configurar esse arquivo, volto ao meu se eu voltar ao meu navegador e rolar para baixo nesta página, aqui você pode ver que alcançamos o resultado desejado. Uma vez que esse círculo interessa com o elemento H dois , o elemento H dois tem esse efeito Isso acontece porque adicionamos um traço ao redor da etiqueta H two, que está dentro dos círculos, e tornamos a cor transparente. E o elemento branco H dois aqui dentro, está fora do elemento circular. Então, espero que agora esteja claro para você como podemos criar essa bela animação em Javascript. Então, obrigado por assistir a este vídeo Stune para nosso próximo projeto 54. Animação do gatilho scroll parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação em JavaScript. Hoje, neste tutorial, vamos criar a animação Scroll Tigger Sim, vamos criar a animação SCRul tigger sem usar nenhuma biblioteca Não vamos usar o fair. Vamos usar o código PO JavaScript. Como você pode ver, sempre que eu desço minha página na segunda seção e alcanço uma certa distância, agora você pode ver a animação. É uma animação de transformação. Se eu rolar minha página um pouco mais para baixo, agora você pode ver que é uma animação em escala E se eu rolar um pouco mais para baixo, agora você pode ver que é uma animação giratória Então, em cada seção, usamos um estilo de animação diferente. Se eu rolar para cima nesta página, você também pode ver as animações desaparecerem Isso faz com que nosso conteúdo desapareça. É bem parecido com a animação escolar. Se você está familiarizado com isso , sabe como podemos executar a animação Scroll Tiger. Mas neste tutorial, vamos criá-lo por nós mesmos. Não vamos usar nenhuma biblioteca para isso. É uma animação muito eficaz para sites de página única. Vamos ver como podemos criar essa animação usando JavaScript, CSS e DML Finalmente, estou no editor de código do meu estúdio e, como você pode ver no meu diretório de trabalho atual, eu já crio o arquivo script Dogs e o arquivo CSS de estilo dot. E no meu diretório de trabalho atual, há uma pasta chamada images. E dentro dessa pasta, temos algumas imagens, como gatos, cavalos e leões, vamos usar essas imagens. Então, primeiro, dentro dessa página de estimativa, vou criar uma seção. Então, vou usar a tag de seção, seção. Em seguida, vou atribuir uma classe a essa tag, classe, e aqui vou atribuir a seção um. Com isso, quero atribuir outra classe a esta seção, que é show Animate. Então, dentro desta tag de seção, seguida, dentro desta tag de seção aqui, vou pegar uma tag H um, cabeçalho um. Além disso, vou definir uma classe para essa classe de tag de cabeçalho e vou torná-la animada Então, dentro da tag, vou digitar a primeira seção. Em seguida, vou pegar um parágrafo dentro desta seção usando a tag T, P, e também vou atribuir uma classe e o nome da nossa classe é animate, essa Aqui vou digitar um pouco de DammiTextoWise, você pode digitar HTML, coma, CSS e JavaScript. Eu vou definir esses cinco. Depois disso, da mesma forma, vou duplicar esta seção Basicamente, aqui precisamos criar um total de cinco seções diferentes. Eu dupliquei esta seção, e esta é a seção número dois, e vou usar o mesmo conteúdo aqui Eu não vou usar essa classe para animar. Eu não preciso disso por enquanto. Depois disso, novamente, vou duplicar esta seção, e esta é a seção número três Novamente, vou duplicar esta seção, e esta é a seção número quatro Além disso, para fazer algumas alterações no título de uma tag, é a quarta seção. Quarta seção. Esta é a terceira seção. Terceira seção, e esta é a segunda seção, e eu vou submeter este arquivo Depois disso, vou duplicar esta seção oito. Mas desta vez, vou chamá-la de Seção 5. Dentro desta seção cinco, eu quero colocar algumas imagens, não o texto. Aqui eu vou pegar outro Delement DV e o nome da nossa classe é Aqui, vou atribuir imagens a uma classe. Então, dentro dessa tag profunda, vou usar uma tag de imagem. Aqui eu vou atribuir a três imagens. Então, digite a imagem IMG image como fonte e, como fonte, aqui, vou usar a primeira imagem, cats dot JPG Que está dentro da minha pasta de imagens, images slash cat dot JPG Com isso, também vou atribuir uma classe e nosso nome positivo é animate. Eu quero subtrair esse arquivo. Opa, aqui eu fiz um silástico Precisamos fornecer o caminho no código-fonte, não no antigo. Vou revisar esse caminho de arquivo a partir deste local e vou colocá-lo dentro desse atributo de origem. Então eu vou configurar esse arquivo. É cats dot JBG. Vou submeter este arquivo. Depois de configurar esse arquivo, vou duplicar esta seção Em seguida, vou atribuir a próxima imagem, que é hors dot GPG Em vez de usar GPG tipo cat hors dot. Então eu dupliquei essa linha e desta vez vou usar a terceira imagem leões com pontos de leões JPG Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, se eu mostrar meu navegador, esse é o nosso navegador, é assim que nossa página se parece. Em seguida, precisamos estilizar essa página. Vamos entrar nesse arquivo CSS de pontos de estilo. Basicamente, fizemos nossa parte CSS e precisamos entrar no arquivo CSS de pontos de estilo. Como você pode ver, aqui eu abro um arquivo CSS de estilo. No começo, vou usar, vou importar uma fonte, que são pop-ins do Google. Depois disso, vou selecionar o seletor universal. Vou digitar estrela dentro do levoss. A primeira propriedade que vou usar é margem, margem, e vou dizer que é margem zero. Em seguida, vou definir o preenchimento, preenchimento também de toda a direção zero É um seletor universal. É por isso que ele aplicará toda a margem e preencherá todos os elementos Em seguida, vou definir o tamanho da caixa, caixa, tamanho , caixa de borda Depois disso, vou estilizar a tag da seção. Seção. Então o Cali diz, primeiro , eu vou primeiro usar a propriedade display, display, e vou torná-la flexível Em seguida, justifique o conteúdo, Justify Content Center. Além disso, vou digitar align I tabs center porque quero centralizar os elementos na horizontal e na vertical Em seguida, vou definir a direção da flexão, a direção flexão, a direção da flexão, vou usar Depois disso, vou definir a altura mínima para esse contêiner. Altura mínima média altura, e aqui vou usar a altura da janela de visualização de 100 V H. Em seguida, vou definir a cor do plano de fundo. fundo e cabeça, vou usar a hashtag um, A, dois, quatro, dois D, esse código de cores, esse código de cor cinza escuro Não é cinza, é um código de cores azul escuro. Depois disso, vou esconder o transbordamento. Às vezes, transbordamento oculto e eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, esta é a aparência da nossa tag de seção. Temos a seção ptolFive e, para toda esta seção, ela aplica esse escopo CS É por isso que toda a seção parece a mesma. Agora, vamos estilizar a outra seção, precisamos mudar a cor de fundo. Para isso, vamos voltar ao código do Visual Studio e, desta vez, vou focar na seção dois pontos ACC, Seção dois Então, dentro do Carlras, eu quero mudar a cor de fundo, cor de fundo, e eu quero usar GblorGBF vermelho, eu vou usar 96 para verde, aqui, eu vou usar 30, e para azul, eu É uma espécie de cor roxa, e eu vou guardá-la. Da mesma forma, precisamos alterar a cor de fundo da outra seção. Então eu dupliquei esse código, e é para a Seção 3 E para a Seção três, eu quero usar a cor de fundo, esse código de cores, Haz dag zero, cinco, seis, nove, seis, quatro Em seguida, vou duplicar essa linha e, desta vez, vou selecionar a Seção quatro E aqui eu vou dizer cor de fundo. Tem etiqueta, F se for um seis duplo zero, essa cor laranja. Em seguida, vou estilizar a seção número cinco. Eu dupliquei esta seção e vou mudar a cor de fundo da Seção número cinco e quero fazer isso aqui. Vou aplicar a cor RGB, RGB para vermelho, vou usar o valor alto de 255 para o verde, aqui, vou digitar zero e para o azul, vou passar 85 Em seguida, vou definir esse arquivo neste arquivo se eu voltar ao meu navegador, aqui você pode ver todas as cores diferentes de todas as seções. Agora, precisamos trabalhar na tag H two, e agora precisamos trabalhar em H um elemento, cabeçalhando um elemento. Vamos entrar no código do estúdio de resultados e, desta vez, vou focar no H one. Dentro do ColSSF, vou definir o tamanho da fonte, fonte, tamanho, quero usar o tamanho da fonte de 90 pixels e, em seguida, vou definir a cor da fonte, a cor e, às vezes, quero usar a cor branca. HastaGFFF, vou definir esse arquivo 90 pixels e, em seguida, vou definir a cor da fonte, a cor e, às vezes, quero usar a cor branca . HastaGFFF, vou Agora, vamos aplicar o estilo da fonte. Para aplicar o estilo de fonte dentro desse seletd universal, vou usar a propriedade da família de fontes da família de fontes A família de fontes precisa usar pop-ins da família de fontes Aparece e vem da família SanseriFont. Senseri E eu vou satisfazer o feedback do meu irmão. É assim que nossa fonte se parece agora. Em seguida, vou estilizar esses parágrafos. Vamos entrar no editor de código novamente e, depois disso, vou selecionar a tag do parágrafo, P. Em seguida, dentro do recesso colorido, a primeira propriedade eu vou usar o tamanho da fonte, e aqui, vou digitar o tamanho da fonte 35 pixels Depois disso, vou definir cor, cor e para cor, vou usar esse código de cores, zero, zero E F, essa cor azul clara. Depois disso, vou definir a fonte como oito. Fonte para oito, fonte oito, quero um pouco mais ousada, vou usar 600 Em seguida, vou mudar a cor do parágrafo da Seção dois, Soma, tipo ponto, EC, dois parágrafos de espaço. Então, dentro da cor re diz, aqui, eu vou usar a cor, e eu quero o mesmo código de cores, então com vários hastags zero, zero, um zero aqui eu vou usar variantes de cor verde SoMthtG 00, eu vou usar a cor, e eu quero o mesmo código de cores, então com vários hastags zero, zero, um zero aqui eu vou usar as variantes de cor verde SoMthtG 00, essa cor verde claro. Então eu dupliquei esta seção e esta é para seção número três e aqui eu quero mudar a cor FF zero, essa cor amarela clara, então eu vou mudar a cor para seção número quatro, Seção quatro, e eu vou usar e na seção, eu vou usar uma cor diferente 05, 69, 64, esse código de cor, esse código de cor verde escuro Depois disso, precisamos trabalhar nas imagens. Então, nessa seção, primeiro, vou selecionar SEC, Seção cinco, depois quero selecionar as imagens que estão dentro da Seção cinco. Eu quero ter como alvo a classe Dot Images. IGES. Isso dentro dos clires Basicamente, aqui eu miro fisicamente aqui da Seção cinco, eu quero direcionar essas imagens do elemento Dip dentro dos closes. Vou usar a propriedade de exibição, display Nesta peça, eu quero um display flex. Com isso, quero fornecer uma pequena lacuna entre esses itens, alguma lacuna de tipo, e quero uma lacuna de 40 pixels, 40 pixels. E eu quero satisfazer. Depois de voltar ao meu navegador, é assim que o texto de nossos parágrafos se parece e é assim que nossas imagens se parecem Agora, vamos ficar um ao lado do outro. Em seguida, precisamos trabalhar nessas imagens. Precisamos fornecer largura máxima, precisamos definir o peso máximo para essas imagens. Para isso, vamos voltar aos usuários para seu código. E aqui, vou selecionar a Seção cinco, pontuar a seção SEC cinco, Seção cinco e, a partir da Seção cinco, quero direcionar as imagens. Images Div e do Images De, quero segmentar a imagem IMG em cada tag Então, no Cariss aqui, vou usar a chamada de propriedade max wed, largura máxima, e vou defini-la 350 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver o resultado. Essa é a primeira parte deste tutorial. Nessa seção, trabalhamos no design do layout. Na próxima parte deste tutorial, iniciaremos o JavaScript. Obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 55. Comece a trabalhar com JavaScript e adicione o curso em uma seção: Olá, pessoal. É bom ver você de volta. Esta é a segunda parte deste tutorial e, nessa seção, vamos trabalhar em JavaScript. Vamos começar a trabalhar no efeito de rolagem. Vamos entrar no código do estúdio e entrar no arquivo script dot js. Inicialmente, dentro do arquivo screen dot js, vou focar em todas essas seções. Vou declarar uma variável AET atraso e o nome da nossa variável é seção Seção igual a esta, vou digitar document, quirselector Quielector dentro da redonda dentro um único curso Quero segmentar todas as tags de seção usando seu nome de classe section, section section Depois disso, vou digitar o ponto da janela no método de rolagem, na rolagem, igual a aqui, vou usar a função de seta. Então, dentro do Clss, basicamente, essa função é executada sempre que percorremos a página Dentro dessa função, precisamos examinar toda a seção, uma por uma. Seções de hemotp, eu vou usar, vou usar para cada loop, para cada um Então, dentro dos vestidos redondos aqui, vou passar pela seção AEC e pela função de seta Então, dentro da resina Cal, aqui examinamos esta seção e cada seção chamada sec Em seguida, uso uma função de seta para retorno de chamada e, dentro dela, declararei uma nova variável T atrasada e o nome da nossa variável está atrasado Aqui, vou declarar a distância de rolagem do nome da variável Distância de rolagem igual ao ponto da janela, scrollY, scroll Y. Basicamente, essa variável armazenará o valor da distância da rolagem da parte superior da tela até o quanto rolamos, ela armazenará o valor nessa Em seguida, precisamos recuperar a distância da seção. Vou declarar outra variável com atraso e nome da nossa variável é distância de seis seções Distância da seção igual ao segundo ponto, fora do local, fale. E então vamos para essa linha. Essa propriedade de deslocamento é a distância da borda externa da seção até a borda superior de sua matriz Deixe-me explicar isso com um exemplo, qual é o valor máximo do Oset Aqui você pode notar a distância. Esta é nossa primeira seção e esta é nossa segunda seção e a distância entre a posição superior do navegador e a posição superior da segunda seção é chamada de distância superior deslocada Precisamos extrair essa distância de rolagem igual à distância do topo da página. Eu quero aplicar um pouco de estilo neste elemento da segunda segunda seção. Da mesma forma, precisamos nos inscrever na terceira seção, na quarta seção e na quinta seção. Então, sempre que atingirmos uma certa distância da seção da parte superior do navegador , eu quero acionar uma animação. Caso contrário, quero acionar um estilo. Basicamente, é bastante familiar com animação escrotal em Gizé Mas aqui não vamos usar nenhuma biblioteca para isso. Vamos usar JavaScript bruto. Vamos voltar ao código do estúdio. E aqui eu vou usar a condição. Se estiver dentro da distância de rolagem das redondas, a distância rolagem é maior que igual à distância de segundos Então, dentro do Carl diz, aqui, se essa condição for verdadeira, então aqui, eu vou digitar sec dot class list Quero adicionar uma turma. A lista de classes não é adicionada. Dentro do ss redondo, aqui, vou definir uma classe e nome da nossa classe é show animate. Mostrar animação. E semi, vá para uma linha. Como você pode ver, a distância I é igual à distância da seção; caso contrário, maior que a distância da seção, a instrução IP será executada Agora vamos ao navegador e ver quando essa condição está acontecendo. Então, aqui na primeira página. Desculpe, seção superior. A distância da seção é o valor fixo. A distância entre o topo e a segunda seção é a altura da primeira seção. Nunca muda, a menos que mudemos a altura. Enquanto isso, a distância de rolagem está mudando de valor. Quando rolamos a página para baixo, caso contrário, rolamos a página para cima, o valor é alterado. Em algum momento, esses dois valores são exatamente iguais. É aqui que a condição de IP se torna verdadeira, e isso acontecerá até que a desçamos até a borda superior da segunda seção. Então, sempre que ele toca na borda superior do navegador, ele aciona a animação Para esclarecer melhor esse conceito, vamos inspecionar a página Aqui vou inspecionar a página. Agora, aqui você precisa dar uma olhada mais de perto na segunda seção. Aqui eu rolo minha página para baixo e as seções tocam na parte superior. Como você pode ver, não está funcionando porque eu saltei um pouco de silamismo mais tarde para o editor de código Sim. Essa é a silabística. Não é uma aula. É etiqueta. Precisamos selecioná-lo usando o nome da tag porque se eu mostrar minha página estática de índice, é um nome de tag. Não usamos nenhum nome de classe para selecionar esse elemento. Primeiro, precisamos usar o nome da tag e também fazer alguma correção, a grafia da distância DI, não E, distância , DI, este, e precisamos definir esse arquivo novamente. Vou configurar esse arquivo e voltar para o navegador. Desta vez, se eu rolar minha página para baixo e clicar na segunda seção, posição superior, tocar na parte superior do navegador, você poderá ver que ela adicionou classe à nossa seção em nossa segunda seção. Da mesma forma, se eu rolar para baixo mais uma terceira seção, posição superior, toque nesta seção, toque na parte superior. Agora você pode ver dessa vez, novamente , adicionar uma nova classe. Em nossa seção três. Além disso, se eu rolar um pouco para baixo e, novamente, se a posição superior da quarta seção tocar na parte superior do navegador, você poderá vê-la adicionada na classe. É assim que funciona. Depois disso, agora precisamos direcionar essa classe show animate estilizar esta seção e implementar a animação Vamos fazer isso mais tarde, mas antes que eu queira definir alguma condição no meu Javascript, deixe-me mostrar o que. Vamos entrar no código do estúdio e aqui precisamos lidar com a parte s. Então, para digitar s dentro dos cálices. Desta vez, quero remover essa classe show animate. Se a condição não corresponder, então ela digite SEC section dot class list, dot, desta vez vou usar o método remove, remove. Então, dentro das rodadas, dentro do único curso, vou passar o nome dessa classe, show animate Portanto, sempre que a condição não for verdadeira, ela removerá a classe desta seção e o semicon para finalizar essa linha Vamos configurar o arquivo e voltar para o navegador. Agora, você pode observar se eu rolar minha página para baixo e a condição é verdadeira, como você pode ver, na aula por meio da animação em nossa seção dois Mas se eu escolhi esta página e essa condição falhar, novamente, ela removeu a turma desta seção. Da mesma forma, se eu rolar a página e a Seção três tocar na posição superior, agora você poderá vê-la na aula, mostrar animação Se eu falhar na condição, você pode vê-la remover a classe daqui. Usando isso, podemos acionar a animação. Além disso, podemos remover a animação de nossas seções. Agora, antes de trabalhar nesta aula, quero definir outra condição. Agora eu quero adicionar a classe antes desta terceira seção, caso contrário, a segunda seção chegará ao topo. Quero adicionar essa classe, mostrar animação em nossa segunda seção quando ela atingir essa distância antes de tocarmos na barra de URL do navegador Para isso, basta menos. Da distância aqui, vou para menos 150 pixels, 150 pontos Se eu definir esse arquivo e voltar ao navegador, agora você pode notar que o Weboy rolou minha página para baixo e esta seção alcançou essa posição, agora você pode vê-la na aula show Da mesma forma, se eu rolar a página para baixo e esta seção, o topo da terceira seção alcançará essa posição, modo que, como você pode ver na aula desta seção, mostre animação Fazemos isso porque, quando eu rolo minha página para baixo e o conteúdo desta seção fica visível, quero executar essa animação. É por isso que eu faço isso. Isso é tudo para a segunda parte deste tutorial. Na terceira parte deste tutorial, vamos estilizar a classe. Vamos estilizar a classe Show Animate em nossa seção de estilo Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 56. Comece a trabalhar na animação: Olá, pessoal. É bom ver você de volta. Essa é a terceira parte deste tutorial. Em nossa segunda parte, aprendemos como adicionar uma classe em nossa seção. Se eu inspecionar esta seção e rolar para baixo nesta página em um determinado ponto, se nossa segunda seção atingir uma certa distância, ela adicionará uma classe em nossa segunda seção Mostrar animação. Da mesma forma, nossa terceira seção atinge certa distância, adiciona a classe, mostra animação. E se eu rolar para cima nesta página e a condição se tornar falsa , ela removerá a classe dessas seções. Agora, no estúdio, vamos estilizar essa aula, mostrar animação. Vamos voltar ao código do isal studio e vou entrar no arquivo CSS de estilo Depois disso, agora nessa seção, quero segmentar a classe de animação que está dentro da tag da seção Aqui vou digitar aqui. Vou selecionar a classe animate, que está dentro da seção, depois da seção animate Animate Então, dentro do Cariss, a primeira propriedade, vou usar a opacidade Opacidade, vou torná-la zero. Se aplicarmos opacidade zero, ela ficará oculta Em seguida, vou aplicar a propriedade do filtro. Filtre, e aqui eu quero aplicar o desfoque e quero o desfoque de cinco pixels Depois disso, vou aplicar a transição. Transição e para a transição que eu quero, a duração da transição é de 0,5 segundo. Se eu definir esse arquivo e voltar ao meu navegador, agora você poderá ver que todos os elementos estão ocultos. Você não pode ver nenhum elemento vinculado à classe animate Vamos voltar ao código novamente. Agora, sempre que rolamos esta página, quero tornar essa seção visível novamente. Eu quero a tag HH two e a tag de parágrafo. Para isso, precisamos ter como alvo a classe show animate. Então, seção de tempo, mostre animação. Mostre espaço animado, ponto, eu quero segmentar a classe animada. Eu quero estilizá-lo. Então, dentro do fígado, diz: primeiro, eu vou fazer opacidade, opacidade, eu vou torná-la Porque eu quero torná-lo totalmente tópico. Basicamente, quero dizer que quero torná-lo visível novamente. Depois disso, vou aplicar filtro Filter, Blur, blur. E aqui eu vou passar zero pixel. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode ver sempre que eu rolei na minha página e esta seção está ativa, agora você pode ver o texto aparecer Então, quando a classe show animate for adicionada a esta seção, ela mostrará o texto Como você pode ver, sempre que eu percorro minha página e a terceira seção está ativa, ela mostra o conteúdo Nas semifinais, trabalhe para a quarta seção. E se eu rolar para cima nesta página, como você pode ver, ela oculta o texto, ela fica invisível novamente. Agora você pode entender por que a primeira seção já está visível? Porque se eu mostrar meu arquivo de estimativa de pontos de índice, como você pode ver, ela usa show animate class Nós passamos manualmente essa aula nessa seção. É por isso que nossa primeira seção contém tudo que fica sempre visível e agora podemos adicionar efeitos diferentes em seções diferentes. Vamos trabalhar com o arquivo CSS e agora quero direcionar a classe animate que está dentro da segunda seção Então digite dot SEC seção dois e, a partir daqui, eu quero segmentar a classe animate, animate Então, dentro do Carras eu quero usar a propriedade transform, transform, e quero mover esse elemento 100% de excesso na direção do excesso Vou usar traduzir X, traduzir X, 100%. Então eu preciso desse arquivo. Eu configurei esse arquivo, se eu voltar ao meu navegador, agora você pode notar que vamos mover esse elemento 100% na direção XX. Agora, sempre que eu rolar esta página, quero mover esse elemento dessa posição para a posição zero. Para isso, vou duplicar esta seção e sempre que a classe show animate estiver ativa dentro desta seção, alguns digitam show animate, show animate Então eu quero fazer com que seja 0%, caso contrário, zero, zero simples. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, volto ao meu navegador, agora você pode perceber que sempre que eu rolo minha página para baixo, em nossa segunda seção, ela vem dessa direção. Da mesma forma, podemos adicionar efeitos diferentes para nossos diferentes elementos, como a terceira seção. Então, vamos fazer isso. Em seguida, vou duplicar esta seção e, para a seção três, vou direcionar a seção três, e aqui vou usar a propriedade de escala Escala. Em primeiro lugar, quero reduzir a tag do título e o elemento. Vou fazer com que seja 0,70 0,7 vezes sempre que atuarmos como show animate class Nesse caso, quero ampliar esse elemento, escalar Aqui eu vou usar um Val. E eu vou configurar esse arquivo. Vamos ao navegador. Como você pode ver, quando vamos pular para a terceira seção, ela aumenta o número de alienados quando a condição se torna falsa; novamente, ela desaparece Agora, vamos trabalhar na quarta seção. Novamente, vou duplicar esta seção. E desta vez, quero focar na quarta seção aqui. Quero aplicar a propriedade de rotação, Transformar, transformar, girar e, por padrão, quero girá-la em 30 graus e sempre que a classe show animate estiver ativa, quero girar até Vou configurar esse arquivo. Depois de definir esse arquivo, volto ao meu navegador e chegar à quarta seção. Agora você pode notar que esse elemento está girando. Novamente, você pode ver que é assim que o conteúdo é girado. Agora, vamos trabalhar na última seção, quinta seção. Em nossa quinta seção, temos três imagens. Para isso, vamos entrar no código do Visual Studio e, primeiro, vou duplicar esta seção E aqui, vou focar na Seção cinco e, nessa seção, quero aplicar a tradução X com valor de rotação Traduza X 100%, 100%. Com isso, quero aplicar o valor de rotação, girar e quero girá-lo até Então, aqui, eu vou aplicar translate g translate g, vou torná-lo zero. Se eu definir esse arquivo e voltar ao meu navegador e rolar para baixo até a seção de imagens, você poderá ver o resultado. Agora eu quero adicionar um pouco de atraso entre essas imagens. Também no parágrafo. Eu quero dizer este parágrafo. Para isso, aqui, vou usar a classe animate, que está dentro da tag de parágrafo, algum tipo P dot animate Dentro dos escultores, a propriedade que vou usar é de transição Faça a transição e eu quero adicionar um atraso de transição de 0,2 segundos. Depois de configurar esse arquivo, sempre que volto ao meu navegador e percorro esta página, agora você pode notar que depois de H uma tag, aparece a tag de parágrafo porque aqui adicionamos detalhes do porque aqui adicionamos detalhes atraso de transição neste parágrafo. Da mesma forma, se eu for pular para a quarta seção, depois de girar a tag H um, ela girará o parágrafo por causa desse atraso de transição de 0,2 segundos Em seguida, quero adicionar um pouco de atraso na imagem número dois e na imagem número três. Vamos voltar ao código de estúdio do usuário. Se eu mostrar minha página de estimativa de índice, como você pode ver aqui dentro desta classe de imagem, dentro desse elemento profundo, temos um total de três imagens. Precisamos segmentar a imagem nona criança dois e três. Para isso, vamos ao arquivo SASS de estilo e aqui. Vamos usar o seletor infantil, algum tipo de ponto, que é da Seção cinco, algum tipo de seção cinco, espaço, vou direcionar a imagem, ING, tag de imagem Então, dentro do cólon, quero matar a segunda criança, algum tipo N TH, enésima criança, enésima criança, quero atingir a segunda, vou passar para Então, dentro do carnívoro, vou usar uma propriedade chamada atraso de transição Atraso na transição e eu vou ultrapassar o atraso de transição de 0,2 segundos. Em seguida, quero selecionar o terceiro filho, três, a terceira imagem, aqui vou adicionar atraso de transição, 0,4 segundo. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu usar meu navegador e pular para a quinta seção, agora você pode ver aqui que você pode notar que adicionamos atraso de detalhes na segunda imagem e na terceira imagem. É assim que criamos essa animação de gatilho de rolagem sem nenhuma biblioteca. Podemos fazer isso facilmente usando a animação GSAP, mas aqui não usamos nenhuma biblioteca Aqui, usamos JavaScript puro básico para fazer isso e CSS. Obrigado por assistir a este vídeo, fique ligado em nosso próximo projeto de animação em JavaScript 57. Animação de estrela piscante usando Javascript parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova animação JavaScript relacionada ao projeto. E hoje, vamos construir esse lindo fundo animado de estrelas usando JavaScript. Como você pode ver, há muitas estrelas nesse fundo e todas elas piscando de forma diferente E então temos esse círculo. E dentro desse círculo, temos um texto. Bem-vindo à nossa página. E esse texto está flutuando acima desse círculo. E toda a estrela bebendo aleatoriamente. Se eu recarregar esta página e relacionar esta página, como você pode ver, aleatoriamente, ela muda a posição da estrela Se eu recarregá-lo novamente, como você pode ver, novamente, ele muda a posição dessa estrela aleatoriamente, e todas as estrelas estão bebendo Isso é o que vamos construir neste projeto. Vamos entrar no editor de código do Visual Studio. Então, finalmente, estamos no meu editor de código de estúdio, e como você pode ver no meu diretório de trabalho atual, eu já crio o arquivo CSS no estilo EstimLfle com ponto de índice e o arquivo JS com porta de script, e agora vou vincular o arquivo CSS de ponto de índice a este CSS de ponto Vou digitar tinta e aqui vou passar o estilo dot css. Em seguida, dentro da tag body, vou inserir o arquivo script dot Gs. Vou digitar Script tag, script. Então, como a fonte é a fonte Rc, vou passar o script dot js Vou configurar esse arquivo. Depois de definir esse arquivo, vou pular para a seção do corpo. Dentro da etiqueta corporal aqui, vou pegar a etiqueta de seção. Seção. Então, dentro desta etiqueta de seção, vou pegar uma etiqueta H two, tubo H aqui vou digitar, bem-vindo. Bem-vindo ao nosso, então aqui vou usar a tag Ba, BR. Aqui eu uso o Bateg porque quero quebrar a linha. Então, dentro da tag T, vou pegar uma tag span, span. Então, dentro da tag Span, tipo hemo, bem-vindo à nossa página. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, é assim que nossa página da web se parece agora. Agora, precisamos estilizar esta seção, vamos estilizar esse texto. Então, para isso, precisamos entrar no estilo ou no arquivo SASS. Então, primeiro, vou importar uma fonte, e o nome da nossa fonte é Poppins Então, eu importo essas fontes pop in. Depois disso, vou usar seletor universal, tipo de música, início e, em seguida, dentro do crass, primeiro, vou definir a margem para esta página, margem de toda a direção zero, depois vou definir o preenchimento e também a direção em que quero usar o Em seguida, vou usar o tamanho da caixa, borda do tamanho da caixa Depois disso, vou definir as famílias de fontes, vou digitar a família de fontes aqui, vou usar a fonte Poppins Dentro do curso único, vou digitar P, O PINs Poppins e ele vem de SansarionFamily , Em seguida, vou selecionar a tag body, body, e aqui dentro do alias diz, vou usar o cabeçalho de estouro PpotaloFlow e vou definir Depois de definir esse arquivo, vamos estilizar a tag da seção. Agora vou selecionar essa tag de seção usando o nome da tag. Eu copio a tag da seção e vou selecionar essa tag de seção no meu estilo ou arquivo CSS. Então, lá dentro, surge a primeira propriedade que vou usar, display. Essa peça e eu queremos fazê-la desmoronar. Ou seja, justifique o conteúdo, justifique um centro contido. Em seguida, vou alinhar este item e alinhar os itens também no Então eu vou definir altura, altura, vou definir altura, altura de 100 janelas de visualização Depois disso, vou definir a cor de fundo, o plano de fundo e, para esse plano de fundo, vou usar a hashtag 222, cor cinza escuro Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que nossa página se parece agora. Agora, para criar esse círculo ao redor do texto, usaremos o pseudo-elemento anterior desta tag de seção Aqui, vou digitar a seção dois pontos antes. Então, dentro do carro, fica a primeira propriedade em que vou usar o conteúdo Quero criar um conteúdo em branco. Conteúdo igual ao conteúdo é um conteúdo em branco. Depois disso, vou definir a posição. Posição, eu quero definir a posição absoluta. Então eu vou definir, nós. Aqui eu vou definir a largura 30 da largura da janela de visualização. De acordo com a área da janela de visualização, isso mudará o tamanho do círculo Então eu vou definir a altura. Além disso, 30, é Vw, não H, coloque W. Aqui eu uso uma altura semelhante e faço com que seja quadrada Mais adiante, vou definir a borda da borda, e quero cinco bordas VW e quero uma borda sólida, sólida, e a cor da nossa borda é, vou usar essa variante de cor azul para a borda Depois disso, vou definir o raio da borda, o raio da borda Aqui eu vou passar de 50%. Então eu vou configurar esse arquivo, mas antes de configurar esse arquivo, eu cometi um erro, é errado soletrá-lo antes de E. Então eu vou configurar esse arquivo e voltar para o meu navegador Se eu voltar ao meu navegador, é assim que nossa fronteira se parece. Depois disso, precisamos adicionar uma pequena sombra de caixa. Para isso aqui, vou digitar box shadow box. Sombra, e eu vou usar um valor, esse valor de sombra da caixa, e vou definir esse arquivo. Depois de definir esse arquivo, é assim nosso círculo se parece agora com essa sombra de caixa. Depois disso, vou estilizar esse texto, esse H para marcar. Para isso, vamos voltar ao código do estúdio e, desta vez, vou usar H para marcar H dois. Então, dentro da classe, a primeira propriedade, vou usar a posição e vou tornar a posição absoluta. Em seguida, vou definir o tamanho da fonte, o tamanho da fonte, e aqui vou definir o tamanho da fonte V W, a janela de visualização, nós Em seguida, vou definir cor, cor e quero torná-la totalmente branca. Eu uso esse código menor, se for F. Depois disso, vou definir fonte para oito, fonte para oito, e eu quero fontes um pouco mais leves, então vou empatar 400 Em seguida, vou definir o alinhamento do texto e o centro do alinhamento do texto. Além disso, vou definir uma pequena altura da linha, altura da linha. Vou passar a altura da linha dois pelo índice M Z, e vou passar cinco aqui, índice Z cinco. Em seguida, vou transformar esse texto. Quero distorcer um pouco esse texto, digitar transform property, transform, e aqui vou digitar e Hembus skew value, skew skew Y, skew y menos sete graus DG Em seguida, vou subtrair esse arquivo e voltar para o navegador. Agora, é assim que nosso texto se parece. Bem-vindo à nossa página. Agora você pode ver que nosso texto está no centro desse círculo. Além disso, inclinamos o texto em menos sete graus e precisamos adicionar alguma sombra de texto Vamos trabalhar com o código do estúdio e aqui vou usar a propriedade chamada text shadow. Então, digite o texto e reutilize isso. Isso assume o valor da sombra, e eu vou definir esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que nosso texto se parece agora. Basicamente, aqui, passo a passo, aumento o valor de take shadow. Se eu mostrar, como você pode ver, primeiro use um pixel, depois dois pixels, depois três, quatro e cinco, e aqui use a cor cinza para capturar a sombra. Agora, vamos trabalhar na tag San, que contém a página. Para isso, vou selecionar H dois, H dois, dentro da tag H dois, quero selecionar a tag span. Vou usar a extensão do nome da tag. Então, dentro da Calibra , a primeira propriedade vou usar a espessura da fonte Aqui, vou usar fontes Little Boulder , então vou digitar 700 Em seguida, vou definir o tamanho da fonte tamanho da fonte. Aqui, vou definir o tamanho da fonte três EM, um pouco maior que o anterior. Em seguida, vou definir “take shadow”, text shadow”, e aqui vou passar “ multiple take shadow”. Eu colo esse código e vou configurar esse arquivo. Depois de definir esse arquivo, se cinco voltas para o meu navegador, é assim que nossa página se parece. Agora, é muito grande. Parece muito grande para este site. Acho que precisamos reduzir o tamanho para reduzir o tamanho desse círculo, também o conteúdo do texto. Então, vamos experimentar com isso. Em vez de usar, deixe-me mostrar primeiro, vou diminuir o tamanho desse elemento anterior. Aqui eu vou fazer 20 V. Depois vou diminuir o tamanho dessa borda. Eu vou fazer três VW. Depois disso, depois disso, vou diminuir o tamanho da fonte. Aqui, eu vou fazer cinco W. Então, eu também vou diminuir a altura da linha e vou usar 1,5 Em. Em seguida, vou diminuir o tamanho da fonte. Aqui eu vou usar duas fontes EM. Satifique e veja como fica. Depois de voltar ao meu navegador, é assim que fica. Agora está perfeito. Agora eu acho que parece muito legal para este exemplo. Caso contrário, em nosso vídeo anterior, parece muito grande para este exemplo. Agora precisamos trabalhar na animação. Precisamos trabalhar na animação flutuante. Então, vamos criar o quadro-chave para isso. Vamos entrar no código do estúdio de vídeo. Então, aqui, primeiro eu escrevo, adicione os quadros-chave do quadro-chave de taxa Então, o nome dos nossos quadros-chave é flutuante porque é uma animação flutuante. SmotyPFLA TNG. Flutuando então dentro da lista 0% de duração e aquela com 100% de duração Eu quero aplicar a propriedade de transformação, transformar, transformar a distorção do heterótipo Inclinação Y, inclinação Y menos sete graus DEG. Com isso, quero aplicar outra propriedade, traduzir Y. Traduzir Y -20 pixels, 20 pixels Em seguida, vou duplicar esta seção e, aqui, vou digitar com 50% da duração No início, com 50% da duração, quero alterar o valor Y do trânsito. Vou fazer com que seja positivo. Faça com que seja de 20 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, vou chamar essa animação. Eu copio o nome da animação flutuando e vou pular para a tag two, esse seletor Aqui eu vou chamar de propriedade de animação. Animação. Primeiro, precisamos fornecer o nome da animação que está flutuando. Em seguida, precisamos definir o tempo de animação. Estou aqui para passar cinco segundos. Em seguida, precisamos fornecer a direção da animação, que está dentro e fora. Depois disso, precisamos fornecer a contagem de iterações, e eu quero executar essa animação para tempo limite infinito Eu quero configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, esse é o nosso visual de animação. Se você quiser tornar essa animação mais rápida, sim, basta reduzir o tempo de duração da animação. Se eu aguentar três segundos e depois definir esse arquivo e voltar para o navegador. Agora você pode ver que é assim que podemos aumentar a velocidade da animação. Essa é a primeira parte desse projeto. E na próxima parte desse projeto, vamos criar esse início e também vamos trabalhar em JavaScript. Obrigado por assistir a este vídeo fique ligado na próxima parte 58. Animação de estrela piscante usando Javascript parte 2: Então, se na parte anterior deste tutorial trabalharmos nessa animação flutuante, animação flutuante de texto. Agora vamos criar o senhor. Vamos criar essa mistura aleatoriamente. Vamos para o arquivo JavaScript. Estou no editor do meu estúdio de resultados e, a partir daqui, vou abrir o arquivo script dot js Primeiro, primeiro, precisamos selecionar essa tag de seção. Mas para isso, precisamos declarar uma variável AET com atraso e nossa variável é seção Seção posterior igual ao documento, ponto, seletor yy e, em seguida, dentro do latão redondo dentro dos códigos únicos, quero direcionar essa tag de seção, então vou passar a tag Nin section e semiconn para Nin section e semiconn Depois disso, vou declarar uma variável, outra variável, atrasada e o nome da nossa variável é J, posterior J igual a é atribuído com zero Em seguida, vou criar um loop while e definir uma condição. Por que J, menos de 200. Y J menor que 200 , então dentro do calibre eu quero criar a estrela Então, aqui, eu quero criar estrelas para declarar outra variável com atraso e o nome da nossa variável é senhor. Senhor, igual a documento, documento aqui, vou criar elemento, criar elemento e, das bases redondas, dentro do código único, quero criar o elemento I, I e semiconm para finalizar esta linha Depois disso, precisamos criar algumas variáveis que precisaremos posteriormente para criar as estrelas. Aqui vou declarar outra variável tardia, tardia X igual a matemática, matemática, ponto MD, piso Então, dentro dos vestidos redondos, aqui vou usar o método aleatório de Matt. Matemática, ponto matemático aleatório. Em seguida, dentro dos vestidos redondos, e eu quero multiplicar com janela, interior com W interno e semicônio dois nesta Eu quero satisfazer. O ponto interno da janela retorna a largura dessa janela do navegador e está retornando o valor do pixel. Em seguida, pegamos o valor e multiplicamos pelo valor aleatório do ponto Md Em seguida, convertemos esse valor em inter usando o método floor Em seguida, vou digitar, começar, ponto, estilo, ponto, P igual a dentro dos tiques traseiros, vou usar o cifrão. Então, dentro do surge, vou passar a variável chamada X. X pixel E semicone para esta linha. Em seguida, vou duplicar esta seção, vou alterar o nome da variável X para Y e também alterar a altura interna do ponto da janela, a altura interna Vou substituir X por Y. Então, em vez de tarde, vou usar o valor T. Em seguida, precisamos criar a largura e a altura da estrela Para isso, vou definir outra variável mais tarde e nossa variável é tamanho. Tamanho tardio igual à função matemática aleatória, aleatória. Eu vou multiplicar com. Aqui eu quero multiplicá-lo por quatro. Então, vamos acabar com essa linha. E então usaremos o tamanho para definir a altura e a largura. Em primeiro lugar, vou definir a largura do estilo de ponto estrela do tipo estrela. Comece com o estilo dot weed, igual ao interior dos carrapatos dos morcegos Em seguida, vou usar Dollar sine e dentro do clivus Head, vou adicionar um com o tamanho, e precisamos passar a variação em pixel Px e semicron Você pode notar a adição dela com um porque às vezes o ponto matemático aleatório retorna zero, e se eu multiplicar zero por quatro, ele também retornará Se passarmos diretamente apenas o tamanho, em alguns casos, ele pode retornar zero. É por isso que ele mais zero com um. Então, o valor mínimo que passamos é um pixel. E se passarmos de zero, isso não é bom para o nosso projeto. Para evitar essa situação, usamos apenas um valor aqui. Então, precisamos fazer a mesma coisa com a altura. Eu entendo essa linha, e vou substituir e aqui vou substituir pela altura. Então, agora temos a posição dessa estrela e a dimensão dessa estrela. E agora estão as estrelas em nossa seção. Para isso, aqui vou digitar section dot, apenhil method, append Dentro do recesso redondo, vou passar a estrela, a estrela e o semícone para finalizar essa linha Além disso, precisamos continuar esse loop, então vou incrementar a variável J, J mais mais Até que o valor J se torne 200, ele executará o loop. Então, basicamente, ele criará um total de 200 estrelas em nosso plano de fundo. Agora, se eu entrar no navegador e inspecionar esta página, inspecionar e mostrar essa tag de seção, agora você pode ver dentro dessa tag de seção que temos um total de 200 elementos I. Usando o iTag, criamos essas estrelas. Agora eles não são visíveis porque não estilizamos essas estrelas. Precisamos estilizar todas as estrelas. Vamos dar uma olhada no código do estúdio novamente. Lembre-se de que todas as estrelas têm tipos aleatórios. Eles não são iguais. Seu tamanho é diferente, sua localização é diferente, tudo é diferente um do outro. Vamos mostrar essa estrela. Vou entrar neste arquivo css de blocos e, aqui, vou direcionar a tag I que está dentro desta seção. Seção, depois dentro das alavancas do carro. Aqui, primeiro, vou usar a posição. Posição, vou torná-la absoluta, posição absoluta, e então vou definir plano de fundo, plano de fundo. E como plano de fundo, vou usar a cor branca, então vou usar esse valor HtGFFF Além disso, vou definir o raio da borda. Raio da borda, vou fazê-los circular, então eu uso 50% e vou definir esse arquivo Depois de configurar esse arquivo, se eu voltar ao meu navegador, você poderá ver todas as estrelas em tamanhos e locais diferentes. E agora precisamos brilhar essa estrela. Para isso, precisamos usar box shadow. Agora vamos voltar ao código estrial. E aqui, eu vou usar essa propriedade chamada box shady, esta, aqui e aqui, eu vou passar essa sombra de caixa Vou configurar esse arquivo. Depois de definir esse arquivo, volte ao meu navegador, agora você pode ver que todas as estrelas estão crescendo. Aqui você pode notar o efeito crescente das estrelas. E agora precisamos trabalhar no efeito de animação nas estrelas. Para isso, vou criar uma nova animação. Deixe-me te mostrar, então aqui eu vou digitar. Aqui vou digitar quadros-chave, adicionar quadros-chave, adicionar quadros-chave , e o nome da nossa animação é estrelas, estrelas dentro do carboidrato com 0% de duração, vou colocar opacidade, opacidade Nessa posição, quero definir a opacidade zero e, em seguida, duplicar Então eu vou duplicar esta seção aqui 10% de duração, eu quero definir a opacidade um Então, com 90% da duração, 90% da duração, quero definir a opacidade de um EGI, em 100%, deixe-me mostrar a 100% da duração, quero definir a opacidade zero agi E vou chamar essa animação de estrelas, copiar o nome da animação, e aqui vou chamar a animação. Animação. Primeiro, forneça as estrelas do nome da animação, depois precisamos fornecer a direção da animação. Vou passar de forma linear. Eu quero rodar essa animação por um tempo infinito, vou passar infinitamente. Vou configurar esse arquivo. Eu configuro esse arquivo se eu voltar ao meu navegador. Agora eu configurei esse arquivo, como você pode ver, nada aconteceu porque não definimos a duração da animação. E lembre-se, toda vez que recarregamos esta página, ela cria aleatoriamente a estrela em posições diferentes Você pode ver o resultado e forneceremos a duração usando o Java State porque queremos aumentar a estrela aleatoriamente Não queremos fazer crescer todas as estrelas de uma só vez. Para isso, precisamos entrar no arquivo JS. Aqui, vou criar outra variável, late, e o nome da nossa variável é duração. Duração tardia, igual a, vou usar o método map dot random, Mt dot random, Random. Em seguida, vou multiplicar por, e aqui vou multiplicar por dois e ponto e vírgula até dois e ponto e vírgula Depois disso, vou aplicar esse valor aleatório à duração da animação. Sumtyp start dot style, aquela duração da animação, duração da animação igual a aqui, precisamos usar acentos aqui, precisamos usar Basicamente, é o método de string Tabit então dentro do cifrão, depois ult para passar o cifrão e dentro do Cali ress eu vou fornecer duração, duração e, aqui, vou adicionar com duração Então eu vou passar a média de segundos e ponto e vírgula dois nesta linha Isso definirá um valor de duração aleatório para nossa animação de estrelas. Então, fique feliz se eu voltar ao meu navegador e agora você perceber que as estrelas estão piscando, mas estão pintando aleatoriamente É assim que criamos esse lindo efeito de animação. Aleatoriamente, colocamos a estrela em posição diferente desse fundo Além disso, ele começa aleatoriamente. Se eu recarregar a página, agora você pode ver como ela reproduz todas as estrelas aleatoriamente em posições diferentes Espero que agora esteja claro para você como podemos criar esse lindo projeto de animação. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 59. Modo dia: modo noturno — animação de estrada parte 1: Olá, pessoal. Bem-vindo à nova lição deste curso. Neste projeto, vamos criar essa interessante animação rodoviária. Como você pode ver nesta cena, temos um fundo de céu, sol e um rolo, e dois carros se movendo um contra o outro. Além disso, o fundo está se movendo. É por isso que isso nos dá um efeito realista. E sempre que clico no Sol, ele se transforma em lua e toda a cena fica escura. Então, isso é basicamente o modo escuro e o modo claro. Vamos mudar o escuro para claro e do claro para o escuro com a ajuda do JavaScript. E é um bom exemplo de animação de alternância em JavaScript. Então, vamos começar, então, como você pode ver, estamos no editor de código do meu estúdio e, como você pode ver no meu diretório de trabalho atual, temos o arquivo index StimlFlEscre dot js e o arquivo CSS style dot, e temos um total de duas imagens, big dot PNG, essa imagem, e também temos um car dot GIA, essa imagem, e vamos usar Agora, primeiro dentro do meu ponto de índice StimlFle dentro da tag body, vou pegar uma tag de seção section, section, e vou atribuir uma classe e vou chamá-la de SIM e , dentro da tag de seção, vou adicionar outra Aqui vou adicionar um elemento profundo, DV, e vou atribuir uma classe a essa classe de elemento profundo, e o nome da classe é sol Esse elemento vermelho é para o sol. Em seguida, vou adicionar as imagens de fundo. Para isso, vou pegar outro elemento Dev, Dv Dt, e vou chamá-lo de BG, BG significa background Então, dentro desse elemento DV, aqui vou usar o total de duas imagens IMG. Basicamente, vou usar a mesma imagem duas vezes, então vou amarrar o carro, é para o GIF do carrinho de imagem E vou atribuir uma classe e também uma classe, e vou chamá-la de carta um. Então eu vou duplicar esta seção, e isso é para o cartão dois Aqui eu uso a mesma carta e vou mover as cartas na direção oposta. Em seguida, vou configurar esse arquivo e voltar para o meu navegador. Agora é assim que parece. Agora precisamos entrar no arquivo CSS de estilo. Precisamos começar a estilizar. Agora, vamos entrar no arquivo CSS de estilo. Agora estamos no meu arquivo CSS e vou começar a estilizar Primeiro, vou selecionar a estrela seletora universal e, em Cali, a primeira propriedade, vou usar a margem De todas as direções, vou usar a margem zero para todo esse elemento. Então eu vou usar preenchimento, preenchimento, vou passar de zero novamente Em seguida, vou usar o tamanho da caixa, borda do tamanho da caixa Depois disso, aqui, vou mirar na cena, essa, a seção do pecado. Eu copio o nome da classe sine e volto para o arquivo CSS stylo Eu digito dot sin e, dentro do Caris, a primeira propriedade que vou usar é a primeira propriedade que vou usar posição e quero torná-la relativa Depois disso, vou atribuir altura a essa área, área da cena. Altura, aqui, vou usar 100 de altura da janela de visualização. Com isso, vou atribuir mais de uma propriedade, estouro oculto Eu me escondi na área de transbordamento. Em seguida, vou atribuir um plano de fundo gradiente. fundo, aqui vou usar um gradiente de vídeo, gradiente linear, digitado Soo, gradiente linear e vou passar Aqui, vou passar esse código de três cores e vou compactar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele se parece. Basicamente, isso vai me fornecer uma visão do céu. Aqui criamos um céu para o nosso pecado, todo o pecado, e depois, vou trabalhar no sol. Precisamos criar o sol. Para isso, vamos voltar ao código do estúdio de resultados e, desta vez, vou direcionar o nome da classe. Vou direcionar o D usando seu nome de classe dot N Sun. E lá dentro, o carnaval diz, aqui, eu vou usar a posição da propriedade, e vou torná-la absoluta Depois disso, vou usar o valor máximo. De cima para cima, de cima, eu quero movê-lo 100 pixels e do laboratório, do laboratório, eu quero movê-lo 55% Caso contrário, 50%, você pode usá-lo no seu caminho. Em seguida, vou atribuir uma altura interna ao sol com 100 pixels e também a altura de 100 pixels. Depois disso, vou atribuir uma cor de fundo. fundo para plano de fundo, vou usar a hashtag if if if is this color code Depois disso, basicamente é uma cor branca. Depois disso, vou atribuir o raio da borda. Quero fazer com que circule, digite borda, o raio da borda e herói passe 50%, e quero fazer com que circule Depois disso, quero transformar esse elemento. Mas antes de transformar esse elemento, vamos adicionar uma pequena sombra de pântano Em seguida, vou adicionar sombra de pântano. Sombra da caixa, sombra da caixa. Aqui eu vou usar box shadow, zero, zero, 50 pixels. Então eu vou fornecer a cor. Hashtag, tem tag, e eu vou passar se for esse código de cores Em seguida, quero fazer o ponteiro do cursor quando movo meu cursor sobre o sol Então, vou digitar o cursor e vou torná-lo um ponteiro Agora, para configurar esse arquivo, vamos voltar ao navegador. Vamos ver como é o nosso sol. Então este é o nosso sol e é assim que ele se parece, e como você pode notar, ele está brilhando por causa da sombra da caixa Vamos adicionar uma pequena transição a esse sol para um efeito de suavização quando eu o animo Para isso, vou digitar transição e, para transição, vou usar 0,2 segundo. Esta é a duração da nossa transição, e eu vou configurar esse arquivo. Agora vamos trabalhar no plano de fundo dessa cena. Vamos adicionar a imagem de fundo. Então, vou entrar em is a studio code eater” e, aqui, vou focar no plano de fundo usando o nome de classe Tat BG Então, dentro dos carros, a primeira propriedade, vou usar a posição e quero torná-la absoluta. Depois disso, vou usar outra propriedade Width, vou atribuir Width, aqui para atribuir 100%, 100%. Em seguida, vou atribuir altura, altura, herm para atribuir altura, 280 pixels Em seguida, vou atribuir plano de fundo, plano de fundo e, a partir do plano de fundo, quero adicionar o URL da imagem, o URL da imagem e, aqui, vou passar essa imagem de ponto grande PNG, ponto BG PNG. Em seguida, vou adicionar o tamanho do plano de fundo, o tamanho do plano de fundo e quero torná-lo de 1.500 pixels Essa grande área. Em seguida, quero repetir esse plano de fundo na direção XX para digitar repetição de fundo, repetição de fundo. Aqui vou passar a repetição X e vou definir esse arquivo. Agora vamos voltar ao navegador, como está. É assim que parece. Agora precisamos colocar o plano de fundo na parte inferior. Para isso, vamos dar uma olhada no código do estúdio novamente, aqui vou digitar bottom. Você precisa posicioná-lo na parte inferior, então digite o zero inferior. Vamos certificar e ver como ficou. Depois do zero, se voltarmos ao meu navegador, é assim que parecia. Em seguida, precisamos mover essa imagem para o lado esquerdo. Para isso, precisamos usar animação. Precisamos usar quadros-chave. Vamos fazer isso. Aqui, vou criar um quadro-chave no quadro-chave ate e vou nomear a animação animada Antecedentes BG. Então, dentro do carliss com 0% de duração, eu quero mover esse fundo Aqui, vou chamar propriamente a posição de fundo X. Quero mover esse fundo em XX de algum tipo de posição de fundo X, posição fundo X, zero pixel Então, eu duplico essa linha com 100% de duração, 100% de duração Eu quero mudar a posição. Desta vez, quero fazer com que seja de -1.500 pixels e vou definir esse arquivo Depois de configurar esse arquivo, vou chamar essa animação. Aqui vou digitar a animação. Nosso nome de animação é animate BG Animate background. Então você precisa fornecer a duração da animação e eu quero executá-la por muito tempo, então vou fazer com que seja de 25 segundos. Depois disso, quero tornar a direção da animação linear e executar essa animação para animação por tempo infinito, então vou torná-la infinita. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, agora você pode notar que é assim nosso plano de fundo se move da direita para a esquerda. Isso vai nos dar o efeito de corrida de carro. Agora, vamos examinar novamente o código do estúdio do usuário. Agora, vamos ladrilhar os carros. Primeiro, vou escolher a primeira carta usando o nome de classe dot car one. Como você pode ver aqui, eu uso dois cartões e, para os dois carros, usamos a mesma imagem, cartão dot GIA. Dentro do Cress, primeiro, vou definir a posição da posição do carro e quero torná-la absoluta Em seguida, vou digitar o valor inferior, inferior e, a partir da parte inferior aqui, vou colocá-lo em 20 pixels. Depois disso, vou atribuir a largura máxima. No máximo com largura máxima, vou fazer com que seja de 200 pixels. Em seguida, fornecerei o índice Z, o índice Z e o Helm para passar um, e vou definir esse arquivo Depois de configurar esse arquivo, vamos voltar ao navegador e ver como ele ficou. Então é aqui que colocamos nosso carro. Agora, precisamos fazer a mesma coisa com este carro, a segunda carta, mas precisamos mover esse carro na direção oposta. Agora, vamos colocar o segundo carro. Então, aqui, eu vou cavar esta seção. E em vez de usar o carro da classe um, vou digitar o cartão dois, posição absoluta e inferior, aqui, vou passar 50 e o máximo é o mesmo, e o valor do índice z, não quero o índice z, então vou fazer isso e elogiar esta linha E eu vou subtrair esse arquivo. Depois de submeter este arquivo, se eu voltar ao meu navegador, é aqui que colocamos o cartão Em seguida, quero mover as duas cartas na direção oposta. Para isso, aqui, vou usar um valor de ultimamente. Quero tirar nossa primeira carta do lado esquerdo, eliminando a última. Eu quero movê-lo de -200 a 200 pixels. E nosso segundo carro na direção oposta. Então, Hemoty da direita para a direita, eu quero movê-la em -200 Se eu definir esse arquivo e voltar ao meu navegador, agora você não poderá ver os carros porque desta vez esses carros estão fora do quadro. Nós movemos o carro para fora do quadro. Movemos nosso primeiro carro -200 pixels e movemos nosso segundo cartão -200 pixels no lado direito Agora, essa é a primeira parte. Na próxima parte deste tutorial, trabalharemos na animação desse carro. Obrigado por assistir a este vídeo fique ligado na nossa próxima parte. 60. Modo dia: modo noturno — animação de estrada parte 2: Olá, pessoal. É bom ver você de volta. Esta é a segunda parte deste tutorial e, nessa seção, começaremos com a animação de cartas. Então, vamos entrar no código de estúdio W a. Aqui colocamos nosso primeiro cartão p -200 pixels e nosso segundo cartão com a direita, -200 Agora, os dois carros estão fora da estrada. Agora precisamos criar uma animação que possa mover o carro dentro dessa estrada. Agora vamos criar a animação para nosso primeiro carro, Hebotype, nos quadros-chave de taxa e nosso nome de animação é Então, dentro das calibras com 0% de duração, aqui dentro das calibragens eu quero usar a propriedade transform, transform, transform, e vou usar translate X porque precisamos mover esse carro na direção x. Com 0%, eu quero fazer com que seja zero pixel. Então, com 90% e 100% de duração, 90% e 100% de duração, eu quero transformar esse elemento, o elemento carro, alguém use a probabilidade de transformação, transforme, traduza X. Então, dentro das rodadas, eu vou usar a função CALC Então, dentro da grama redonda, aqui, vou passar por 100 pontos de observação de ervas daninhas do porto H plus concatene com 200 pixels e eu vou satisfazer Da mesma forma, vou criar a segunda animação para o segundo carro, então dupliquei esta seção e substituirei o nome da animação Keyframe name car two aqui pelo valor de translação X, quero girar o carro na Precisamos usar outra propriedade chamada girar Y, girar Y aqui eu quero girar, o elemento do carro em 180 graus Além disso, em nossa função de elfo, precisamos mudar a direção. Precisamos passar Vu negativo de -100 vs e aqui, vou concatenar com Fisicamente, enraizado e alimentando o carro verticalmente, aqui e aqui, eu uso o V 100 vw negativo, não o H. Para substituir o HV W. Também em E a partir desse valor de -100 VW, temos -200 pixels. Também anotei esse elemento, então vou copiar esse valor e colá-lo aqui Agora, esse carro, a segunda carta, se move para a direita para o lado esquerdo. Agora vamos chamar a primeira animação. Em nossa primeira seção de carros aqui, vou digitar animação. Nosso nome de animação é carro um e nosso carro de animação um, e nossa duração de animação é de 18 segundos. Com essa animação, a direção é linear e contagem de iterações da animação é infinita Vou submeter esse arquivo. Depois de configurar este arquivo, se eu voltar ao meu navegador, agora você pode notar do lado esquerdo esse carro foi movido para o lado direito e leva um total de 18 segundos para completar a animação. Agora precisamos fazer a mesma coisa com o segundo carro. Desta vez, precisamos mover o segundo carro do lado direito para o lado esquerdo. Como você pode ver, o herói usa um valor infinito, então esse carro está se movendo repetidamente. Precisamos fazer a mesma coisa com o carro dois. Então, vamos entrar no código do estúdio, e aqui vou chamar a segunda carta de animação de duas. animação do tipo Sono e o nome da animação é cartão dois e a duração da animação é dois segundos Se você usar a duração da animação quilt second, isso aumentará a velocidade desse carro Em seguida, vou digitar linear, direção de animação linear e, em seguida, a contagem de interações de animação é infinita. Mas antes de definir esse arquivo, precisamos fazer algumas correções porque o herói usa vestidos redondos errados. Precisamos mover o interior dessa base redonda e separar o valor de rotação Y. Agora está correto. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que ele move o cartão na direção oposta. Você pode notar que a carta do lado direito é muito mais rápida do que carta do lado esquerdo porque usamos 12 segundos de duração para esta carta. Então é assim que podemos executar essa animação. Agora, precisamos trabalhar no modo diurno e noturno. Se clicarmos nesse sol, quero mudar para o modo diurno para noturno. Para isso, vamos entrar novamente no Visual Studio Code Eater Agora precisamos transformar a cena em pesadelo. Para isso, precisamos entrar nesse arquivo script dot Js. E primeiro, dentro desse arquivo de scripts de cães, eu vou mirar no sol. E para atingir o sol, vou declarar que uma variável C N é o custo sol igual a aqui, vou digitar documento, seletor Kiri de ponto de documento de hemótipo, seletor Kiri Então, dentro dos vestidos redondos, dentro dos códigos únicos, vou selecionar o Sundiv usando seu nome de classe sun e semiconm two Então eu duplico essa linha e vou mudar o nome da variável aqui, vou criá-la Desta vez eu vou desta vez eu vou selecionar o pecado. Aqui eu vou fazer isso pecar. Cante igual ao código de pontos do documento, seletor aqui, eu vou digitar Aqui, vou direcionar o Sindep usando seu nome de classe dot dot sin Então eu quero adicionar um evento. Quero adicionar evento de clique, tipo de música, sol, ponto, adicionar ouvinte de eventos Dentro da Bress redonda, quero adicionar um evento de clique Clique. Então eu quero executar e chamar a função. Vou digitar a função de seta em um recesso redondo e aqui é igual a maior que seno para a função de seta Então, dentro do recesso de cores, eu quero adicionar na aula Quero adicionar uma aula ao nosso syndep. Para isso, vou digitar Sin class least, class least dot Toggle Aqui eu uso o método toggle porque sempre que clico no botão dentro dos latões redondos, vou passar o nome da classe e o nome da classe é noite e ponto e vírgula para essa linha, e vou Sempre que clicarmos nesse elemento Sandv, ele adicionará uma classe a esse elemento Sindiv, que Se eu clicar duas vezes , nosso método de toalha removerá a classe desse elemento div É por isso que aqui usamos tobul agora, depois de configurar esse arquivo, vamos voltar ao navegador e inspecionar esta página. Depois de inspecionar esta página, vamos ver se ela funcionou corretamente ou não Sempre que eu clico nesse elemento Sundev, este de, como você pode ver, adiciona Aptar sin à noite de aula Ele adicionou uma nova classe Aptar sin. Se eu clicar neste sol novamente, como você pode ver, remova a classe. Usando essa classe, podemos pular para o modo noturno e, novamente, podemos pular para o modo D. Agora precisamos entrar nesse estilo de arquivo CSS e trabalhar no modo noturno. Agora, depois dos quadros-chave, vou trabalhar no SM para o tipo nightmde dot Clique no elemento da cena, classe Night , e dentro do Caris eu quero mudar a cor de fundo. Antecedentes. Antecedentes, quero fazer com que seja a hashtag dois, dois, dois, oito, duplo três Essa cor azul marinho. Caso contrário, você pode usar a cor cinza escuro, depende de você. Vou configurar esse arquivo. Agora, se eu voltar para o navegador e clicar no sol, agora você pode notar que ele se transforma nessa cor azul marinho escuro e nos dá o modo noturno. Agora vamos voltar ao código do Visual Studio novamente. Em seguida, quero mover o elemento Sundiv lado do colo ao clicar nele Vou cavar esta seção e, desta vez, quero selecionar o elemento Sundiv, que está dentro da cena e a classe noturna é ativada, então eu quero atingir o elemento Sundiv, o sol Aqui eu vou usar a propriedade chamada lept. Agora, em vez de usar 55%, quero mover esse elemento em 45% Com isso, quero mudar a sombra da caixa. Aqui vou digitar box shadow, zero, zero, zero, a cor da caixa é Hasa se for totalmente branca Vou configurar esse arquivo. Agora, para configurar esse arquivo se eu voltar ao meu navegador e passar o dia à noite, agora você pode ver esse sol movido para o lado esquerdo, 45%. É movido para o lado esquerdo quando eu transformo o dia em noite. Aqui, primeiro movemos esse elemento 45% para o lado esquerdo, depois removemos a sombra da caixa e a tornamos sólida porque precisamos remover o efeito crescente do sol. Em seguida, precisamos trabalhar na forma da lua. Para isso, vou duplicar esta seção novamente e, desta vez, precisamos trabalhar antes do pseudo-elemento do elemento Então, para digitar cólon e cólon antes. Então, dentro das calibragens, primeiro, vou criar um conteúdo em branco O conteúdo está totalmente em branco. Então eu quero posicioná-lo. Quero posicioná-lo absoluto porque quero mover esse elemento com esse sol quando ele se move de 55% a 45% Depois disso, precisamos colocá-lo. Precisamos colocar do topo aqui eu vou usar -20 pixels e da esquerda para a esquerda, eu quero colocá-lo 20 pixels Então eu vou definir dentro da altura desse elemento com 100%, também altura, 100%. Depois disso, vou definir o plano de fundo. Antecedentes. Para o plano de fundo, vou usar esse código de cores Haztag 22283 Basicamente, essa cor de fundo combina com essa cor de fundo do sol, a cor de fundo do sol noturno, porque precisamos esconder essa parte do sol Então eu vou converter essa caixa quadrada. Basicamente, por enquanto, é uma caixa quadrada, deixe-me mostrar se eu configurar esse arquivo e voltar ao meu navegador e clicar no sol, agora você pode ver uma caixa quadrada que está acima do sol e se eu a fizer redonda, ela criará uma forma de lua. Deixe-me te mostrar como. Então, se eu usar raio de borda, raio de borda, vou torná-lo 50% ou raio de borda, então vou definir esse arquivo Agora, se eu voltar ao meu navegador e clicar neste sol, como você pode ver, agora essa forma se transforma em forma de lua, a lua harpa, porque agora temos outro círculo acima da lua e essa cor do círculo é combinada com essa cor de fundo É por isso que é invisível. É por isso que podemos ver apenas a forma da lua. É assim que podemos criar essa bela animação usando Java Strip, CSS e HTML. E é assim que podemos transformar dia em noite e a noite em dia. Espero que agora esteja claro para você como podemos construir esse lindo projeto de animação. Então, obrigado por assistir a este vídeo Stune para nosso próximo projeto 61. Menu de navegação circular usando Javascript: Olá, pessoal. Bem-vindo à nova lição deste curso. Neste projeto, vamos criar esse efeito de toalha de menu circular, esse lindo efeito de toalha Como você pode ver, quando eu clico nesse botão de toalha, esses seis elos circulares aparecem e ele gira em torno do botão de toalha. E se eu clicar novamente, esses itens vão para trás do botão da toalha e se escondem. Para criar esse efeito, usaremos um pouco de JavaScript. Sem perder tempo, vamos começar a prática e ver como podemos criar esse lindo menu de toalhas Finalmente, estou no editor de código do meu estúdio de resultados e, como você pode ver, eu já crio um arquivo de estimativa de pontos de índice, estilizado cssfle e arquivo JS de pontos de script, e vinculo todo esse arquivo a este documento Agora, primeiro, dentro da etiqueta corporal, aqui vou pegar um recipiente. Vou pegar um recipiente profundo para digitar um recipiente de pontos profundos. Recipiente profundo dentro desse elemento Dev, vou criar outro botão DevElementF Então digite Dev dot Toggle. É para o botão Alternar. Então, dentro desse botão de alternância, eu quero adicionar o ícone do botão de alternância Para isso, vamos usar este site. Pontos iônicos: I/Slash, Lincons. Vamos obter todos os ícones deste site. Para obter os ícones, precisamos clicar em uso. Depois de clicar em Uso, aqui, precisamos copiar as duas tags de script. Então, para selecionar a tag Script e eu a copio, vou colocá-la dentro dessa tag body, mas antes que o ponto do script seja cinco. Eu quero configurar esse arquivo. Agora podemos usar ícones do site. Vamos adicionar o ícone de alternância. Para isso, vou voltar ao site e acessar a seção de ícones e, a partir daqui e da seção de pesquisa, quero pesquisar o ícone de adição. Vou usar esse ícone. Eu seleciono esse ícone. E então eu seleciono esse ícone. A partir daqui, precisamos copiar esse código. Eu copio esse código e volto para o editor de código do salt studio. Dentro desse DV de alternância, vou colocar esse ícone. Vou colar esse código de ícone. Vou configurar esse arquivo. Em seguida, abaixo do botão, quero adicionar o menu Para isso, vou usar a tag UL UL. Então, dentro dessa tag UL, vou pegar a tag LI. Como vou atribuir a variável Css à tag LI, digite o atributo de estilo, estilo e heterótipo ou nome da variável aqui vou atribuir valor, alguém usa dois pontos e ela para atribuir Então essa variável é igual a um. Além disso, vou atribuir uma classe a essa classe de tag UL e o nome da classe é min. Então, dentro desse item da lista, vou adicionar Nora A. Em seguida, dentro dessa tag âncora, vou adicionar o ícone Primeiro, quero adicionar o ícone inicial. Vou voltar para o navegador. E a partir daqui, vou procurar minha casa. Vou usar esse ícone, copiar o código, colocar o código dentro dele e obter a tag. É isso mesmo. Vou configurar esse arquivo. Agora eu pressiono definir este arquivo. Se eu voltar ao meu navegador e mostrar a página da web, aqui você pode ver o botão de alternância e o ícone inicial Então, vou acelerar esse processo e adicionar todos os ícones um após o outro. Eu acelero esse processo e, um após o outro, adiciono todos os ícones, como contorno da câmera, esboço do Parson, upAnoline, esboço do e-mail, contorno da chave, etc adiciono todos os ícones, como contorno da câmera, esboço do Parson, upAnoline, esboço do e-mail, contorno da chave, etc. Então, se eu voltar para o meu navegador, é assim que parece. Agora precisamos começar essa parte de estilo. Para isso, vamos entrar no código do estúdio do usuário e entrar nessa seção de estilo, na página de estilo, no estilo ou no CSS Primeiro, aqui vou importar uma fonte. Vou usar fontes pop in para este projeto, então vou passar, então vou importar uma fonte pop-ins do Google. Depois disso, vou usar a estrela seletora universal. Em seguida, o Calibra diz, primeiro, vou definir a margem zero de toda a ducção Além disso, vou usar preenchimento. Além disso, vou atribuir zero para toda a ducção Vamos remover a margem e o preenchimento. Em seguida, tamanho da caixa, tamanho da caixa, caixa de borda. Depois disso, vou definir a da fonte, a família da fonte. Dentro do curso único, vou digitar pop-ins e ele vem da família de fontes Sans Sansal. Vou configurar Depois de configurar esse arquivo, vou abrir meu navegador e o editor de código lado a lado. Agora, como você pode ver aqui, abro meu navegador e editor de código lado a lado. Depois disso, precisamos remover os itens da lista. Em seguida, vou estilizar os itens da lista. Então, eu digito a tag LI, defino a tag AI e, a partir daqui , vou remover seu estilo, então marcar , List, style e vou passar Nan wd. Depois disso, aqui vou selecionar a etiqueta âncora usando A e, dentro do Carlss, quero remover Vou usar decoração de texto, decoração de texto. Eu vou fazer com que não seja nenhum. Em seguida, vou estilizar a etiqueta corporal. Então, para selecionar o corpo. Depois, dentro da etiqueta corporal, dentro das cálices Primeiro, vou definir altura mínima, algum tipo de altura média, altura mínima, 100 VH Em seguida, vou usar a propriedade display porque precisamos alinhar o centro de conteúdo da exibição do tipo de página e vou torná-la fragmentada Depois disso, justifique o centro de conteúdo. Também alinhe, alinhe o centro dos itens. Com isso, vou adicionar um fundo gradiente. Então, digite a cor do plano de fundo. E aqui eu quero usar a cor do gradiente linear, gradiente linear e, em seguida, nos resfriados, vou passar o valor do gradiente linear Para essa cor de gradiente, vou usar esse valor 45 graus, eu quero girar esse gradiente em um ângulo de 45 graus, então eu uso essas variantes de cor, roxo claro e vermelho Vou configurar esse arquivo. Até configurar esse arquivo, ele não está funcionando porque aqui precisamos usar apenas o plano de fundo, não a cor. Agora, se eu definir esse arquivo, como você pode ver, agora ele está funcionando. Ele alinha todo o meio desta página vertical e horizontalmente Além disso, mudou a cor de fundo. Em seguida, precisamos direcionar o contêiner. Precisamos estilizar esse contêiner. Deixe-me mostrar esse elemento do continente. Para isso, vou copiar o nome da classe e voltar ao estilo CSS five. Aqui eu vou selecionar o elemento do continente e, dentro da calibração, primeiro vou definir maconha e vou ter que passar de 270 pixels Além disso, a altura de 270 pixels é uma caixa quadrada. Depois disso, vou usar a propriedade distal, display, e vou torná-la flexível Justifique o centro de conteúdo. Alinhe e alinhe o IM também no centro. Depois disso, também vou definir a posição e vou criar uma posição. Vou fazer com que seja relativo. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. E para entender a área quanta área usamos para esse contêiner, você pode usar a cor de fundo por enquanto. Deixe-me mostrar que alguém usa fundo, você pode usar qualquer cor. Eu vou usar a cor vermelha, ED Eu vou vender esse arquivo. Depois de definir esse arquivo, agora você pode observar a área. É para fins temporários. No início, criamos uma caixa quadrada. Em seguida, desfixamos para alinhar o ícone de alternância no meio Agora vamos estilizar esse botão de toalha. Precisamos estilizar esse botão de toalha usando o nome da classe. Vou copiar o nome da classe e voltar ao estilo ou arquivo CSS, e aqui vou selecionar o botão toalha usando o nome da classe e, dentro do recesso de cor, primeiro vou atribuir molhado para esse botão, vou usar 70 pixels Então eu vou atribuir a altura. Altura também de 70 pixels. Depois disso, vou definir a cor do plano. Cor de fundo, vou usar a cor branca. Branco. Além disso, na próxima propriedade, vou usar o raio da borda Raio da fronteira, vou chegar a 50%. Depois disso, vou definir a cor. Cor, e aqui vou usar cor, cinza escuro, Hazteg Aqui usamos a puberdade colorida porque os ícones são literalmente fontes Depois disso, vou usar a propriedade de exibição Display, vou torná-la flexível, justificar o conteúdo, justificar o centro de conteúdo Alinhe o item também no centro. Em seguida, vou definir o tamanho da fonte. Tamanho da fonte, vou torná-la de 30 pixels. Acho que 30 pixels são suficientes para isso. Se eu definir esse arquivo, é assim que ele se parece. Vamos ter uma boa aparência. Então eu quero fazer um ponteiro de cazar quando eu passo minha casa sobre Então, vou levar carros para cima, vou fazer dele um indicador Além disso, vou fornecer esse valor de índice de dados S índice 20. Em seguida, vou usar a propriedade de transição e também transição e fornecerei a duração da transição, 0,3 segundo. Vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Se você colocar minha coalhada nela, agora você pode ver que nossas cartas se transformaram em ponteiros Essa é a primeira parte deste tutorial. E na próxima parte deste tutorial, vamos iniciar o JavaScript e também vamos trabalhar nesse botão de alternância Quando clico nesse botão de luta, quero transformá-lo em um sinal, o sinal de cruz. Obrigado por assistir a este vídeo fique ligado na nossa próxima parte 62. Menu de navegação circular usando Javascript, parte 2: Bem vindos de volta, pessoal. Esta é a segunda parte deste tutorial e, primeiro, vamos trabalhar nesse efeito de clique. Quando clico nesse botão de alternância, quero girar esse botão de alternância e adicionar Xxs Eu queria girar o botão de alternância e fazer o sinal de mais Sempre que clico nesse botão, quero adicionar uma classe a esse continente profundo. Em seguida, estilizamos o botão Tuggle com base na classe. Para isso, precisamos acessar o arquivo JavaScript e selecionar a profundidade do continente. Dentro desta página de Javascript, vou digitar, vou declarar uma variável atrasada e nossa variável é container Deixe o contêiner equivalente a documento, ponto do documento, obtenha seletor de consulta, seletor de consulta e, dentro dos vestidos redondos, dentro de um único curso, eu vou passar, vou selecionar o contêiner e o semícone para o contêiner e o semícone para Em seguida, dupliquei essa linha e, desta vez, selecionarei o botão da toalha Vou substituir o contêiner por uma alavanca. Agora, depois de definir a profundidade do contêiner, precisamos direcionar o togo usando seu nome de classe Para isso, vou copiar o nome da classe toggle e vou digitar dot toggle e vou definir Depois disso, aqui precisamos executar um ouvinte Add even. Agora eu quero realizar um evento no Toggle. Para esse tipo de hemo, alterne, alterne ponto, adicione ouvinte de eventos dentro do latão redondo, aqui, vou Clique. Depois do coma, aqui chamamos a função. Então, digite o recesso redondo e a função de seta. Então, dentro do Carlss aqui, vou digitar container, dot, classist, dot, toggle, continental dot class dot toggle dentro do recesso redondo, quero E semicon para finalizar essa linha, e eu vou definir essa parte Essa quantidade de JavaScript que vamos usar neste projeto. Basicamente, ele adicionará classe quando eu clicar nesse botão Clique neste botão de puxar, deixe-me mostrar para você. Se eu inspecionar esse elemento, inspecione e agora você pode ver elementos em nossa seção corporal, se eu aumentar a área, agora você pode ver em nossa seção corporal, esta é a nossa classe de contêiner Se eu clicar nesse botão de alternância, agora você poderá vê-lo na classe ativa em nosso elemento contínuo Se eu clicar nele novamente, agora ele removerá a classe ativa. Então, quando clicarmos nele, adicionaremos a classe e, novamente, clicaremos nele, ele removerá a classe. De acordo com a turma, vamos estilizar nossos elementos. Então, vamos ao código. Então, vamos ao CSS e selecione o elemento continuativo. Primeiro, vou direcionar o elemento continuativo, subtipo de contêiner de pontos e, quando ele tiver a classe do tipo ativo ponto, ativo, quero selecionar o elemento alternativo Subtipo ponto, alterne. Então, dentro do recesso escarlate precisamos girar o botão Para isso, vou digitar transform propriety, transform e vou girá-la Gire e eu quero girá-lo até 45 graus, acho que 45 graus é bom para isso. 45 GRAUS. Vou configurar esse arquivo. Agora, para configurar esse arquivo. Se eu clicar nesse botão, agora você pode vê-lo girando o botão e transformando o sinal de mais em sinal de cruz porque eu o giro até 45 graus Se eu clicar novamente, novamente, ele volta ao sinal de mais. Quando eu clico nele, ele gira seno e quando eu clico nele novamente, ele volta para o sinal de mais Continue trabalhando na etiqueta UL. E como você pode ver, e como você pode ver, o URL para ter uma classe chamada Min. Portanto, copie o nome da classe e volte para o arquivo CSS de estilo. A partir daqui, quero selecionar o contêiner de pontos e, a partir do contêiner, quero direcionar o Min. Então, dentro do Cariss, primeiro aqui, vou usar a posição de chamada da propriedade Posição, vou torná-la absoluta. Depois disso, vou colocá-lo de cima, vou colocá-lo em zero. Então, da esquerda para a esquerda, vou colocá-lo em zero. Fisicamente, quero começar todos os itens desse canto e, além disso, vou definir internamente, nós. Vou usar nós 100% de altura, também 100%. Vou definir isso i Depois de definir este arquivo, é aqui que colocamos os itens do menu. Depois disso, precisamos selecionar o texto da PI, que está dentro do espaço do menu de estilo minutex Então, dentro da propriedade calibraSSF, vou usar a posição Posição, leme para usar a posição absoluta. Então, de cima, de cima, quero colocá-lo em zero pela esquerda, quero colocá-lo em zero novamente. Depois disso, vou definir com e altura, Largura, vou usar 100% de largura, altura, vou usar 100% de altura. Na próxima propriedade, vou usar pointer event, pointer events, e vou fazer com que seja none E se eu definir esse arquivo, agora você pode ver que todos os itens da lista estão posicionados no canto superior esquerdo Em seguida, vou direcionar a etiqueta âncora que está dentro da etiqueta LI Para isso, novamente, vou digitar o item principal da lista de IA espacial e vou direcionar toda a tag âncora A dentro da classe, a primeira propriedade que vou fazer a primeira propriedade que vou usar W. Largura 55 pixels de altura, 55 pixels Então eu vou usar cores. A cor e eu quero usar cores cinza escuro no tipo tem a tag 22. Em seguida, vou definir o plano de fundo. Como plano de fundo, vou usar cores brancas no tipo, tem tag, if if if. Além disso, vou definir o raio da borda. Raio da borda, vou usar o raio da borda, 50%. Em seguida, vou definir o tamanho da fonte e quero usar o tamanho da fonte de 22 pixels. Depois disso, vou usar a propriedade de exibição. Display, vou torná-lo linho, justificar o centro de conteúdo Alinhe, alinhe os itens e também centralize. Em seguida, vou usar outra propriedade chamada posição, posição, e vou torná-la absoluta. Aqui usamos a posição absoluta porque precisamos posicionar os links abaixo do botão da toalha. É por isso que usamos a posição absoluta. Também precisamos colocá-lo para passar do topo. Vou passar do valor de 50%, 50% e, a partir do final, também 50%. Vou configurar esse arquivo. Ao configurar este arquivo, é aqui que colocamos os elementos para colocar os itens do menu exatamente atrás do botão de alternância, precisamos usar a propriedade transform Aqui o tempo transforma Transforma, traduz, traduz dentro dos vestidos redondos, aqui. Dentro da camisa redonda está aqui, de Xxs eu vou passar A vírgula dos YXs também passará de -50%. Agora predefina esse arquivo, como você pode ver, colocamos com sucesso os itens da lista atrás do botão de toalha Agora está escondido atrás do botão da toalha. Além disso, vou adicionar eventos de ponteiro. Eventos de ponteiro, e eu vou torná-los visíveis novamente. Vou configurar esse arquivo. Em seguida, vou para a transição de adição e vou digitar 0,3 segundo. Vou configurar esse arquivo. Agora, sempre que clicarmos nesse botão de alternância, quero que o botão apareça novamente Agora, para isso, precisamos direcionar todas as tags LI quando elas tiverem a classe ativa. Para isso, vou digitar no container dot active. Cteant active space, quero segmentar o menu a partir do menu, quero segmentar toda a tag LI e, a partir da Iga, quero segmentar a anctg A. Então, dentro da escultura, ela deve usar a propriedade top, e eu quero colocá-la e eu Agora, se eu definir esse arquivo e clicar nesse botão de alternância, você pode notar que ele moverá todos os itens do menu para a posição superior naquele local Se eu clicar nele novamente, ele voltará e se esconderá atrás do botão de alternância Agora, a única coisa que resta é girar o link em torno do botão da toalha Para isso, precisamos entrar nos itens da lista, no menu, nos itens da lista aqui, e precisamos usar uma propriedade chamada transform transform aqui. Vou usar rotate value rotate E como tínhamos um total de seis itens para listar, como você sabe, tivemos um total de seis itens da lista. Então, precisamos usar a função Cal para calcular a rotação. Aqui vou usar calc e, dentro dos vestidos redondos, vou dividir 360 graus 360 graus por seis, porque temos seis itens da lista E aqui vou multiplicar variável dentro dos vestidos redondos, para que a primeira etiqueta LI gire 360 graus dividido por seis vezes Quer dizer, ele vai girar o primeiro elemento em 60 graus. Em seguida, ele girará o segundo elemento em 120 graus. Em seguida, ele girará o terceiro elemento em 180 graus. Em seguida, ele girará o quarto elemento. 240 graus, depois 300 graus e, por fim, ele vai girar o último elemento em 360 graus Se eu salvar esse arquivo e pegar esse ícone de toalha, você poderá ver o resultado. Sempre que pressionamos esse botão de toalha, ele espalha o item da lista ao redor do botão de toalha e seu ritmo é dividido igualmente. Mas o problema é que os ícones são girados. E agora precisamos revertê-los para revertê-los primeiro, vou copiar esse valor de rotação copie esse valor de rotação e, em seguida, pule para a tag âncora quando tivermos um contêiner ativo Aqui, vou usar a transformação da propriedade transform. Primeiro, vou usar o valor de tradução, traduzir aqui, vou usar -50% Vou usar o valor negativo de X e -50% de Y. E então vou usar o valor de rotação Então paga o valor de rotação e para alterar o ângulo de rotação Desta vez, vou usar -360 -360 graus e vou definir esse arquivo Depois de definir esse arquivo, basicamente invertemos essa rotação e agora você pode ver ao chutar os botões Agora, os links estão exatamente do jeito que queremos. Mas, finalmente, precisamos remover o fundo vermelho desse contêiner. partir daqui, a partir do elemento tina dip, vou comentar esta linha e vou configurar esse arquivo novamente, e agora é assim que nosso menu Togo se parece, e funcionou muito bem Espero que agora esteja claro para você como podemos construir esse projeto. Obrigado por assistir a este vídeo, Syuned para nosso próximo projeto 63. Fundo animado CSS puro: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação CSS pura. E esse é nosso projeto simples. E nesse projeto, vamos criar um plano de fundo animado. Somos CSS puro. Eu não vou usar nenhum javascript para isso. Vamos gerar aleatoriamente essas caixas, que se moverão para cima e depois Começa de baixo e sobe, e seu tamanho é diferente, seu posicionamento é diferente, sua forma é diferente, tudo é diferente um do outro E você pode notar que, de tempos em tempos, ele aumentou o raio da borda e se tornou um círculo O quadrado se torna um círculo e depois desaparece. Então, esse é o efeito que vamos criar hoje neste projeto com a ajuda de CSS puro, não vamos usar nenhum Javascript para isso. Então, vamos começar e ver como podemos fazer isso. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão light server, e já crio um documento HTML para nomear HTML de ponto de índice e já crio um modelo inicial Agora, primeiro, dentro da tag body, pegaremos uma tag Deep e executaremos toda a animação nessa tag Deep. E para essa tag profunda, você pode usar qualquer nome aqui e eu vou usar Dot Area. Área. E dentro da tag Z agora, precisamos criar várias caixas múltiplas. Para criar as caixas, você pode usar a lista nodal Caso contrário, você também pode usar a tag Deep. Mas eu gostaria de usar a lista nodal. Então, vou pegar uma lista nodal, e vou atribuir uma classe UL, ponto, vou atribuir um círculo de classe a esta Agora, dentro dessa lista nodal, vou pegar um total de dez círculos Quero usar dez itens da lista de tags LI. Para esse tipo de IA, multiplique por dez. E se eu pressionar Enter, como você pode ver, ele atribuirá dez tags LI. Isso aconteceu por causa da emissão. Aqui eu uso um código curto. Então, primeiro, temos uma área de chamada profunda principal, depois temos uma lista nodal, e eu atribuo uma classe a esses círculos da lista nodal Então, dentro da lista nodal, totalizamos dez itens da lista E agora eu vou começar o CSS, e aqui vou aplicar na página CSS. Então, vou colocar uma etiqueta de estilo dentro da etiqueta principal. No início, vou estilizar a área e atribuir uma cor de fundo a essa área. Deixe-me te mostrar. Então, aqui estou digitando ponto, área de pontos. Então, dentro da grossa, primeiro, vou aplicar a cor de fundo. Antecedentes. fundo, e eu vou aplicar uma cor de fundo meio azulada Esse código de cores. Depois de aplicar essa cor de fundo, fica assim. Então eu vou me inscrever. Nós, aqui vou me inscrever com 100% altura, 100 VH, visualização, altura do voto, e vou definir cinco Em seguida, vou mirar nos círculos inferiores. Então, aqui vou digitar círculos de pontos dentro do calvus . Dentro dos calles está a primeira propriedade que vou usar a que vou Posição, vou torná-la absoluta. Então, de cima, vou colocar zero da esquerda, vou colocar zero, e para com eu atribuo 100% e para altura, atribuo 100% de altura. E eu não quero fazer com que esses elementos transbordem do contêiner principal, então eu uso o cabeçalho overflow Depois disso, depois do estilo, da área e dos círculos, precisamos estilizar todo o texto LI. Precisamos atribuir diferentes alturas e larguras a essa etiqueta LI. Além disso, precisamos aplicar padrões de animação diferentes a todas as tags LI. Eu quero dizer que sua função de temporização. Agora vou aplicar o estilo comum a esse imposto LI. Então, aqui, vou selecionar o imposto que está dentro do elemento circular. Circule I, depois dentro da cleress e depois dentro da posição das cores Posição, aqui, eu vou aplicar a posição. Absoluto. Com isso, quero começar a animação pela parte inferior. Então, precisamos definir a posição inicial. Então, por enquanto, vou remover todos os elementos dessa área circular. Portanto, digite Hembrtype na parte inferior, na parte inferior - 150 pixels. Agora, relacionado a esse valor do botão, precisamos pegar o tamanho, a altura desses elementos. Se pegarmos mais de 150 pixels , aumentaremos o valor inferior. Caso contrário, ele mostrará o elemento naquele ponto, nessa seção. Depois disso, quero criar o bloco de tags LI. Portanto, ele atua como um elemento DV. Então, aqui, vou usar o bloco de exibição da propriedade de exibição. Em seguida, precisamos remover os marcadores. Para isso, aqui dentro do círculo, vou aplicar estilo de lista, estilo de lista nun, e quero definir esse Então, ele removeu os marcadores. Então, por enquanto, vou atribuir altura e ervas daninhas padrão às etiquetas LI. Então, aqui, eu vou amarrar maconha. Vou atribuir 20 pixels, também altura de 20 pixels. Em seguida, vou escolher uma cor de fundo e, para o fundo, vou usar fundo branco transparente. cor branca transparente, então fundo do tipo herm, e eu vou usar o valor Argiva, e para Alpha, aqui eu uso 0,2, que fique Em seguida, vou definir esse arquivo e, depois de subtraí-lo, você pode notar que há um pouco de preenchimento e margem nesse elemento, então precisamos removê-lo Então, como você sabe, por padrão, ele adiciona preenchimento e margem Então, vou usar o seletor Inu Virtual e inserir o carro ***, aqui precisamos Vou atribuir o valor da margem ao preenchimento zero e também zero, e vou definir esse arquivo Em seguida, ele rebaixará a margem e o preenchimento, a margem Keyfaul Essa é a primeira parte deste tutorial. Na próxima parte deste tutorial, vou animar todos os elementos E para isso, vamos criar um quadro-chave. Então, isso é tudo para este tutorial e para a próxima parte 64. Criando quadro-chave para animação: Ei, pessoal, é bom ver vocês de volta. Esta é a segunda parte deste tutorial e, nessa seção, vamos animar todas as tags Ali Então, para isso, vou definir um quadro-chave, algum tipo, no quadro-chave vermelho E o nome do meu quadro-chave é animate, animate circle. Então, dentro do Cariss dentro do Caribrass, com 0% de duração, vou gravar alguns vídeos Com 0% de duração, quero segmentar todas as tags LI e quero que elas sejam animadas. Também precisamos girar os elementos. Precisamos movê-lo para cima. Para isso, vou usar a propriedade transform, Transform, e aqui, vou usar uma função. Traduza Y. Traduza Y, eu vou defini-lo como zero Além disso, defino o valor de rotação de zero grau. Precisamos mover os elementos da parte inferior. É por isso que eu uso o valor de translação Y zero, e precisamos girar os elementos, mas por enquanto, com 0% de duração, eu disse zero grau Então, sempre que abrirmos a página, ela não rotacionará o elemento, nem traduzirá os elementos Em seguida, vou definir a oposição do elemento e quero torná-los visíveis. Então eu disse oposição 1. Depois disso, eu quero o raio da borda. Eu quero aplicar raio de borda nele, algum tipo de raio algum tipo Na hora de começar, quero uma curva afiada. É por isso que eu uso o valor zero do raio da borda. Em seguida, vou selecionar essa parte e duplicá-la e, com 100% de duração, vou alterar os valores Agora, no final da animação, precisamos mover todas as caixas para fora dessa tela a partir do lado superior. Suponha que a altura do elemento circular seja menor que 1.000 pixels, então vou mover o elemento para fora dessa área. Eu uso, vou usar o valor estimado de -1.000 pixels. Eu quero mover os elementos para cima até -1.000 pixels. Então, os elementos saem dessa área. Tivemos que retirar todos os elementos daqui, onde quer que nossas telas terminem. É por isso que eu uso esse valor. Então, eu quero que vá além disso. Agora vamos nos concentrar no valor da rotação. Se você quiser girar o elemento em um círculo completo, precisará usar o valor de 360 graus Mas se você quiser girar o elemento duas vezes em um círculo completo, precisará usar 720 graus vdu, deixe-me mostrar Vou alterar o valor e torná-lo 720. Se você dobrar 360 graus, ele se tornará 720 graus Então, ele vai girar o elemento duas vezes. Portanto, deve ficar claro para você que eu dei seu valor como 720 graus Isso significa que a caixa girará completamente de baixo para cima duas vezes Agora, sempre que chegarmos à posição final, quero reduzir a opacidade Então, vou criar opacidade, quero reduzir a transparência, então vou torná-la zero Além disso, quero arredondar os elementos. Então, vou definir o raio da borda. 50%, e precisamos fazer o círculo perfeito das caixas. É por isso que eu aplico esse valor, 50% do raio da borda. E agora precisamos aplicar essa animação de círculo animado a essas tags LI porque eu quero que, sempre que abrirmos a página, eu quero animar todas as tags LI Para isso, precisamos aplicá-lo em nossas tags LI. Então, vamos usar a animação de chamada de propriedade. Animação e nosso nome de animação é Animate circle. E eu quero executar a animação por 25 segundos, e eu uso a função de temporização de animação linear. Com isso, quero rodar a animação por um tempo infinito. É por isso que eu uso o valor infinito. Agora vamos configurar o arquivo e ver se ele funciona corretamente ou não. Depois de configurar o arquivo, como você pode ver, ele não está funcionando porque há um problema. Sim, há um problema. Ela circula, não circula. Então, para adicionar A e, em seguida, definir o arquivo novamente. Depois de definir o arquivo, você pode observar nossa animação. Ele gira os elementos. Além disso, de tempos em tempos, reduziu o raio da borda e, de tempos em tempos, tornou-se um círculo E também desapareceu quando chegou ao ponto final. E vai rodar a animação por tempo infinito. Primeiro, definimos a opacidade como um, para que fique totalmente visível E sempre que atinge a duração de 100%, fica transparente porque definimos o oposto como zero. Agora você pode ter tion. Criamos dez tags LI diferentes. Então, por que podemos ver apenas uma tag LI aqui? Porque os colocamos em uma única posição. É por isso que ele joga um em cima do outro. Então, espero que agora o conceito de como a animação funciona esteja claro para você. Agora eu quero mudar a posição do elemento LI, mas não neste tutorial. Então, na próxima parte deste tutorial, vou mudar a posição dos elementos LI. Portanto, fique atento a isso. Então, obrigado por assistir a este vídeo. Te vejo em breve. 65. Altere a posição e o tamanho dos elementos da caixa: Olá, pessoal, é bom ver vocês de volta. Essa é outra parte deste tutorial e, nessa seção, vamos colocar as tags LI, os itens de IA, em lugares diferentes. Além disso, vou alterar a função de temporização, atraso da animação e o tamanho. Então, um por um, vou selecionar todo esse elemento, listar itens. Para selecionar o item da lista, vou usar o seletor Nthhild Precisamos separar todas essas tags de LA porque elas são colocadas uma em cima da outra. Então, vamos usar o seletor Nthhild. Agora, antes de fazer isso, você pode notar que os círculos tributam. E nesse caso, você pode ver em nossa tecnologia LI que não usamos a propriedade P. Então, eles são colocados em uma única posição. E usando a propriedade EP, podemos separá-los. Mas, primeiro, precisamos criar esse elétron. Então, vou copiar esta seção, essa classe e o nome da tag, e depois vou colocá-la aqui. Nessa posição. Então eu vou usar Nth child, colon, NIT child e in child Primeiro, vou selecionar o primeiro filho, o primeiro elemento. E então eu vou usar chaves Carli. E dentro do surge, aqui, eu vou usar a propriedade. A primeira propriedade, vou usar a propriedade lipped, Lipt p e aqui, vou colocar o primeiro elemento, 25% Caso contrário, depende de você. Então, vou colocá-lo em 50%, 50%, depois cólon. Depois disso, vou definir dentro da altura porque usando dentro da altura, podemos definir o tamanho desse elemento. E lembre-se, não podemos considerar um valor maior do que isso, esse valor inferior. Não podemos pegar mais do que 150 pixels. Caso contrário, isso criará algum problema em nosso design. Então, por enquanto, vou definir com 80 pixels, também com altura de 80 pixels. Em seguida, vou adicionar um pouco de atraso na animação. Animação, atraso aqui, vou usar o atraso por zero segundo. Acho que é bom para isso. E eu não vou adiar nada para isso. Em seguida, vou fornecer a duração da animação. Em seguida, vou digitar a duração da animação e vou concluir essa animação em 18 segundos. Por padrão, ele competirá com a animação em 25 segundos. Mas aqui eu mencionei a duração dessa animação, que é de 18 segundos. Agora, para subtrair esse arquivo, você pode ver que esta é nossa primeira enésima propriedade filha Você pode observar o tamanho desse elemento da caixa. Tem 80 por 80 pixels e, de tempos em tempos, se converte em um círculo porque reduzimos a largura da borda desse elemento É por isso que se tornou um círculo e desapareceu. Agora, da mesma forma, precisamos colocar todos os dez elementos em lugares diferentes e também fornecer um atraso ou alterar a duração. Então, aleatoriamente, é um par e sobe e completa a animação, e vai criar esse efeito Vou duplicar esta seção. E desta vez, vou selecionar a enésima criança também. E aqui, eu vou mudar o tamanho. Vou torná-lo um pouco menor. Eu vou fazer isso para tipixel por 40 pixels. E vou adicionar um pouco de atraso nisso. Vou adicionar dois segundos de atraso, e a duração dessa animação é de 15 segundos. Eu reduzo a duração da animação. Caso contrário, vou fazer com que seja menos. Vou fazer com que sejam 12. E antes de eu definir esse arquivo, também troque a posição desse elemento Vou colocá-lo a 30% da esquerda. E eu vou subtrair esse arquivo Depois de definir esse arquivo, você pode ver aqui que após dois segundos de atraso, outra caixa aparece. Da mesma forma, precisamos colocar tudo isso. Então eu dupliquei essa linha. Desta vez, vou colocá-lo em 10%, 10% e vou mudar o tamanho dele. Vou fazer seu tamanho 30 por 30 pixels por 30 pixels. Vou adicionar 1 segundo de atraso. Além disso, vou mudar a duração. Vou fazer isso em 19 segundos. Depende totalmente de você como lidar com o atraso e a duração da animação, como definir a duração. Além disso, altero o valor da enésima propriedade secundária. Agora temos como alvo três. Depois de definir esse arquivo, você pode ver o terceiro elemento. Colocamos com sucesso o terceiro elemento nessa posição. E da mesma forma, vamos colocar tudo isso. Então eu dupliquei essa seção, e esse é o elemento número quatro, e eu quero colocá-lo em 40% Vou mudar seu tamanho. Vou torná-lo um pouco maior 90 por 90. Pixel. Sim, eu quero um pequeno atraso, três segundos de atraso, e ela completará a animação em 15 segundos, caso contrário, dez segundos, qualquer desvalor que você possa usar Você só precisa criar um efeito aleatório para isso. Esse é o nosso objetivo principal, e vou defini-lo novamente. Então, após 3 segundos de atraso, este é o nosso quarto elemento. Agora, o problema é que ele pode se sobrepor a outro elemento, outro elemento maior Então, vou mudar a posição disso. Eu vou chegar a 80%. Então eu duplico essa seção novamente, e vou escolher a quinta para mudar a posição Eu vou fazer 90. Além disso, vou reduzir o tamanho dele. Vou fazer com que seja de 30 por 30. Vou alterar o valor do atraso, atraso da animação em 1 segundo, a duração e também vou alterar a duração. Vou chegar ao 22º lugar. Então, novamente, vou duplicar este. Desta vez, vou mirar no sexto, sexto elemento, e aqui vou posicioná-lo em 75%. 75 e eu vou mudar de lado. Vou fazer 100 , 100 por 100. Eu quero uma caixa pequena maior, não mil. E eu tenho um pequeno atraso, cinco segundos de atraso, e sua duração é 22, é boa Caso contrário, vou mudar esse. Eu vou fazer isso em 18 segundos. Da mesma forma, vou duplicar esse e, para o sétimo elemento, vou colocá-lo em 95% E vou diminuir seu tamanho um pouco. Vou fazer com que seja de 50 pixels por 50 pixels, 50 pixels. E eu quero um pouco de atraso. Eu quero um atraso de dois segundos e vou mudar sua duração, e vou fazer com que seja de 17 segundos. E eu vou configurar o arquivo. Vamos ver como fica. Depois de configurar o arquivo, espero algum tempo, como você pode ver, sim, aleatoriamente, aparecem os elementos Mas nessa seção, temos várias lentes. Então, precisamos lidar com essa situação. Mas no lado esquerdo, aparecemos com muitos elementos ao mesmo tempo, então precisamos lidar com isso, então precisamos aparecer os outros elementos na posição esquerda no local esquerdo Então, para a oitava criança, vou pegar o valor de 20% Eu quero uma caixa um pouco maior, então vou usar a maior, de 150 pixels. E como eu disse, não podemos pegar mais do que 150 pixels. Caso contrário, caso contrário , pode criar problemas para o nosso design. Porque consideramos o valor inferior de -50 pixels. Além disso, vou mudar o acordo de animação. Vou fazer com que seja zero e a duração, vou definir a duração de 15 segundos. E para o nono, para o nono, vou colocá-lo em 40% Vou fazer com que sejam 40. Com isso, também vou mudar sua duração. Vou fazer 25 segundos, caso contrário, menos de 24 segundos. E agora vou dividir a última, que é a enésima criança número dez E eu vou colocar este em 85%. Não 85%. São simplesmente 20%. E devido ao tamanho, vou torná-lo um pouco menor. Vou fazer com que seja de 25 pixels, não mais do que isso, 25 por 25, e eu não quero, vou atribuir um pequeno atraso de dois segundos, e demorou um total de 22º para completar a animação Agora, vamos submeter o arquivo e ver se ele funciona corretamente ou não como estava Agora, para definir esse arquivo, é assim que ele aparece. Ele fornece um efeito aleatório com diferentes formas, tamanhos e lugares diferentes. E, como você pode ver, atribuímos diferentes durações, diferentes atrasos de animação. É por isso que ele cria esse lindo efeito. Espero que o conceito esteja claro para você. Depende de você como colocar e organizar essas caixas. Então essa é nossa animação básica. E, como você sabe, é uma animação de fundo, então precisamos colocar um texto sobre ela. Além disso, podemos criar menus flutuantes. Podemos criar muito disso, mas não vou fazer isso nesse tutorial. Eu vou fazer isso em nosso próximo tutorial.