Animação CSS e GSAP: jornada de iniciante para avançada

1. Introdução ao curso: Olá, bem-vindo ao CSS and GSP Animation, Bane to Advanced Journey Course Este é o curso mais detalhado e completo sobre animação CSS. Ele. Meu nome é John Shorter, sou Full Stew PP Park e instrutor on-line Agora, vamos ver o que vamos aprender com essa aula. Vamos começar este tutorial com o filtro CSS. Em seguida, aprenderemos a transição CSS, função de tempo de transição, o atraso da transição e, em seguida, entraremos na seção de transformação. Aqui, aprenderemos métricas de rotação, tradução, escala e distorção Depois disso, aprenderemos três transformações em d, três em translação, escala, rotação, etc A seguir, aprenderemos a parte mais importante, a perspectiva. Em seguida, fazemos a transformação angular do estilo, a visibilidade do backspace e, em seguida, vamos entrar na seção de animação do Sess, como quadros-chave, como podemos operar a animação Em seguida, temos a animação gular, preencha mais, o modo de colagem. Depois de aprender todas as propriedades de animação Sess, iniciaremos a animação GSP Sim, como eu disse, vamos aprender animação completa. Neste tutorial, eu também abordo a animação GSP. Nos dois primeiros tutoriais, apresentaremos como podemos usar a animação DSP e como podemos implementá-la E então vamos aprender sobre o cronograma do GSP, como podemos usar o cronograma do GSP Em seguida, criaremos um projeto usando a animação da linha do tempo do GSP Então, um por um, vou abordar vários projetos de animação CSS, como link animado, three D O flip, etc Deixe-me mostrar a demonstração prática, que tipo de projeto abordaremos nesta aula. Este é o nosso primeiro projeto em que vou criar um botão animado simples. Se eu passar o cursor sobre esse botão, você poderá ver a transição. É muito simples. Em seguida, criaremos esses três botões giratórios em D. Se eu passar o cursor sobre ele, você pode vê-lo apertar o botão e está escrito, clique aqui Clique, se eu passar o cursor sobre ele, como você pode ver, aperte o É um botão giratório de três D, e você também pode notar os três defeitos A seguir, criaremos um texto animado em tabela. Aqui você pode ver o efeito de oscilação da luz. Além disso, você pode ver o Shan. Este texto é t. Aqui você pode digitar qualquer coisa. Suponha uma palavra de olá. Esse é um dos efeitos mais legais que eu já vi. Em seguida, vamos criar essas vidas animadas. W vai seguir meu cursor. Como você pode ver quando eu me movo pelo cursor, acordo com a posição do cursor, ele segue as linhas. Sempre que eu movo o cursor acima do mot, ele muda a reação física Em seguida, vamos criar esse círculo de três D V. Você pode ver o movimento dos círculos. No próximo projeto, vamos criar a animação da camada D. Se eu passar o cursor sobre esse I, você poderá ver o resultado. Você pode observar as camadas transparentes abaixo dela. Se uma dívida, por cursor, voltar à sua própria conta. No próximo projeto, vamos criar essa animação de rotação em três d. Como você pode ver como se adequava ao volante. Vamos criar esse tipo de projeto. Em seguida, vamos criar essa animação de nuvem chuvosa. Como você pode ver nessa nuvem, como as gotas de chuva estão caindo e caindo no chão, ela se espalha. E vamos criar essa animação de carregamento. É uma animação. Por fim, vamos realizar essa animação horizontal da linha do tempo usando o GSA Sim, também abordaremos o GSAP neste tutorial. Vamos criar um projeto usando o GSA, uma animação de cronograma horizontal, e como você notará a transição desses O que você está esperando? Vamos começar a animação juntos. 2. Tutorial de filtro de CSS, parte um: Olá, pessoal, é bom ver vocês de volta. Este é o primeiro tutorial relacionado à animação CSS, e vamos começar este tutorial usando a propriedade de filtro CSS. Usando o filtro, podemos alterar os efeitos da imagem e temos um total de 12 efeitos que podemos usar em nossa imagem. Nosso primeiro nome de efeito é nenhum. Se você não quiser usar nenhum efeito, poderá usar essa propriedade. E usando a propriedade desfocada, você pode desfocar sua imagem. E usando o valor do brilho, você pode reduzir ou aumentar o brilho. Para contraste, você pode usar o valor de contraste, e o valor rompido funciona como uma sombra dessa imagem E usando o valor da escala, podemos usar nossa imagem em preto e branco E usando a rotação, você pode preencher cores diferentes com ângulos diferentes E nosso próximo valor é invertido. Se você se lembrar da antiga regra da câmera, poderá entender o efeito com muita facilidade. Nosso próximo valor é a opacidade. Usando o valor de opacidade, podemos controlar a transparência dessa imagem Se quiser controlar a saturação dessa imagem, você pode usar o valor de saturação. Se você quiser mais cor em sua imagem ou menos cor em sua imagem, você pode usar esse valor. Nosso próximo valor é CFA e nosso último valor é URL Esse valor de URL funciona com imagens SVD. Neste tutorial, abordarei esses seis efeitos. Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu Viso studio Cortor e meu navegador usando a extensão Live Server, e já crio um documento estil no meu diretório de trabalho atual Como você pode ver no meu navegador, há uma imagem e eu já insiro essa imagem usando a tag S. Como você pode ver na minha seção de estilo, dizemos 600 pixels de oito nesta imagem e altura ou dois, e eu vou usar todo esse filtro nesta imagem. Os efeitos desempenham um papel muito importante na animação CSS. É por isso que eu começo este tutorial com efeitos CSS. No início, vou usar a propriedade de filtro. Filtro. Nosso primeiro valor é nenhum. Se eu definir esse arquivo, aqui você pode ver não há alterações, não há alterações nesta imagem. Porque esse é o valor padrão dessa propriedade e nosso próximo valor é desfoque Então, para amarrar o Blur. Suponha que eu queira desfocar essa imagem em até quatro pixels. Se eu definir essa imagem, aqui você pode ver o resultado. Se quiser torná-lo mais desfocado, você pode aumentar o valor Suponha 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. O valor padrão dessa propriedade de desfoque é zero. Se eu usar o valor zero e depois definir esse arquivo, aqui você pode ver o resultado. Agora nossa imagem está claramente visível. E esse é o valor da idade de uso do desfoque, e nosso próximo valor é o brilho 100 é o valor padrão do brilho, 100%. Esse valor funciona com porcentagem. Se eu salvar esse arquivo, você verá que não há alterações e agora quero reduzir o brilho em 20%. Se eu salvar esse arquivo, você poderá ver o resultado. Isso reduz o brilho dessa imagem. Se você quiser voltar ao brilho normal, precisará passar de 100. Se eu definir isso, você poderá ver o resultado. Se você quiser aumentar o brilho dessa imagem, precisará passar mais de 100% do valor. Suponha que eu passe de 300%. Se eu definir esse arquivo, você poderá ver o resultado. Se passarmos 0% de brilho e depois definirmos o arquivo, aqui você pode ver que agora está completamente preto. Vamos pular para o próximo valor, que é contraste. Então, para digitar, contraste. Cem é o valor hábil do contraste, 100%. Se eu definir esse arquivo, você poderá ver o resultado. Se você quiser aumentar o contraste desta imagem, você precisa passar o valor e depois passar mais de 100%. Suponha 200%. Se eu definir esse arquivo, agora você pode ver o contraste. Se você quiser diminuir o contraste, precisará passar abaixo do valor de 100%, algo em 50%. Se eu definir esse arquivo, você poderá ver o contraste. Se passarmos o valor de 0% e depois definirmos o arquivo, agora você pode ver que não há contraste nesta imagem. Ou seja, p 0%, como você pode ver, nossa imagem fica cinza. Nosso próximo valor é sombra projetada. Mas antes de usar esse valor, vou reduzir a imagem. 400 pixels. Esse valor é semelhante à propriedade box shadow. Primeiro, precisamos fornecer sombra horizontal. Eu vou fornecer dez pixels. Isso é para a direção do eixo x. Em seguida, precisamos fornecer sombra vertical. Para o eixo y, vou passar dez pixels mais uma vez. Então eu vou passar o borrão da sombra, que é de que é Então precisamos passar a cor da sombra. Vou usar a cor verde. Se eu definir esse arquivo, aqui você pode ver o resultado. Você também pode alterar a ousadia da sombra. AI plus, zero pixel e, em seguida, defina o arquivo. Agora você pode vê-lo agir como uma sombra sólida. Além disso, você pode usar valor negativo nesse parâmetro. Suponha que eu queira essa sombra menos a direção yx. Se eu definir esse arquivo, você poderá ver o resultado. Este é o efeito de sombra projetada para empregos no Reino Unido, e nosso último valor é a escala de cinza. Deixe-me te mostrar. Escala cinzenta. Usando esse efeito, podemos converter nossa imagem colorida em uma imagem em preto e branco. 0% é o valor padrão desse parâmetro de escala de cinza. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Mas se eu usar 100% e depois definir o arquivo, agora você pode ver que transformou completamente essa imagem em preto e branco. Você precisa se lembrar, precisamos passar um valor entre zero 200%, não mais que 100%, você pode usar qualquer valor entre isso Suponha que eu queira passar de 70%. Se eu definir esse arquivo, você poderá ver o resultado. Agora, a imagem é preenchida com 70% de cinza e 30% de cor. Isso é tudo para este tutorial. No próximo tutorial, abordarei esses filtros restantes. Ele gira, inverte, opacidade, satura, sépia e Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial. 3. Tutorial de filtro de CSS, parte dois: Olá pessoal, é bom ver vocês de volta. Essa é a segunda parte do tutorial filtrado por CSS. Neste tutorial, abordaremos esses seis filtros Ele gira, inverte, opacidade, satura, Spa e URL Vamos começar a prática e ver como funciona. Aqui você pode ver, lado a lado, que abro meu Visual Studio Coreor e meu navegador usando a extensão Live Sever, e abro meu documento estel anterior para este exemplo Primeiro, vou chamar o filtro de propriedades do filtro. Nosso primeiro valor é rotacionar. E aqui você pode usar o valor de 0,23 a 60 graus. Vou passar 150 graus de DEG e, em seguida, definir esse arquivo, aqui você pode ver o resultado Se eu passar 100 graus e definir esse arquivo, você poderá ver o resultado diferente. Usando esse valor, você pode tentar combinação 360, 360 graus. Se eu definir esse arquivo, você poderá ver o resultado. Não há nenhum parâmetro negativo para esse valor. Vamos pular para o nosso próximo valor, que é invertido. Então digite inverter. Se eu definir esse arquivo, aqui você pode ver, ele inverte completamente a imagem e podemos passar o parâmetro de zero a cem por cento Suponha que eu queira passar de 0%. Se eu definir esse arquivo, aqui você pode ver esse é o valor diferente dessa propriedade Se eu passar 50% e, em seguida, definir o arquivo. Se usarmos o valor de 50%, agora ele está completamente transformado em cinza. Se eu aumentar o valor, algo em 70%, e definir esse arquivo. Agora você pode ver o resultado. Ela ainda inverte nossa imagem, mas você pode ver a camada cinza nela Da mesma forma, se eu reduzir o valor abaixo de 50%, algo em 20% e depois definir o arquivo, como você pode ver, não inverta a imagem completamente Esse é o indicador de uso do valor invertido. Nosso próximo valor é a opacidade. Como você pode ver, agora nossa imagem está totalmente visível e agora eu quero torná-la transparente. Para isso, precisamos usar o valor da opacidade. Se eu definir esse arquivo, como você pode ver, não haverá alterações porque não fornecemos nenhum parâmetro nesse valor. Agora eu quero tornar essa imagem semitransparente, então eu quero fornecer 50% Se eu definir esse arquivo, você poderá ver o resultado. Se você tornar essa imagem completamente transparente, precisará passar de 0%. Se eu definir esse arquivo, as imagens ainda existirão neste lugar, mas nós o tornamos completamente transparente. Se você tornar essa imagem completamente visível, precisará passar o valor de 100%. Espero que agora você possa entender esse valor, como funciona. Espero que agora você possa entender valor da oposição, como ela funciona Nosso próximo valor é saturar. Esse valor fornecerá força nos pixels coloridos. Então, para digitar saturar. Usando esse valor, você pode controlar a intensidade dessa cor. Cem é o valor padrão dessa propriedade, 100%. Se eu definir esse arquivo, aqui você pode ver que não há alterações e agora eu quero saturar essa cor Eu quero passar de 200%. Se eu definir esse arquivo, você poderá ver o resultado. Você pode ver a mudança da cor e, se quiser dessaturá-la, precisará passar um valor menor que 100%, algo Se eu definir esse arquivo, agora você pode ver a cor da imagem parecendo muito opaca Se eu passar o valor de 0% e depois definir o arquivo, agora você pode ver essa imagem completamente transformada em uma imagem em escala de cinza, significa imagem em preto e branco. Espero que agora você entenda o que é saturado. Nosso próximo valor é o CFA. Então, para empatar o CFA. Esse filtro oferece a aparência vintage dessa imagem. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode passar um parâmetro entre zero 200%. Se eu passar 0% e depois definir esse arquivo, agora você poderá ver a imagem real. Se eu aumentar o valor em 50% e depois definir o arquivo, aqui você pode ver que ele aplica algum efeito CFA nesta imagem, e 100 é o valor dessa propriedade Não há valor negativo nem valor de pixel para essa propriedade. O último valor é URL. Para isso, você deve ter conhecimento de imagens SVG. Se você não tem conhecimento básico de animação SVG ou imagem SGD, pode conferir meu curso Este curso está disponível nesta plataforma. Basta acessar meu perfil de instrutor e você encontrará este curso A última coisa que quero dizer, suponha que você queira aplicar vários efeitos nesta imagem. Suponha primeiro que você queira usar o efeito de sangue nessa imagem. Então, quero digitar sangue em pixel. Então eu quero aplicar o efeito PR nesta imagem. RP, 50%. Se eu definir esse arquivo, você poderá ver o resultado. E agora eu quero aumentar o brilho dessa imagem. Luminosidade, 200%. Se eu definir esse arquivo, você poderá ver o resultado. Você pode adicionar o efeito que quiser. Espero que agora esse conceito de filtro CSS esteja claro para você. No próximo artigo, vamos entender o que são transições CSS Obrigado por assistir a este vídeo, fique ligado no nosso próximo 4. Tutorial de transição de CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos uma nova propriedade relacionada ao CSS, que é a transição CSS. Essa é uma das propriedades mais importantes da animação CSS. Agora a pergunta é: o que é transição? Transição significa suavidade. Suponha que você queira alterar a posição de um objeto. Caso contrário, você deseja aumentar a largura do objeto. Deixe-me mostrar o exemplo. Como você pode ver no meu documento de estimativa, temos um total de dois D e quero aumentar a largura ao passar o mouse sobre meu objeto vermelho e já defini uma transição nesse objeto Se eu passar o cursor sobre esse objeto, você poderá ver o resultado Você pode ver que sempre que o contêiner estende a largura, você pode ver um efeito de suavidade. Se não usássemos o efeito de transição, o trabalho seria feito de uma só vez. Então você não pode ver a suavidade quando aumenta a largura É por isso que precisamos usar a transição. Da mesma forma, para nosso próximo objeto, reduzimos o raio da borda quem está sobre o objeto Deixe-me te mostrar. Como você pode ver, há uma bela transição. Se não usarmos essa transição, ela será feita de uma só vez. Isso seria feito com apenas um piscar de olhos em seu I. Para facilitar, precisamos usar essa transição Vamos falar sobre propriedades. Basicamente, a transição vem com cinco propriedades. Transição, propriedade de transição, duração da transição, atraso de transição e função de tempo de transição. Basicamente, nossa primeira propriedade é a menor quantidade de todas essas propriedades. Se você quiser usar essas quatro propriedades em uma linha, nesse caso, poderá usar somente a propriedade de transição. Basicamente, nossa primeira propriedade é a propriedade de transição. Usando essa propriedade, podemos especificar, onde você deseja usar essas transições Suponha que eu queira usar essa transição para o raio da borda. Caso contrário, W. Nesse caso, precisamos declarar o nome da propriedade, algo como propriedade de transição, raio da borda, caso contrário, propriedade de transição, W. Nossa próxima propriedade é a duração da transição Nessa propriedade, você pode especificar por quanto tempo deseja executar a animação. Nossa próxima propriedade é o atraso na transição. Usamos essa propriedade para determinar quando a transição começará, e nossa última propriedade é a função de tempo de transição. Esta propriedade vem com alguns efeitos embutidos. E usando esses efeitos, você pode controlar a suavidade dessa transição. É isso mesmo. Vamos estudar a prática e ver como funciona. Aqui você pode ver, lado a lado, que abro meu visoto Cortor e meu navegador usando a extensão Lipseer, e meu navegador usando a extensão Lipseer, eu já criei um documento ESTiml que abro meu visoto Cortor e meu navegador usando a extensão Lipseer, e eu já criei um documento ESTiml chamado index dot est melt. Aqui você pode ver as profundezas deste documento. E a altura da profundidade é de 200 pixels e W também de 200 pixels, e eu não uso nenhum efeito Hva nessa definição E agora eu quero aumentar essa profundidade. Então, primeiro, vou usar a propriedade de transição. Propriedade de transição. Como eu disse, quero aumentar a vitória. Vou chamar a propriedade de largura. Com essa propriedade, precisamos usar outra propriedade. Precisamos usar a propriedade de duração da transição , duração da transição. Usando essa propriedade, podemos declarar por quanto tempo queremos executar essa transição, e eu quero executar nossa animação por 2 segundos. Vou digitar dois a. Você pode pegar seu próprio valor. Caso contrário, você também pode usar milissegundos. Quando passo meu cursor nesse D, quero aumentar a largura do contêiner Vou usar pseudoclas. Passe o ponteiro com um ponto e dois pontos. Então, dentro das calibragens, quero aumentar a largura do contêiner Então digite com 400 pixels. Se eu definir esse arquivo, se eu definir esse arquivo e passar o cursor nessa profundidade, você poderá ver a transição e a suavidade dessa Da mesma forma, se eu passar o mouse para fora do meu cursor, você também pode ver a suavidade Vamos ver o que acontece se eu remover a transição. Vou comentar essas duas propriedades. Se eu definir esse arquivo e passar o cursor nessa caixa, você poderá ver o resultado Não há suavidade quando aumenta a largura Basta piscar de olhos completar a transformação. É por isso que precisamos usar a propriedade de transição. Porque dá um lindo efeito de suavidade a essa transformação Como você pode ver, nós apenas aplicamos essa transição em nossa largura. Mas se eu aumentar a altura em nosso seletor de foco, altura, 350 pixels E então defina esse arquivo. Se eu passar o cursor, como você pode ver, basta piscar no seu Iy, ele aumenta a altura Mas você ainda pode ver o efeito de suavidade na largura. Se você quiser adicionar o mesmo efeito para altura, depois de largura, vírgula, você precisa digitar o nome da propriedade, altura. Além disso, você precisa declarar a duração dessa transformação Eu quero usar três segundos. Se eu definir esse arquivo e passar o cursor sobre esse de, você poderá ver o resultado transformação de largura é concluída em dois segundos, mas nossa transformação de altura é concluída em três segundos. Além disso, podemos aplicar o mesmo efeito à cor de fundo. Alguns para digitar, fundo, verde. Também precisamos chamar essa propriedade de fundo, altura, coma, fundo. Como plano de fundo, quero usar quatro segundos. Se eu definir esse arquivo, e quem quer que seja minha maldição neste de, você pode ver que demorou quatro segundos para mudar a cor Esse é o uso da propriedade de transição e da duração da transição Agora eu quero usar todo esse valor em uma única linha. Vou comentar essas duas linhas e agora vou chamar apenas de transição. Agora vou usar todo o valor em uma única linha. Vou copiar os valores e colar aqui. Além disso, vou copiar os valores de duração e, depois de um espaço, vou colá-los. Se eu definir esse arquivo e colocar meu carro nessa profundidade, você poderá ver todos os efeitos de uma só vez Usando essa propriedade, podemos transformá-la em um forro. Este é o resumo de toda essa propriedade. Primeiro, você precisa declarar nomes das propriedades de transição e, em seguida, declarar duração da transição Agora, suponha que você queira usar dois segundos de duração de transição para toda essa transformação. Nesse caso, você pode digitar todos os cabelos A duplos e, além disso, você precisa passar apenas um tempo de duração, dois segundos. Agora ele vai aplicar o efeito de transição, todas essas propriedades. Se eu salvar este arquivo e o cursor hob M e o cursor hob neste de, você poderá ver o resultado Ao mesmo tempo, aplica a suavidade na altura, largura e fundo Se você quiser usar a mesma duração para todo esse efeito, você pode usar essa abreviatura, Isso é tudo para este tutorial. Em nosso próximo tutorial, falaremos sobre a função de tempo de transição. Obrigado por assistir a este vídeo Confira nosso próximo tutorial. 5. Tutorial de função de temporização de transição de CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, falaremos sobre a função de temporização de transição. Usando essa função, você pode controlar a suavidade dessa transição Estes são alguns valores comuns relacionados à função de tempo de transição, é linear, é, está fora, está dentro para fora, bic baser Além disso, temos outros três valores, mas esses não são tão importantes. Nosso primeiro valor é se é um valor padrão. Especifique um efeito de transição com um início lento, depois primeiro, depois e lentamente. Nosso próximo valor é linear, especifica um efeito de transição com a mesma velocidade do início ao fim Do começo ao fim , manteve a mesma velocidade. Nosso próximo valor está em. Especifique um efeito de transição com um início lento e nosso valor de saída desempenhará o papel oposto de is in. Especifique um efeito de transição com um final lento e nosso próximo valor de tempo será e in out. Especifique um efeito de transição com início e fim lentos, e nosso último valor é cúbico basier Vamos definir seus próprios valores em uma função básica cúbica Você pode definir seus próprios valores de tempo. Sem esse valor de seis, temos outros três valores, que são início da etapa, fim da etapa e etapas. Isso não é tão importante, mas é bom saber disso. Vamos ver como está funcionando na prática. Aqui você pode ver, eu abro um site Q week pens.com. Aqui você pode ver o exemplo em tempo real desses valores. Es linear e in is out e e e in out. No início, vou aumentar o tempo de duração, a duração para a segunda. Em seguida, vou começar este exemplo com o valor padrão. E. Se eu clicar no botão, vá, você pode ver o resultado. Nosso próximo valor é linear. Se eu clicar no botão Ir, você poderá ver o resultado. valor linear mantém a mesma velocidade do começo ao fim e depois entra. Se eu clicar no botão Ir, você poderá ver o resultado. E depois saia. Se eu clicar no botão Ir, você poderá ver o resultado, e nosso último valor é. Es no efeito de transição especificado de entrada e saída com início lento e fim lento Deixe-me mostrar outro exemplo. Como você pode ver, existem cinco d diferentes, e eu uso cinco valores de função de temporização diferentes para eles. Se eu aposto que meus carros são todos esses itens, você pode ver o resultado. Isso é para linear, e isso é para e, e isso é para. Isso é para mim, e isso é para. Espero que você possa entender a diferença. Vamos entrar no criador do Visual Studio e ver como podemos usá-lo Como você pode ver na tela, lado a lado, abro meu cortor do Visual Studio e meu navegador usando a extensão Lipsever, e já criei um documento EstiML chamado index dot EstiML chamado Como você pode ver, eu já criei d para este exemplo. Em nosso tutorial anterior, aprenderemos sobre a propriedade e a duração da transição Mas neste tutorial, vamos aprender a função de tempo de transição Então, vou ligar para essa propriedade. Função de temporização de transição. Vamos começar a prática com o valor padrão, que é E. Então digite, es. Se eu salvar esse arquivo e passar o cursor sobre esse de, você poderá ver o resultado Esse efeito de transição começa com lento, depois primeiro e depois termina com lento. Esse é o valor padrão e nosso próximo valor é linear. Alguns lineares. Se eu salvar esse arquivo e passar o cursor sobre esse de, você poderá ver o resultado Esse efeito de transição manteve a mesma velocidade do começo ao fim, e nosso próximo valor está em. De alguma forma, digitar está pronto. Se eu salvar esse arquivo e passar o cursor no fundo, especifico um efeito de transição com um início lento Da mesma forma, temos valor oposto, está fora. Alguma raiz que está fora. Se eu definir esse arquivo e colocar carros nessa caixa, como você pode ver, especifique um efeito de transição com um final lento Nosso próximo valor está em entrar e sair. Alguma raiz t está dentro para fora. Se eu definir esse arquivo e, mais uma vez, mouse com M carros nesse d, você poderá ver o resultado Ele especifica um efeito de transição com início e fim lentos. Vamos falar sobre outro valor, que são etapas. Alguns digitam etapas Aqui, podemos concluir nossa transição com etapas. Suponha que eu queira concluir essa transição em duas etapas. Eu quero passar dois aqui. Se eu colocar esse arquivo e mergulhar meus carros nessa profundidade, você poderá ver o resultado Como você pode ver em duas etapas, ele completa a transição. Se eu remover meu cursor, você verá o mesmo efeito Em duas etapas, ele conclui a transição, e agora eu quero concluir essa transição em cinco etapas. Se eu definir esse arquivo e passar o cursor sobre essa caixa, você poderá ver o resultado Em cinco etapas, ele conclui a transição. Esse é o valor do uso quas das etapas. Na maioria das vezes, tentamos evitar esse valor. Nós não usamos esse val. Mas, para fins educacionais, você deve ter conhecimento sobre isso. Nosso próximo valor é começar. Então eu vou digitar, Step, start. Se eu definir esse arquivo e passar o cursor nessa profundidade, você poderá ver em uma única etapa que ele completa a animação Mas se eu usar o valor final da etapa, Steve, end e definir esse arquivo, eu passo o cursor, ele iniciará minha animação após 2 segundos. Deixe-me te mostrar. Então, vou passar meu cursor nessa profundidade Como você pode ver em até dois segundos, ele inicia a animação e conclui a transição em uma única etapa Esse é o caso de uso do valor final da etapa. Vamos pular para o último valor, que é base cúbica Então digite base cúbica. Em Cuba Basier, você pode completar a animação em quatro etapas Quando usamos o valor da etapa, em nossa transição, não há suavidade. Mas no Qubic baser, podemos manter a suavidade da transição. Suponha que, para nossa primeira etapa, eu leve 0,5 segundo. Para a nossa segunda etapa, vou levar 0,6 segundo, e para a terceira etapa, vou levar 1 segundo. Para nossa quarta etapa, vou levar 0,1 segundo. Se eu salvar esse arquivo e ver meus carros ficarem no vermelho escuro, você poderá ver o resultado Começou devagar e depois terminou primeiro. Para nosso primeiro salvamento, demorou 0,5 segundo, e para nosso segundo Steve, demorou 0,6 segundo, e para nosso terceiro Steve, levou 1 segundo, e para nosso último salvamento, levou 0,1 segundo. Este é um caso cúbico versus valor. Você pode alterar a duração conforme desejar. Espero que agora esteja claro para você o que é a propriedade da função de tempo de transição. Em nosso próximo tutorial, falaremos sobre a propriedade de atraso de transição. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 6. Tutorial de atraso de transição de CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos o que é propriedade de atraso de transição. Basicamente, significa que depois de quanto tempo você deseja iniciar a transição? Vamos começar a prática e ver como funciona. Como você pode ver lado a lado, abro meu visa studio coreor e meu navegador usando a extensão Lipseer e abro meu documento de estimativa anterior Vamos usar a propriedade de atraso de transição. Vou amarrar o atraso da transição e passar o valor de três segundos, três S. Se eu definir esse arquivo e os carros Hoberm que estão nesse de, como você pode ver, depois de três segundos, ele inicia a Da mesma forma, se eu remover pelo cursor, como você pode ver, até três segundos, ele completa a transição. Você pode definir a qualquer hora que quiser. Este é o caso de uso da função de atraso de transição. Agora vou usar a abreviação de toda essa propriedade. Como você pode ver, o total usa quatro propriedades de transição, propriedade de transição, transição, duração, transição, função de temporização e atraso de transição. Eu quero fazer disso um forro. Para isso, primeiro, vou comentar essas quatro propriedades de transição. E então eu vou convocar a transição. Primeiro, você precisa declarar o nome da propriedade. No nosso caso, w, cole o som w aqui. Em seguida, precisamos passar o valor da duração da transição, que é dois segundos, dois A, e então vem função de tempo de transição, que é ese. E nosso último valor é o valor do atraso de transição, que é de dois segundos. Agora, não precisamos usar essas quatro propriedades. Só precisa lembrar que precisamos seguir essa sequência. Primeiro, unidade para mais propriedade, depois unidade para mais duração e, em seguida, unidade para mais função de temporização, último unidade para mais atraso. Se eu definir esse arquivo e o hobercur neste de, você pode ver em até dois segundos, ele inicia a animação Como você pode ver, funcionou perfeitamente. E agora eu quero te dizer uma coisa importante. Não é necessário que usemos transição apenas com o seletor Você pode usar essa transição ao carregar sua página. Além disso, uma coisa que você precisa lembrar é que, se não declararmos a propriedade em nosso caso, vou comentar isso E, em seguida, defina esse arquivo , como você pode ver, ele não funcionará corretamente. Precisamos declarar a propriedade antes de você usá-la em nosso seletor Huber, e você precisa se Agora vou usar essa transição com diferentes pseudoseletores Então, digite ativo. Primeiro, vamos remover o atraso. E então eu vou configurar esse arquivo. Se eu passar o mouse, meus carros estão tão profundos, como você pode ver, não está funcionando, porque nosso pseudo seletor Precisamos pressionar o mouse leak para executar essa animação. Deixe-me te mostrar. Como você pode ver, eu continuo pressionando o mouse leak e ele roda minha animação Quando nosso mouse stick estiver ativo, ele executará a animação. Caso contrário, não funcionará. Então, isso é tudo para este tutorial. Espero que agora todas as propriedades de transição estejam claras para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 7. Introdução 2D de transformação de CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos uma nova propriedade, que é transformar. Basicamente, vamos nos concentrar na transformação. Primeiro, vamos ver um exemplo, o que é transformar. Aqui você pode ver dois exemplos. Este é o elemento profundo normal, e esse elemento profundo é girado em 20 graus no sentido horário Usando a transformação, podemos girar em qualquer profundidade, no sentido horário, caso contrário, no sentido anti-horário Da mesma forma, temos outro exemplo. Essa é a profundidade normal, e esse elemento profundo está inclinado 20 graus ao longo do eixo x e dez graus ao longo do eixo y. Assim, podemos inclinar nosso elemento, girar nosso elemento, escalar nosso elemento e muito Vamos ver quais são os valores em duas transformações D. Como você pode ver, temos um valor total de 11 em duas transformações D. Traduza, traduza x, traduza Y, gire, escale, escale X, dimensione y, Q, QX, QY, e nosso último valor Temos outro valor, que é o valor padrão, que é nenhum. Usando a propriedade de matriz, você pode usar todo esse valor em uma linha. Nesta palestra, vou abordar esses quatro valores, traduzir, traduzir x, traduzir y e girar Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão Lip Server. Eu já criei um documento estil chamado index dot STL. Como você pode ver, dentro da minha estrutura estil, eu já criei o elemento Dep e defini 200 pixels de largura e 100 pixels de altura, além de definir a cor de fundo e Em primeiro lugar, vou começar essa transformação com o valor de rotação Então, podridão, transforma a propriedade. E vou usar o valor de rotação. Dentro dos parênteses, precisamos passar o parâmetro de grau. Suponha que eu queira girar esse elemento em 40 graus. Então eu vou passar 40 dg. Se eu salvar esse arquivo, você poderá ver o resultado. Da mesma forma, se eu passar 90 graus e depois salvar esse arquivo, como você pode ver, nosso elemento profundo gira 90 graus Nosso valor de rotação é parte de duas transformações. Ele não apenas gira nosso elemento, mas também gira nosso conteúdo Além disso, você também pode usar um valor negativo. Suponha que eu queira girá-lo -60 graus, -60. Se eu definir esse arquivo, você poderá ver o resultado. Se você quiser virar tão fundo, você pode usar menos 180 graus, caso contrário, 180 Se eu definir esse arquivo, você poderá vê-lo inverter nosso elemento. Essa é a idade de uso do valor de rotação. Vamos falar sobre nosso próximo valor, que é traduzir. Eu quero digitar traduzir cabelo. E eu vou configurar esse arquivo. Como você pode ver, não há mudanças. Agora a pergunta é: qual é o significado de traduzir? O método translate move um elemento de sua posição atual. Como você pode ver, essa é a posição atual desse elemento, e eu quero mover esse elemento 100 pixels, direção do eixo x e 200 pixels na direção yx. Nesse caso, precisamos usar esse valor, traduzir. Primeiro, precisamos passar na direção x xs, depois precisamos passar na direção y x. Primeiro, quero mover esse elemento na direção do eixo x de 100 pixels. Eu vou passar 100 px. Isso é para o parâmetro x xs. Em seguida, quero mover esse elemento, 50 pixels, direção y x. Eu quero passar 50 px. Se eu definir esse arquivo, como você pode ver, ele moveu o elemento de sua posição atual, acordo com o parâmetro, dado para x x e y xs. Na direção xxs, 100 pixels e na direção y xs, 50 pixels Vamos pular para o próximo valor, que é translate x. Então digite, traduza x e insira os parênteses, precisamos passar apenas um parâmetro, que é o parâmetro que é Esta função, movendo o elemento ao longo do eixo x. Se eu definir esse arquivo, como você pode ver, essa é a posição exata desse elemento porque não passamos nenhum parâmetro aqui. Agora eu quero mover esse elemento, 200 pixels, direção x xs. Vou passar dos 200 aqui, Px. Se eu definir esse arquivo, você poderá ver o resultado. Da mesma forma, temos outro valor para a direção yx. Então, para digitar translate Y. Como você pode ver, essa é a posição exata desse elemento, e agora eu quero mover esse elemento, 100 pixels na direção y x. Então, dentro do parêntese, vou passar 100 pixels Se eu definir esse arquivo, você poderá ver o resultado. Ele move nosso elemento 100 pixels na direção de y x. Então, isso é tudo para este tutorial. No próximo tutorial, abordarei essas propriedades de escala, escala, escala x, escala y. Obrigado por assistir a este vídeo, indique nosso próximo tutorial. 8. Escala 2D de transformação de CSS: Olá pessoal, é bom ver vocês de volta. Este é o segundo tutorial relacionado à transformação. Neste tutorial, aprenderemos esses três valores, escala, escala x e escala y. Vamos tentar entender o que é escalabilidade e como ela funciona Suponha que esse seja nosso elemento profundo, e essa seja a direção da saída e essa seja a direção do eixo Se você quiser diminuir e aumentar o tamanho desse elemento, nesse caso, precisará usar o valor da escala. Vamos aumentar o tamanho desse elemento. E para aumentar o tamanho desse elemento, precisamos de dois parâmetros, o parâmetro xs e o parâmetro y xs. Esse método de escala aumenta ou diminui o tamanho de um elemento. Vamos ver como podemos usá-lo na prática. Como você pode ver na tela, lado a lado, abro meu viso studio cooror e meu navegador usando a extensão Lipsear, e meu navegador usando a extensão Lipsear, já crio um índice estimado de documentos de dois pontos iML Então, vamos tentar aumentar o elemento profundo, 22 vezes a identificação original e três vezes a altura original. No início, vou chamar nossa propriedade de Name transform. Transforme a escala. Em primeiro lugar, precisamos passar o valor da direção xs. Na direção xs, eu quero escalar esse elemento duas vezes, então eu quero passar dois aqui, e na direção do eixo y, eu quero escalá-lo três vezes. Eu quero passar três aqui. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele escala nosso elemento e também dimensiona nosso texto dentro desse elemento. Da mesma forma, você pode reduzir o elemento. Vamos voltar à posição normal. Se eu definir esse arquivo, ele terá o tamanho normal desse elemento e agora quero diminuir o elemento profundo para metade de seu peso e altura originais. Para a direção do eixo x, vou passar 0,5. Para a direção do eixo y, também vou passar 0,5. Se eu definir esse arquivo, você poderá ver o resultado. Esta é a escala do valor da escala, e nosso próximo valor é a escala x. Deixe-me mostrar a você. Vamos voltar ao tamanho padrão, e vou chamar a escala x, vou definir esse arquivo. Esse método x aumenta ou diminui a largura de um elemento. Suponha que agora eu queira aumentar a largura do elemento profundo duas vezes. Nesse caso, precisamos passar apenas o valor x x, e eu quero aumentá-lo duas vezes. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele aumenta a largura duas vezes. Se você quiser diminuir a largura, você precisa passar o valor de 0,1 entre 0,9. Passe de som 0,5. Se eu definir esse arquivo, você poderá ver o resultado. Isso diminui a largura desse elemento. Vamos voltar ao tamanho padrão desse elemento. E agora nosso próximo método é escala y. Vou digitar escala y. Esse método de escala Y aumenta ou diminui a altura de um elemento Quero aumentar a altura três vezes em relação ao tamanho original. Então, eu vou passar três aqui. Se eu definir esse arquivo, você poderá ver o resultado. E da mesma forma, se você quiser diminuir a altura, precisará passar um valor entre 0,12, 0,9 Aqui, eu vou passar de 0,6, 0,6. Se eu definir esse arquivo, você poderá ver o resultado. Diminuiu a altura desse elemento. Esse é o caso de uso do valor escalonado. Espero que agora esteja claro para você como funciona. No próximo tutorial, aprenderemos esses três valores, Q, Q X e Q Y. Mas antes, aprenderemos outra propriedade, que é a origem da transformação Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 9. CSS Transform 2D Skew: Olá pessoal, é bom ver vocês de volta. Este é o terceiro vídeo relacionado à transformação do estudo de CSS. Neste tutorial, aprenderemos essas três propriedades, Q, Q X e SQ Y. Esse método é um elemento ao longo do eixo x e do eixo y pelos ângulos dados Dentro desse parâmetro, precisamos passar ângulos. Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu criador do so studio e meu navegador usando a extensão Lp Server, e já crio um documento ESTeML chamado index dot Então, primeiro, precisamos chamar o nome da propriedade transform. Alguns para digitar transform. Em primeiro lugar, vou começar este tutorial com o valor Q x. Vou passar Q x. Dentro desse parêntese, precisamos passar o valor do ângulo Usando esse valor, podemos mudar somente a direção x xs. Se usarmos esse valor a partir desse ponto, ele mudará o ângulo. Suponha que eu vá passar 20 graus. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, a partir deste ponto, é preciso um ângulo de 30 graus. Da mesma forma, você também pode usar valor negativo. Se eu primeiro -20 graus, e depois definir esse arquivo Como você pode ver, a partir deste ponto, ele gira na direção do lado direito, e também nosso ângulo de rotação é de 20 graus Mas nesse caso, -20 graus. Como você pode ver, esse movimento de rotação apenas na direção, não na direção do eixo y. Vamos voltar à posição padrão e vou usar o valor sk y. Q, y. Agora, a rotação funciona na direção vertical. Se eu passar 20 graus aqui, 20 DEG e definir esse arquivo, você poderá ver o resultado A partir desse ponto, ele se moveu 20 graus na direção yx. Basicamente, ele é movido para baixo e, se você quiser movê-lo para cima, precisará passar o valor negativo Se eu passar de -20 graus e depois definir esse arquivo, você poderá ver o resultado Espero que agora esteja claro para você como as propriedades Qx e Q y funcionam Vamos falar sobre nosso próximo valor, que é apenas Q. Primeiro, vou voltar para a posição padrão e vou digitar somente Q. Nesse método, e vou digitar somente Q. em nosso primeiro parâmetro, precisamos passar o ângulo x x x e, em seguida, precisamos passar o ângulo y x. No início, vou passar pelo ângulo de 30 graus x xs. E então eu vou passar pelo ângulo de 20 graus do eixo y. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, com valor positivo, você também pode usar valor negativo. Suponha que eu queira passar -20 graus na direção yx. Se eu definir esse arquivo, você poderá ver o resultado. Isso depende de você. Como você pode usar esses valores? Vamos falar sobre outra propriedade, que está relacionada à transformação, e esse nome de propriedade é transform origin. Agora, a questão é: qual é a idade de uso da propriedade de origem da transformação? Isso permite que você altere a posição no elemento transformado. O que isso significa? Suponha que esse seja nosso elemento D. Se você se lembrar do valor da rotação, também poderá se lembrar do ponto de rotação, que é o centro desse elemento Esse ponto de rotação está no centro de x xs, também y xs. Mas eu não quero girar meu elemento a partir do ponto médio. Eu quero mudar o ponto de rotação. Eu quero girar esse elemento a partir desse ponto, significa canto superior Da mesma forma, se eu quiser girar a partir desse ponto , esse é o nosso canto inferior direito e esse é o canto inferior esquerdo Além disso, este é o nosso canto superior direito. Você pode entender o ponto pelo nome. Caso contrário, você pode obter um valor percentual ou de pixel. Se você quiser pegar o ponto de rotação dentro desse elemento profundo, algo nessa posição, sim, você pode. De acordo com a posição do ponto atingido, você precisa pegar 20% na direção do eixo e também 30% na direção do eixo y. Apenas uma coisa que você precisa lembrar: usando essa propriedade, você pode alterar a posição do elemento de transformação. Vamos voltar ao criador do Visio Studio e ver como funciona Como você pode ver, essa é a nossa profundidade normal. Eu giro essa profundidade da posição central para 20 graus. Mas se eu mudar a posição da origem da transformação a partir deste ponto, algumas para empatar, transformar a origem. E eu vou passar da posição esquerda do eixo x e da posição superior do eixo. Então, para passar por cima. Antes de configurar esse arquivo, quero voltar a essa posição normal. Vou comentar essas duas linhas. Se eu definir esse arquivo, agora ele voltará à posição normal. Agora vou descomentar essas linhas, e agora vou configurar esse arquivo, focando neste canto Se eu definir esse arquivo, você poderá ver o resultado. Deste canto, ele se move para 20 graus. Vamos aumentar o valor da rotação. Então eu vou digitar, 80 graus. Se eu definir esse arquivo, você poderá ver esse resultado. A partir desse ponto, ele gira 80 graus. Vamos voltar à posição padrão. Mais uma vez, vou mudar o ponto de rotação. Então, vou digitar no canto inferior direito. Agora, a partir deste ponto, ele girará nosso elemento Se eu definir esse arquivo, você poderá ver o resultado. Agora, o ponto de origem da rotação é esse ponto. Vamos voltar à posição padrão. Mais uma vez, vou mudar a posição da origem da rotação. Mas desta vez, vou usar qualquer canto. Agora eu quero um ponto de rotação, algo neste lugar. direção do eixo X, vou passar 20%, e na direção do eixo y, vou pegar 40%. Se eu definir esse arquivo, você poderá ver o resultado. A partir desse ponto, ele gira o elemento em 80 graus. E se eu passar o valor x xs zero e o valor yx, 100 e depois definir o arquivo, e também vou alterar o ângulo de rotação, 20 graus e, em seguida, definir esse arquivo novamente, como você pode ver, agora nosso ponto de rotação é o canto inferior Porque na direção xs, usamos o valor zero, mas na direção do eixo y, usamos o valor de 100%. É por isso que nosso ponto de rotação é o canto inferior. Agora, a questão é: qual é o caso de uso dessa propriedade? Basicamente, essa propriedade é usada para animação. Como você sabe, este é o nosso tutorial de animação CSS. É por isso que precisamos aprender sobre isso. Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos nosso próximo valor. Vamos aprender nosso último valor, que é métrica. Obrigado por assistir a este vídeo, sintonize nosso próximo tutorial. 10. CSS Transform 2D Matrix: Olá, pessoal, é bom ver vocês de volta. Este é o último tutorial relacionado à transformação. Neste material, aprenderemos o valor da matriz. Agora a questão é: o que é matriz? O método matricial combina todos os dois métodos de transformação em um. Esse método usa um total de seis parâmetros, contendo a função de matriz, que permite girar, dimensionar, mover e inclinar Especialmente se não usarmos muito esse elemento. Então, vamos ver como funciona. Como você pode ver, lado a lado, abro meus vídeos para seu criador e meu navegador usando a extensão Lipseer, e já crio um documento EstiML chamado Index four Primeiro, chamarei o nome da propriedade transform e chamarei nossa matriz de valores. Primeiro, precisamos passar o valor da escala x. Eu vou passar por um. Em nossa direção excessiva, não quero escalá-la. É por isso que eu passo um valor. Em seguida, precisamos passar o valor do céu. Vou passar por -0,3. E então precisamos passar o valor Q x. Aqui, eu vou passar de zero. Em seguida, precisamos passar o valor y da escala, e aqui vou passar um. Agora temos apenas dois parâmetros restantes, traduzir x e traduzir Y, para traduzir x, vou passar zero, e para traduzir y, vou passar zero. Se eu definir esse arquivo, como você pode ver, é apenas inclinar nosso elemento profundo em -0,3 graus Se você quiser escalar esse elemento duas vezes, precisará passar a escala x dois e a escala y dois. Se eu definir esse arquivo, você poderá ver o resultado. Com Q, ele também escala nosso elemento. Esse é o caso de uso desse método matricial. Agora, vamos usar todos os dois valores de transformação, um por um, com efeito de foco e tentar criar uma animação de foco. Vou comentar essa linha e, primeiro, vou criar o pseudo seletor, D dois-pontos Então, dentro das calibrações, vou usar a propriedade transform e vou amarrar transform Primeiro, vou usar o valor da escala e quero escalar esse elemento no geral duas vezes, então vou passar duas aqui. Se eu definir esse arquivo e passar o cursor sobre esse elemento de, você poderá ver o resultado Como você pode ver, em uma única etapa, ele completa a transição. Para proporcionar uma suavidade nessa transformação, precisamos usar a propriedade de transição Quero vincular a transição aqui. Primeiro, precisamos declarar o nome da propriedade e o nome da nossa propriedade é transform Em seguida, precisamos declarar o tempo de transição, que é de 1 segundo Se eu definir esse arquivo e passar o cursor sobre esse elemento de, você poderá ver a suavidade dessa transformação Mas neste exemplo, nosso elemento profundo é dimensionado a partir da posição central. Mas agora, quero mudar a posição de origem da transformação. Vou amarrar, transformar a origem. Parte superior esquerda. Se eu definir esse arquivo, e quem quer que sejam meus carros nesse elemento profundo, como você pode ver, a partir deste ponto, ele escalará nosso elemento profundo Vamos usar nossas próximas duas propriedades de transformação d, que é translate. Alguns para duplicar essa linha, e eu vou comentar a anterior Aqui vou amarrar, traduzir. E eu quero mover nosso elemento profundo, 200 pixels, direção xs, e um pixel pt, direção yx. Se eu salvar esse arquivo e fazer macers nesse elemento profundo, você poderá ver o resultado Ele move nosso elemento profundo, 200 pixels, direção do eixo x, e um pixel pt, direção yx. Vamos usar nosso próximo valor, que é distorção. Mais uma vez, vou duplicar essa linha e comentar a anterior Aqui vou amarrar o SQ. E na direção x, eu quero girá-la 20 graus, e na direção y xs, eu quero girá-la em dez Se eu definir esse arquivo e houver mais mixers nesse dispositivo, você poderá ver o resultado Como você sabe, nossa origem de transformação foi omitida. Quando os macers do mouse estão neste dispositivo , você pode ver o resultado Espero que agora esteja claro para você o que é a transformação em dois d e como podemos usá-la em nossa animação. Obrigado por assistir a este vídeo Em nosso próximo tutorial, aprenderemos três transformações d, ajuste de estado para nosso próximo tutorial. 11. Tutorial de Transformação 3D de CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, iniciaremos a transformação de três d. Em nosso capítulo anterior, aprendemos sobre duas transformações d. Mas neste capítulo, aprenderemos a transformação de três d. Sem a transformação em três d, não podemos imaginar a animação. Então, vamos ver os valores relacionados à transformação de três d. Como você pode ver, totalizamos dez transformações de três d relacionadas a valores Gire x, gire, gire z, estado três, transfira, transfira três, escala três D, escala, prospectiva No método rotate x, precisamos passar o valor do ângulo Da mesma forma, precisamos passar o valor do ângulo para girar y. Mas para girar três no método D, precisamos passar o valor total de quatro parâmetros, x, y, z e o valor do ângulo Neste tutorial, vamos abordar esses quatro métodos, girar x, girar, girar e girar três D. Vamos ver como esses métodos são trabalhados Como você pode ver, temos um total quatro elementos d em nosso documento. E eu optei por um valor de rotação diferente para este exemplo. Se eu passar o cursor para girar o elemento x d, você poderá ver a transformação Dessa forma, girar x funcionou. Aqui, usamos o valor de rotação x com prospectivo. Se usarmos o valor de rotação x, ele desenha uma linha na direção do excesso x desse ponto até esse ponto Deixe-me mostrar o verdadeiro exemplo. Suponha que seja um elemento profundo. Se eu usar o valor de rotação x, ele criará uma linha desse ponto até esse ponto Esta é a nossa linha de origem de transformação. Se eu passar um valor positivo, algo em 40 graus, ele vai girar nosso elemento dessa maneira Se eu passar de -40 graus , ele girará esse elemento dessa maneira Consegue ver meu rosto? Absolutamente não. Mas se eu usar um ângulo de 90 graus , ele vai girar esse elemento assim Agora, o elemento não está visível corretamente. Mas se eu girar 180 graus, agora você pode ver a parte oposta desse elemento Dessa forma, a rotação do valor funciona. Vamos falar sobre nosso próximo valor, que é rotacionar. Se eu ver micas tão profundas, você pode ver o efeito. Além disso, usamos valor prospectivo com isso. Que você possa entender esse valor facilmente. Se usarmos o valor de rotação y, ele desenha uma linha desse ponto até esse ponto, significando a direção y xs. É por isso que o chamamos de rotação Y. Usando o valor do ângulo, você pode torcê-lo por site, caso contrário, pelo Vamos ver o exemplo de como funciona. Se usarmos o valor de rotação Y, ele desenhará uma linha desse ponto até esse ponto, significando a direção yx Essa é a nossa linha de origem e, por padrão, ela sempre veio para o centro. Se eu passar um parâmetro positivo de 40 graus, ele girará esse elemento dessa maneira Da mesma forma, se eu passar de -40 graus , ele girará esse elemento dessa Se eu girar esse elemento, 90 graus, agora todo o elemento fica menos visível e você pode ver meu rosto Se eu girá-lo, 180 graus, você pode ver a parte oposta desse elemento Nosso próximo valor é girar Z. Se eu passar o cursor sobre esse de, você poderá ver Ele define três rotações em D ao longo do eixo Z. Vamos ver como funciona. Este é o exemplo da rotação z x. Ele define três rotações d ao longo do eixo z e, por padrão, ponto de origem está sempre no centro e, usando valor positivo ou negativo, podemos girá-lo dessa maneira, caso contrário, dessa maneira Nosso último e último valor é girar três d. É definir três rotações completas Se eu passar o cursor sobre esse dispositivo, você poderá ver o resultado No final deste exemplo, darei uma demonstração de como isso funciona. Vamos começar a prática com o valor de rotação x. Como você pode ver, lado a lado, abro meu curador do visuo studio e meu navegador usando a extensão de servidor Lip Eu já criei um documento EstiML chamado demo Dot estiml. Como você pode ver dentro de um contêiner principal, eu crio um contêiner de caixa e defino uma largura de altura semelhante para nosso contêiner pai e nosso contêiner filho Para o contêiner principal, defino uma cor de fundo cinza e, para o contêiner filho, defino a cor de fundo chocolate. Vamos chamar a propriedade transform e usar o valor rotate x. Vou chamar transform rotate x, e aqui precisamos passar o parâmetro do ângulo de rotação Vou digitar para o grau T. Se eu definir esse arquivo, aqui você pode ver o resultado. Ei, funcionou corretamente, mas você não consegue sentir muito a mudança. Para isso, vou usar a perspectiva e transição que você possa entender com muita facilidade Vou usá-lo com seletor de foco, ponto, caixa, dois pontos, passar o mouse caixa, dois pontos, São as calibrações, vou chamar essa propriedade. E vou chamar propriedade de transição para suavidade. Transição, e o nome de nossa propriedade é transform e nossa duração de transição é de 1 segundo. Se eu colocar esse arquivo e mouse, meus carros estão nesse elemento profundo, você pode ver como funciona, mas não está nada claro É por isso que vou usar outro valor, que é prospectivo Isso lhe dará os três D, e eu não vou explicar como as perspectivas funcionam Para fins de prospecção, vou te dar um vídeo separado. Vamos usar o valor prospectivo. Então digite prospectivo. E dentro dos parênteses, precisamos passar o valor, e nosso valor é 200 pixels Se eu definir esse arquivo e, seguida, meu cursor sobre esse desenvolvimento, você poderá ver o resultado, como funciona Suponha que criar uma linha desse ponto até esse ponto signifique a direção x xs. Usando esse valor, você pode girá-lo para cima, caso contrário, para baixo Esse é o caso de uso do valor de rotação x. Vamos mudar o ângulo de rotação, 90 graus. Se eu definir esse arquivo e passar o cursor Mi sobre esse desenvolvimento, agora você poderá ver o resultado Agora está completamente invisível. Se você quiser revertê-lo completamente, precisará passar o valor de 180 graus. Um, 80 graus. Se eu definir esse arquivo e passar o cursor nessa profundidade, você poderá ver o resultado Como você pode ver, ele gira nosso elemento profundo, 180 graus. Além disso, você também pode alterar a posição de origem da transformação. Deixe-me te mostrar. chamar a propriedade de origem da transformação. Transforme a origem. Agora eu não quero girar esse elemento no meio desse elemento Eu quero girá-lo a partir deste canto. Nesse caso, precisamos usar o valor inferior direito, fundo direito. Antes de configurar esse arquivo, também vou alterar o ângulo de rotação, que é de 30 graus. Se eu colocar este arquivo e colocar meu cursor neste desenvolvimento, como você pode ver no canto inferior direito, ele gira 30 graus Espero que agora esteja claro para você como o valor de rotação x funciona. Vamos pular para o nosso próximo valor, que é rotacionar Y. Mas antes eu vou comentar essa linha Aqui, só vou digitar rotate y. Se eu definir esse arquivo e o cursor no desenvolvimento, você poderá ver o resultado Como você pode ver, ele divide nosso elemento e desenha uma linha desse ponto até esse ponto. Tem sido a direção de y x. E a partir dessa linha, você pode torcê-la para o lado P, caso contrário para o lado direito, acordo com o valor do ângulo Tudo é semelhante ao valor de rotação x. Basta desenhar uma linha e dividir esse elemento desse ponto até esse ponto na direção yx. É por isso que chamamos isso de rotação Y. Vamos falar sobre nosso próximo método, que é girar Z. Tipo de som, gire Z. Se eu definir esse arquivo e passar meus carros nessa profundidade, você poderá ver meus carros nessa profundidade, você poderá Eu desenho uma linha em ZD x. Eu quero dizer meio desse elemento de Deixe-me mostrar um exemplo e ver como funciona. Aqui você pode ver uma imagem e, se usar girar x, ela desenha uma linha desse ponto até esse ponto Usando esse valor, você pode girar seu elemento para cima ou para baixo Se você usar o valor de rotação y, poderá girar seu elemento para o lado p ou para o lado direito Se você usar rotações desse valor, deixe-me mostrar como funciona Espero que agora esteja claro para você como funcionam as rotações desse valor Vamos falar sobre nosso último valor, que é rotacionar três D. Primeiro, vamos ver a demonstração real Se usarmos a rotação três D, podemos usar todo o valor da rotação em unidades Esta linha é para a linha de rotação x xs, e esta é para y x, e esta é a nossa linha zx Agora vou girá-lo na direção x xs. Ao mesmo tempo, vou girá-lo na direção yax, e essa linha é para a direção zerx Ao mesmo tempo, podemos girá-lo na direção z x. Basicamente, é definida uma rotação de três D. Primeiro, vou chamar o valor, girar três d e, dentro dos parênteses, você precisa passar um total de quatro parâmetros, x x, y x, z x e z x Você pode especificar o eixo de rotação usando um número para os três primeiros argumentos. Mas para o quarto argumento, você precisa especificar o valor do ângulo. Para x xs, eu vou passar dois, e para yx, eu vou passar menos um menos um Da mesma forma, para z x, também vou passar menos um Mas em nosso quarto parâmetro, precisamos passar o valor do ângulo, para digitar 45 graus. Se eu definir esse arquivo e passar o mouse sobre esse desenvolvimento, você poderá ver o resultado Esta é a gaiola de uso do método rotate three D. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei esses dois valores. Traduza Z e traduza três D. Obrigado por assistir a este vídeo, 12. Tutorial de Transformação de CSS 3D: Olá pessoal, é bom ver vocês de volta. Neste tutorial, vamos aprender esse método de quatro traduções, traduzir X, traduzir Y, traduzir e traduzir três t. Já aprendemos sobre esses dois valores em nosso tutorial anterior Mas aqui, vou usá-lo com três transformações. Vamos ver como funciona. Como você pode ver, lado a lado, abro meu corretor de visoto e meu navegador usando a extensão Life Sever, e já crio um documento ESTeML chamado index dot ESTeML abro meu corretor de visoto e meu navegador usando a extensão Life Sever, e já crio um documento ESTeML chamado index dot ESTeML. Como você pode ver dentro do contêiner principal, temos um contêiner em caixa. Vamos usar nosso primeiro valor. Mas antes eu vou chamar a propriedade transform, alguma forma para digitar transform. E nosso primeiro valor é traduzir x. Alguém para digitar, traduza x. Dentro do parêntese, vou passar 200 pixels Se eu definir esse arquivo e o cursor Hoberm neste devlement, você poderá É mover meu elemento, 200 pixels na direção x x. E se você quiser movê-lo na direção oposta, nesse caso, você precisa passar -200 pixels Se eu definir meu arquivo e o cursor berm nesta caixa, você poderá ver o resultado Já aprendemos isso em seu material anterior. Então, vamos fazer essa transição três d. Então eu vou passar outro valor, que é prospectivo, prospectivo, 200 pixels Além disso, vou passar o valor de rotação y, girar y, e aqui vou passar 30 graus Se eu definir esse arquivo e passar o cursor nesse elemento profundo, você poderá ver o resultado Como você pode ver, ele move nosso elemento profundo, também gira nosso elemento profundo, e você sabe que usamos prospectivo, é por isso que ele dá uma aparência de três D. Vamos falar sobre nosso próximo valor, que é traduzir Y. Então, para usar traduzir Y, aqui vou usar o valor positivo Se eu definir esse arquivo e o cursor berm neste elemento de, você poderá ver o resultado Deixe-me usar o valor de rotação x. Então, tente girar x. Se eu colocar esse arquivo e o cursor de berma nesse D, você pode ver que agora ele está mais atraente Vamos usar nossa próxima propriedade, que é traduzir Z. Então, traduza Z. Se eu passar 200 pixels, então defina esse arquivo Se eu passar meu carro neste disco, como você pode ver, ele não está funcionando Mas nós já definimos traduz esse valor nesse D. Vamos usar outro valor com isso Vou usar o valor de rotação com isso, rotação, y, 60 graus Se eu definir esse arquivo e passar o mouse sobre meu cuidador nesse D, você poderá ver o resultado Mas parece muito parecido com traduzir x, mas não é. Deixe-me te mostrar. Deixe-me usar o valor prospectivo com isso. Algum tipo prospectivo, prospectivo, 900 pixels. Se eu definir esse arquivo e passar o mouse sobre o dispositivo, você poderá ver o resultado Deixe-me mostrar a demonstração real. Então você pode entender isso corretamente. Suponha que esse seja nosso elemento profundo. Primeiro, vou girar esse elemento profundo. Se usarmos translates desse valor, ele será movido dessa maneira Espero que agora esteja claro para você como traduzir o valor Z funciona. Vamos falar sobre nosso último valor, que é traduzir três D. Alguns para digitar, traduzem três D. Aqui precisamos passar o total de três valores, x x, x e zx Suponha que para x x, eu vou passar 50 pixels, e para x, eu vou passar 50 pixels também. Para zerx, vou passar zero pixel. Se eu definir esse arquivo e colocar os carros neste D, você poderá ver o resultado E se eu aumentar, traduzir o valor Z, suponha que eu digite uma célula típica e, em seguida, defina esse arquivo e passe o cursor sobre esse desenvolvimento, você poderá ver o resultado Ao mesmo tempo, ele se move na direção x xs, na direção y xs e na direção z x. Espero que agora esteja claro para você o que é traduzir três valores D. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordaremos esses dois valores, escala três D e escala Z. Obrigado por assistir a este vídeo, fique ligado no nosso próximo 13. Escala de tutorial de Transformação de CSS 3D: Olá, pessoal, é bom ver vocês de volta. Este é outro tutorial relacionado à transformação de três d. Neste tutorial, aprenderemos esses quatro métodos, escala X, escala Y, escalas e escala três. Já aprendemos sobre o método da escala x e da escala Y em nossos tutoriais anteriores Mas, mais uma vez, vou repetir esse método neste tutorial. Mas o método mais importante para três D é escalar a luz. Ele define uma transformação de escala de três D fornecendo um valor para zx, e nosso último método é a escala três D. Usando esse método, podemos usar três valores diferentes ao mesmo tempo Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu editor de código do VSO Studio e meu navegador usando a extensão Lp Server e já crio um documento ESTeML chamado index dot eTML chamado index Primeiro, vou usar a transformação do nome da propriedade. Então, para digitar, transforme aqui. Nossa primeira é escala x, Some type, scale x, scale x, e eu quero escalar esse elemento duas vezes na direção do excesso x. Vou passar dois aqui. Se eu definir esse arquivo e berrar carros neste desenvolvimento, você poderá ver o resultado Da mesma forma, podemos usar o valor da escala Y. Vou alterar a escala y. Se eu definir esse arquivo e passar cursor sobre esse desenvolvimento, você poderá ver o resultado Como não fornecemos nenhum ponto de origem de transformação, é por isso que é uma escala intermediária desse elemento. É a posição de origem padrão. Mas se usarmos o valor de origem da transformação com isso, deixe-me mostrar a você. E então defina esse arquivo e hobercars estão nesse desenvolvimento, você pode ver o resultado diferente Vamos falar sobre nosso valor mais importante, que é a escala oito. Mas primeiro, vou comentar essa linha, e vou escalar oito aqui. Escala 82 vezes. Se eu salvar esse arquivo e carros Hoberm estiverem nesse desenvolvimento, como você pode ver, não haverá alterações porque esse valor só funciona com três transformações d. Precisamos dar três d. Vou comentar essa linha e vou usar esse valor com prospectiva e rotacionar y. Além disso, vou recomendar Além disso, vou recomendar Se eu definir esse arquivo e cursor sobre esse desenvolvimento, agora você poderá ver o resultado Se eu aumentar esse valor na escala, somar o tipo sete aqui, definir esse arquivo e passar o cursor sobre esse desenvolvimento, agora você pode ver a diferença, como funciona Da mesma forma, se eu diminuir o valor da escala, algum tipo 0,5, definir esse arquivo e passar o cursor sobre esse desenvolvimento, você poderá ver o resultado Espero que agora seja para você a forma como esse método funciona. Vamos falar sobre nosso último método, que é escala três d. Alguns tipos, escala três d aqui, escala três D. Usando esse método, aqui precisamos passar o valor total de três. Escala X, escala Y e escala oito. Usando isso, podemos usar três valores diferentes ao mesmo tempo. Para x xs, quero escalá-lo duas vezes. Para y xs, eu quero escalá-lo três vezes, e para zer x, eu quero escalá-lo cinco vezes. Se eu definir esse arquivo e apostar nesse desenvolvimento, você poderá ver o resultado. Inicialmente, ele escala esse elemento duas vezes na direção x, depois três vezes na direção Y x e depois cinco vezes na direção zero Este é o esboço em U do valor d da escala três. Espero que agora esteja claro para você. Isso é tudo para este teste. No próximo útero, aprenderemos sobre uma nova propriedade, que é prospectiva Obrigado por assistir a este vídeo, fique ligado no nosso próximo útero 14. Tutorial de perspectiva de CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, vamos aprender uma nova propriedade, que é a perspectiva de Sess Em nossos tutoriais anteriores, já aprendemos sobre isso Mas neste tutorial, vamos usá-lo individualmente. Mas antes de começarmos a prática, vamos ver alguns exemplos. Aqui você pode ver que este é o exemplo de rotação e esse também é o exemplo de rotação Mas as diferenças, para esse elemento, usamos o prospectivo. É por isso que fornece três D. Da mesma forma, este é o exemplo da rotação y x. Para nosso primeiro exemplo, não usamos prospectivo. Mas, para nosso segundo exemplo, usamos prospectiva. É por isso que fornece três D. Se usarmos prospectivo, você pode ver claramente a rotação, e se não usarmos prospectivo, você não conseguirá entender a Vamos tentar entender isso com mais detalhes. Suponha que você esteja assistindo uma tela de projetor a partir deste ponto Você pode dizer que o ponto de vista da distância e do ângulo são chamados de prospectivos Parecerá maior se você olhar mais de perto e, se você olhar à distância, parecerá menor. Deixe-me mostrar a demonstração real. Suponha que esse seja nosso elemento profundo. Se você olhar de perto, parecerá maior. E se você olhar à distância, parecerá menor. Isso é chamado de prospectivo. Parece pequeno e grande, apesar de não ter sido redimensionado. Espero que agora esteja claro para você. prospectivo vem com outra propriedade, que é de origem prospectiva. Por padrão, ele vem com centro. Mas você pode alterar a perspectiva onde quiser. Vamos tentar entender a origem prospectiva com detalhes. Suponha que este seja o seu quarto. Se você olhar da posição central, poderá ver claramente todas as paredes e o chão. Este é o seu último andar, este é o seu andar de baixo. Esta é sua parede lateral direita, e esta é sua parede lateral esquerda, e esta é sua parede de fundo. Mas se você olhar para o seu quarto do canto superior esquerdo, eu quero dizer que deste canto, então você não pode ver claramente o andar esquerdo e superior. Da mesma forma, se você olhar para o seu quarto a partir desta posição, significa posição superior, então você não pode ver claramente o último andar. Você pode ver o piso inferior, parede de fundo, a parede lateral direita e a parede lateral esquerda. Porque sua posição de origem potencial é a melhor. Da mesma forma, se você olhar para o seu quarto pelo canto superior direito, não poderá ver a parede certa e também seu último andar estará pouco visível ou não. Porque sua origem potencial está certa e no topo. Mas se você olhar para o seu quarto do lado direito por engano, eu digito a parede direita na posição esquerda. Se você usar a origem prospectiva do lado direito, não poderá ver a parede direita corretamente Você pode ver a parede de fundo, você pode ver o piso inferior, você pode ver o andar superior e também você pode ver a parede lateral, mas sua parede lateral direita não é visível. Se você usar a origem prospectiva no canto inferior direito , também não conseguirá entender a parede direita Como você pode ver, também a parede direita não é visível. Com isso, o piso inferior raramente é visível. Da mesma forma, se você olhar para o seu quarto da posição inferior, não poderá ver o piso inferior corretamente. Se você olhar para o seu quarto pelo canto inferior esquerdo, não poderá ver a parede esquerda. Além disso, você não pode ver completamente o piso inferior. Se você usou apenas deixar origem prospectiva, não poderá ver a parede inclinada. Você pode ver a parede direita, você pode ver a parede de fundo, você pode ver o piso inferior, também você pode ver o andar superior, mas você não pode ver a parede inclinada Todos esses são valores de origem. Além disso, você pode usar o valor percentual com isso. Com o prospectivo, você pode alterar a origem potencial. Vamos começar com a prática e tentar entender como podemos usar propriedades de origem prospectiva e prospectiva Como você pode ver, lado a lado, abro meu Visual Studio Cortor e meu navegador usando a extensão Lipseer, e já crio um documento ESTeML chamado Index dot ESTeML abro meu Visual Studio Cortor e meu navegador usando a extensão Lipseer, e já crio um documento ESTeML chamado Index dot ESTeML. Como você pode ver, há um elemento profundo e agora eu quero girar esse elemento profundo ao passar o cursor sobre esse Aqui eu vou usar a propriedade transform, então digite, transform. Transforme a rotação, gire x e eu quero girá-la até 50 graus na Se eu definir esse arquivo e as Micas estiverem nesse elemento profundo, você poderá ver o resultado. Como você pode ver, ele gira nosso elemento, mas não está claro porque não usamos nenhum valor prospectivo Em nossos materiais anteriores, usamos a prospectiva como valor de Mas agora vou usar a propriedade potencial, e precisamos usar essa propriedade potencial em nosso contêiner base, não no contêiner filho Aqui, precisamos amarrar a perspectiva. E eu vou ultrapassar os possíveis 800 pixels. Se eu definir esse arquivo e mouse, meus carros estão neste desenvolvimento, agora você pode ver a aparência de três D. Em nossos materiais anteriores, usamos a perspectiva como valor de transformação Só é preciso lembrar que, em potencial, dê ao elemento três uma aparência D. Além disso, lembre-se de que, se você usou a propriedade potencial individualmente, precisará usá-la no contêiner principal, não no contêiner filho Agora, vamos mudar o valor potencial. Suponha que eu passe dos 100. Como eu disse anteriormente, diminuir o valor do prospectivo fará com que as coisas pareçam maiores Se eu passar o cursor sobre esse desenvolvimento, você pode ver a diferença Agora parece maior porque observamos esse elemento de perto. É por isso que parece maior. Da maneira oposta, se aumentarmos o valor prospectivo, 1.200 pixels, definirmos esse arquivo e passarmos o cursor sobre esse desenvolvimento, você poderá ver Agora você pode ver o objeto menor. Porque sabemos que um objeto parece pequeno quando visto à distância. Como você pode ver, agora a distância é de 1.200 pixels. Por enquanto, vou digitar um prospectivo de 800 pixels. Vamos falar sobre a origem potencial e como ela funciona. No início, vou chamar essa propriedade, que é origem prospectiva, origem prospectiva Por padrão, o valor é o centro e o valor do eixo y é o centro. Então, tipo de grupo, centro e centro do cabelo, centro do centro. Se eu definir esse arquivo e os hobercars estiverem nesse desenvolvimento, como você pode ver, do ponto central, ele gira nosso elemento Como você pode ver, não há mudanças porque essa é a posição central. No começo, vou usar o valor certo, a origem prospectiva, certo Se eu definir esse arquivo e Hobermcars estiverem nesse desenvolvimento, você poderá ver Como você pode ver, nosso elemento não transborda do lado direito, porque agora nossa perspectiva está do lado certo É por isso que não podemos ver a parede certa. Da mesma forma, se usarmos o veluft esquerdo e definirmos esse arquivo e as micas Huber estiverem nesse elemento de, agora você não poderá ver a Como você pode ver, nosso elemento não transborda do lado esquerdo, mas transborda do lado direito Se usarmos qualquer forma de cubo, você poderá entendê-la adequadamente Você pode testar todos os valores de origem, um por um. Além disso, você também pode usar o valor percentual. Vamos aprender tudo isso quando trabalharmos com projetos reais. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, sintonize nosso próximo tutorial. 15. Tutorial de estilo de transformação de CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos uma nova animação Sess relacionada à propriedade, e o nome da propriedade é transform style Basicamente, essa propriedade funciona com a propriedade transform. Vamos aprender mais sobre isso. A propriedade de estilo de transformação especificou como aninhar os elementos são renderizados em três espaços D. E, basicamente, essa propriedade vem com dois valores. Nosso primeiro nome de valor é plano. Ele especificou que o elemento filho não preservará sua posição de três D. E esse é o valor padrão. O valor principal e importante é preservar três. Especifica que os elementos secundários preservarão suas três posições D. Basicamente, quero dizer que, se usarmos preservar três valores D no elemento pai , nosso elemento pai funcionará como um objeto de três D. Deixe-me mostrar o exemplo. Aqui você pode ver que animamos um elemento filho. Como você pode ver, o elemento profundo menor passando pelo elemento profundo maior. Como você sabe, um elemento maior do desenvolvedor principal. Se usarmos três valores D preservados , podemos realizar esse tipo de três efeitos D. Se não usarmos o valor preservado de três D, deixe-me mostrar. Agora você pode ver que nosso elemento pai não age como um elemento de três D, e nosso elemento filho não pode passar pelo elemento pai. Portanto, esse é o medidor de uso da propriedade de estilo de transformação. Deixe-me mostrar outro exemplo. Aqui você pode ver um pai mergulhando, e dentro do mergulho dos pais, temos um filho de, e eu giro nosso filho de 40 graus na direção do eixo y. E, por padrão, nosso estilo pai de transform veio com valor de inundação É por isso que nossos pais não agem como um objeto tridimensional. Mas se usarmos propriedade de estilo de transformação e preservarmos três valores D , nosso plano de fundo deverá agir como um objeto de três D, e nosso filho passará profundamente pelo elemento de fundo. Sem perder seu tempo, vamos começar pela prática. Como você pode ver, lado a lado, abro meu criador do Visor Studio e meu navegador usando a extensão Lp Server, e já crio um documento STL chamado index dot STL Aqui você pode ver o total de dois elementos, elemento pai e nosso elemento filho. Como você pode ver, já giramos nosso elemento filho 50 graus na direção xs, e eu já uso a propriedade prospectiva em nosso elemento pai e defino o valor prospectivo, 800 pixels, e agora quero girar o Vou usar a propriedade transform em nosso contêiner pai, transform. Gire y, e eu quero girá-lo 30 graus na direção de y, 30 Se eu definir esse arquivo, você poderá ver o resultado. Sim, ele rotacionou nosso elemento, mas não forneceu nenhuma aparência tridimensional porque não usamos nenhuma propriedade de estilo de transformação Vou usar a propriedade de estilo de transformação, estilo de transformação. No outono de D, essa propriedade veio com um valor fixo, mas vou usar preservar três valores D. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora você pode ver nosso elemento filho passar pelo elemento pai e precisa se lembrar que precisa usar essa propriedade em seu contêiner pai, não no contêiner filho. Se eu ativar minha barra de ferramentas do desenvolvedor e selecionar esse elemento, como você pode ver, nosso valor de rotação de transformação x é de 50 graus Ei, esse é o nosso elemento infantil. Se eu aumentar o ângulo de rotação, você pode ver a transformação. Se eu diminuir o ângulo de rotação, você também poderá ver a transformação. Vamos girar o contêiner principal. Vou selecionar o contêiner principal e vou girar esse contêiner pai Se eu girar o contêiner pai, você poderá ver os três d. Agora você pode ver claramente nosso elemento filho passando pelo elemento pai Essa é a imagem de uso da propriedade de estilo transform. Agora, vamos mudar a origem da transformação do nosso elemento filho. Origem da transformação do tipo Amo e fundo do tipo Amo. Se eu definir esse arquivo, agora você poderá ver o resultado. De baixo, ele gira nosso elemento filho, 50 graus. Deixe-me te mostrar claramente. Se eu aumentar o valor de rotação ou elemento pai, você poderá vê-lo claramente. Como você pode ver, do lado inferior, ele gira nosso elemento Isso é tudo para este tutorial. Espero que agora você entenda o que é a propriedade do estilo de transformação uskazo Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 16. Tutorial de visibilidade de fundo em CSS: Olá, pessoal, bem-vindos de volta. Mais uma vez, venho com um novo tutorial e, neste tutorial, você aprenderá uma nova propriedade, que é a visibilidade da face traseira Você precisa usar essa propriedade com a propriedade transform. Antes de começarmos a prática, vamos tentar entender o que é visibilidade da face traseira A propriedade de visibilidade da face traseira define se a face traseira de um elemento deve ou não estar visível quando voltada para o usuário Agora a questão é: o que é face traseira? A face traseira de um elemento é uma imagem espelhada da face frontal que está sendo exibida. Suponha que dentro desse elemento profundo, você digite hello world. Se eu girar 180 graus, você poderá ver a face traseira de um elemento Como você sabe, ele reflete seu elemento. Além disso, você pode ver o reflexo do texto. Essa propriedade é útil quando um elemento é girado. Ele permite que você escolha se o usuário deve ver a face traseira ou não Suponha que você não queira mostrar a face traseira de um elemento Usando essa propriedade, você pode controlá-la. E nossa propriedade de visibilidade da face traseira vem com dois valores, visível e oculto Deixe-me explicar isso com três objetos D. Como você pode ver na tela, aqui está um cubo de três D. Se você usar valor oculto, não poderá ver a parte oposta do sube Mas se você usar o valor visível, poderá ver a outra parte por meio desse cubo Essa é a principal diferença desses dois valores. Deixe-me mostrar outro exemplo. Como você pode ver na tela, há dois elementos de, e eu uso a propriedade de transformação desses dois elementos. E, como você pode ver, usamos o valor de rotação y. Se eu estiver em nosso primeiro elemento de, você pode ver que pode ver a face traseira do nosso primeiro elemento. Como você pode ver, ele reflete nosso texto. Mas não quero mostrar a face traseira quando giro nosso elemento Portanto, neste elemento, usamos a propriedade de visibilidade da face traseira Então, eu uso meu cursor, agora você não pode ver a face traseira desse elemento porque usamos um valor oculto para este Vamos começar a prática e tentar entender como funciona. Como você pode ver, lado a lado, abro meu viso so so Cortor e meu navegador usando a extensão Lipseer, e eu já crio um documento EstiML chamado index dot STML abro meu viso so so Cortor e meu navegador usando a extensão Lipseer, e eu já crio um documento EstiML chamado index dot STML. Como você pode ver no meu navegador, temos dois elementos profundos, contêiner e caixa E, como eu disse anteriormente, se você quiser usar a propriedade de visibilidade do backface, também precisará usar a propriedade transform Então, dentro do seletor over, vou digitar transform Transforme a rotação y, e eu quero girá-la em 80 graus. Se eu definir esse arquivo e carros Hb M estiverem nesse desenvolvimento, você poderá vê-lo girar nosso elemento Além disso, você pode ver o texto miro, e agora vou usar nossa nova propriedade, que é a visibilidade da face traseira Eu tenho que digitar a visibilidade da face traseira. Primeiro, vou usar o valor visível. Se eu definir esse arquivo e carros Hoberm estiverem nesse desenvolvimento, você poderá ver a Mas se eu usar valor oculto, deixe-me mostrar e definir esse arquivo e o Huber Makar neste elemento deve Agora você não pode ver a face traseira desse elemento. Este é o caso de uso da propriedade de visibilidade da face traseira. Isso é tudo para este tutorial. No próximo tutorial, aprenderemos animações de casos Obrigado por assistir a este vídeo, sintonize nosso próximo tutorial. 17. Tutorial de animação em CSS, parte um: Olá, pessoal, é bom ver vocês de volta. Finalmente, vamos aprender animação CSS. Você pode animar qualquer elemento de teste usando animação CSS. Vamos ver um exemplo. Como você pode ver, há um elemento profundo. É animado automaticamente sem passar o mouse. É converter retângulo em círculo e depois converter círculo em retângulo Esse é o pequeno exemplo de animação. Funciona automaticamente. Você não precisa de nenhum efeito de foco. Vamos ver que tipo de propriedade temos em CSS para criar essa animação. Como você pode ver, temos um total nove propriedades relacionadas à animação CSS. Nosso primeiro nome de propriedade é nome da animação. Usando essa propriedade, você pode definir um nome para a animação. Depois vem a duração da animação. Usando essa propriedade, você pode definir por quanto tempo deseja executar essa animação. Em seguida, vem a propriedade de atraso da animação. Ele especifica um atraso para o início de uma animação. Em seguida, vem a contagem de iterações de animação. Ele especifica o número de vezes que uma animação deve ser reproduzida, e nossa próxima propriedade é a direção da animação. Ele especificou se uma animação deveria ser reproduzida para frente, para trás ou em ciclos alternativos e, em seguida, veio a função de temporização da animação Ele especifica a curva de velocidade da animação. Nossa próxima propriedade é o modo de preenchimento de animação. Ele especifica um estilo para o elemento quando a animação não está sendo reproduzida. Vamos aprender sobre isso em nossos últimos tutoriais. Nossa próxima propriedade é Animation Play State. Ele especifica se a animação está sendo executada ou pausada, e nossa última propriedade é animação Essa é a propriedade abreviada. Você pode usar o valor de todas as propriedades de uma só vez usando essa propriedade. Vamos aprender todas essas propriedades uma por uma. Agora, para usar todas essas propriedades de animação, você precisa criar um seletor e o nome do seletor está nos quadros-chave da taxa Primeiro, você precisa digitar add the rate keyframes e, em seguida, fornecer qualquer nome de animação Só é preciso lembrar que não forneça nenhum espaço nesse nome. Você pode fornecer um hífen. Você também pode usar sublinhado ou capa de camelo. Mas não forneça nenhum espaço. Então, dentro do clivrass, você precisa fornecer duas palavras-chave diferentes de É de onde você deseja iniciar a animação e, usando duas palavras-chave, você precisa fornecer o ponto final da animação. Dentro das calibrações, você pode usar a propriedade CSS. Suponha que você queira alterar a largura do contêiner. Sim, você pode. outro método que você pode usá-lo. Você pode usar a porcentagem para o mesmo trabalho. Você pode substituir a posição inicial por 0% e, da mesma forma, pode substituir a posição en por 100%. Ambas as declarações retornarão, com o mesmo resultado. Mas aqui você pode usar qualquer valor percentual de 0 a 100. Suponha que você queira alterar a cor no ponto de partida da animação e também queira alterar a cor em 20%. Você pode fornecer vários valores se usar esse método. Sem perder tempo, vamos estudar a prática e ver como ela funciona Como você pode ver, lado a lado, abro minha viseira para curador e meu navegador usando a extensão Lp Saver Além disso, você pode ver que eu já criei documento ESTeML chamado index dot Como você pode ver, há um elemento profundo e o className é box, e eu já estilizo esse elemento profundo com 250 pixels, altura 200 pixels Eu também alinho esse elemento profundo no meio desta página da web. Agora eu quero animar tão profundamente. Eu quero transformar esse retângulo em um círculo. Com isso, eu também quero mudar a cor sem usar o seletor Over Vou usar diferentes propriedades de animação CSS. Primeiro, vou criar o seletor de quadros-chave, no quadro-chave vermelho Depois do seletor Kefam, precisamos fornecer um nome de animação Para nossa animação, vou dar um exemplo. Então, dentro das calibragens, precisamos usar duas palavras-chave de e duas de e, em seguida, vou usar duas Do ponto de partida, quero dizer raio de borda zero, algum tipo, propriedade de raio de borda Raio de borda 0%. No final desta animação, quero alterar o raio da borda em 50% Raio de borda de 50%. Se eu definir esse arquivo, ele não executará a animação porque precisamos vincular o nome da animação a essa caixa. Para isso, vou usar uma propriedade, que é nome da animação, nome animação e nosso nome de animação é exemplo. Usando esse método, você pode usar esse quadro-chave várias vezes e não precisa criar essa animação repetidamente . Agora, com o nome da animação, você também precisa declarar o tempo de duração da animação Vou chamar outra propriedade, que é a duração da animação. Por 2 segundos, quero executar essa animação. Aqui você também pode usar o valor de segundo ou milissegundo. Se eu salvar esta página, você pode ver a animação aqui, mas ela executa nossa animação por apenas uma vez e leva dois segundos para concluir essa animação. Agora eu decido executar essa animação por cinco vezes. Para isso, precisamos usar outra propriedade, que é a contagem de iterações da animação Então digite, contagem de iterações de animação, e eu quero executá-la cinco vezes É por isso que eu passo cinco aqui. Se eu salvar esse arquivo, como você pode ver, ele executará nossa animação cinco vezes. Três, quatro e cinco. Depois de concluir o prazo, ele para de executar nossa animação Se você quiser executar essa animação para sempre, você precisa passar um valor infinito aqui, algum tipo infinito. Se eu definir esse arquivo, como você pode ver, agora ele executará nossa animação para sempre. Não quero executar essa animação para sempre, então quero passar três valores aqui. Eu quero executá-lo três vezes. Agora, como você pode ver, depois de concluir a animação, ela volta à posição anterior em uma única etapa. Quando ele retorna do valor final para o valor inicial, como você pode ver, não há transição. Em uma única etapa, ele completa a animação. Para fornecer a suavidade, precisamos usar outra propriedade, que é a direção da animação Então digite a direção da animação. E eu vou usar um valor alternativo. Se eu salvar esse arquivo, agora você pode ver a suavidade, quando está de volta à posição normal Se eu executá-lo por tempo infinito, você pode ver a suavidade. Como você pode ver, quando volta à posição inicial, há uma suavidade. Agora, vamos falar sobre a propriedade da direção da animação. Basicamente, a direção da animação veio com quatro valores: normal, reverso, reverso alternativo alternativo. Normal é o valor padrão. A animação é reproduzida normalmente. Funciona para frente. Da maneira oposta, reverta o trabalho para trás. Se você usar o valor inverso, a animação será reproduzida na direção inversa. Em seguida, vem o valor alternativo. Se você usar um valor alternativo, primeiro ele será reproduzido para frente e depois para trás Nosso último valor é inverso alternativo. Nesse caso, a animação é reproduzida primeiro para trás e depois para frente Você já aprendeu sobre o valor alternativo. É movido da posição inicial para a posição final e, em seguida, volta para a posição inicial da Emposição Nosso próximo valor é invertido. Deixe-me te mostrar. Se eu usar esse valor e , em seguida, definir esse arquivo. Como você pode ver, a animação começa do círculo e depois é convertida em um quadrado. Vamos falar sobre nosso último valor, que é inverso alternativo. Se eu usar um valor inverso alternativo e, em seguida, definir esse arquivo. Como você pode ver, a animação é reproduzida primeiro para trás e depois para frente Esse é o caso de uso da propriedade de direção de animação. Por enquanto, vou usar um valor alternativo. Se eu definir esse arquivo, você já aprendeu sobre ele. Isso é tudo para este tutorial. No próximo tutorial, mostrarei os diferentes métodos de quadros-chave. Obrigado por assistir a este vídeo, sintonize nosso próximo tutorial. 18. Tutorial de animação em CSS, parte dois: É bom ver vocês. Neste tutorial, mostrarei o segundo método para executar a animação. Em nosso tutorial anterior, usamos duas palavras-chave. Mas neste tutorial, vamos usar o valor percentual. Então, sem perder seu tempo, vamos voltar ao estúdio de visão Corator Como você pode ver, lado a lado, abro meu criador do Visor Studio e meu navegador usando a extensão Life Sever e abro meu documento estel anterior Como você sabe, da posição inicial , vou substituir por 0% 0%. E você sabe que duas mil palavras são nossa posição. Então, vou substituir duas palavras k por 100%. Então, se eu salvar esse arquivo, como você pode ver, ele funcionará da mesma maneira. Agora eu quero mudar a cor de fundo na posição final. Então, vou usar a propriedade do plano de fundo, fundo, e nossa cor de fundo é datada. Se eu definir esse arquivo, como você pode ver, com transformação de forma, ele também mudou a cor. Como você pode ver, para essa animação, usamos um total de quatro propriedades de animação CSS diferentes, nome da animação, duração da animação, contagem de iterações da animação e direção da animação Agora vou mostrar como podemos usar a abreviação dessa animação Eu quero dizer, como podemos usar esse valor de quatro propriedades em uma única linha. Para isso, precisamos chamar outra propriedade de animação, que é animação, Animação. Primeiro, precisamos passar o nome da animação. Como você pode ver, o nome da nossa animação é um exemplo. Então, para copiar o nome e colar aqui. Em seguida, precisamos passar o tempo de duração da animação. Como você pode ver, tempo de duração da nossa animação é de dois segundos, o som deve passar de dois segundos. Lembre-se de que você precisa seguir a sequência e, em seguida, passarei o valor da contagem de iterações, que é infinito Em seguida, vou passar o valor da direção da animação , que é alternativo. Por enquanto, as quatro linhas externas não são necessárias, então vou comentar essas linhas e salvar esse arquivo Como você pode ver, funcionou perfeitamente. Funciona da mesma forma. E agora vou falar sobre outra nova propriedade, que é o atraso na animação. Para isso, vou comentar esta linha e descomentar esta. Depois da propriedade de duração, vou digitar o atraso da animação. Aqui eu vou passar três é, significa três segundos. Você também pode obter o valor de milissegundos. Isso significa que se eu reprimir esse arquivo, nossa animação será iniciada após 3 segundos. Deixe-me te mostrar. Alguns para configurar esse arquivo, como você pode ver, após 3 segundos, ele inicia nossa animação. Esse é o caso de uso da propriedade de atraso. Por fim, vou usar outra propriedade, que é a função de temporização da animação. Mas antes, vou mostrar os valores relacionados à função de temporização de animação CSS. Basicamente, temos um valor total de seis, é linear, está entrando está saindo, está entrando em Q semana Se você usar is value, ele especifica uma animação com início lento, depois primeiro e depois termina lentamente. Esse é o valor padrão e nosso próximo valor é linear. Ele especifica uma animação com a mesma velocidade do início ao fim. Em seguida, vem nosso terceiro valor, que está em, especifique a animação com um início lento. Da maneira oposta, temos outro valor, out, especifique uma animação com um final lento. Nosso quinto valor é de entrada e saída, especifique uma animação com início e fim lentos. E nosso último valor é Q fraco, vesier. Você pode definir seus próprios valores em uma função Q we sier. Deixe-me mostrar o exemplo real de como eles funcionam. Aqui você pode ver os elementos com diferentes valores de função de temporização. Linear entra , sai e entra sai. Como você pode ver, usamos o mesmo tempo de duração da animação para tudo isso. Mas, como você pode ver, eles funcionam de maneira diferente. A velocidade deles não é a mesma. Como você pode ver, o linear mantém a mesma velocidade do início ao fim e, em seguida, vem nosso próximo valor, que é a facilidade. Como você pode ver, começa devagar, depois primeiro, termina lentamente e depois vem. Ele especifica a animação com início lento. E depois sai. Ele especifica a animação com final lento, e nosso último valor é e in out. Ele especifica a animação com início lento e final lento. Essa é a diferença entre todos os valores da função de temporização. Deixe-me mostrar como podemos usá-lo na prática. Então, vou chamar nosso nome de propriedade, que é função de animação. Função de animação. No começo, vou usar o valor e. Alguns não. Se eu salvar esse arquivo, como você pode ver, ele começa com lento, depois primeiro e n lentamente. E esse é o valor padrão, e vou usar nosso próximo valor, que é linear. Linear suave Se eu salvar esse arquivo, como você pode ver, ele manteve a mesma velocidade. Você não consegue entender a diferença neste exemplo. Você pode entendê-lo adequadamente quando iniciamos nosso exercício e projeto, e então vou usar nosso outro valor, que está em. Se eu salvar esse arquivo, como você pode ver, ele especifica a animação com início lento. Nosso próximo valor acabou. Algum tipo está fora. Se eu salvar esse arquivo, como você pode ver, ele especifica a animação com final lento. Nosso último valor está em entrar e sair. Algum tipo está entrando e saindo. Se eu salvar esse arquivo, como você pode ver, ele especifica a animação com início lento e final lento. E agora vou usar nosso último valor, que é Q basier Vou amarrar Qb Basier. Aqui você precisa passar o valor total de quatro, não mais que quatro valores, não menos que quatro valores. Primeiro, vou pegar o valor 0,1 e depois vou pegar o valor 0,4. Em seguida, vou usar o valor 1,0. Em seguida, vem o valor de 0,1. Ele cobrirá a animação em quatro etapas. Para nosso primeiro t, será necessário zero ponto novamente. Para nossa segunda etapa, levará 0,4 segundo, e para nossa terceira etapa, levará mais uma vez. Para nosso último t, será necessário zero ponto mais uma vez. Se eu definir esse arquivo, você poderá ver o resultado. Depois de 3 segundos, você pode ver o padrão de animação. Com esse valor, você pode concluir sua animação em uma quarta etapa. Além disso, você pode usar todas as etapas como uma abreviatura. Para isso, você precisa usar esse valor na terceira posição. Primeiro, você precisa passar o nome da animação, depois o tempo de duração, depois a função de temporização, depois o valor do delta, depois a contagem de iterações e, em seguida, a direção da animação. Não se preocupe com isso. Vamos aprender tudo isso quando começarmos nossos projetos. Agora vou mudar de cor em 50% da animação. Eu quero dizer 50% da posição da animação. 50% dentro do clisis, eu quero mudar a cor de fundo, fundo, azul Se eu definir esse arquivo, como você pode ver, na posição de 50% da animação, ele ficará com a cor. Primeiro, ele converte a cor do chocolate em azul, depois converte a cor azul em vermelho. Podemos usar o valor que quisermos aqui. Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos o que é o arquivo de animação e o que é o modo de reprodução de animação Não perca nosso próximo vídeo. Obrigado por assistir a este vídeo, sintonize nosso próximo tutorial. 19. Tutorial do modo de preenchimento de animação CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos uma nova animação CSS relacionada à propriedade, e o nome da propriedade é modo de arquivo de animação CSS. Mas agora a questão é: o que é o modo de filme de animação? A propriedade do modo de arquivo de animação especifica um estilo para o elemento quando a animação não está sendo reproduzida. Podemos usá-lo antes de começar. Também podemos usá-lo após o término. Caso contrário, podemos usar tanto a condição quanto a condição. Ao mesmo tempo, podemos usá-lo antes e depois da animação. Agora, vamos falar sobre os valores relacionados ao modo de arquivo de animação. Essa propriedade vem com um total de quatro valores, nenhum, para frente, para trás e ambos Nenhum é o valor padrão. animação não aplicará nenhum estilo ao elemento antes ou depois da execução. Nosso próximo valor é avançar. O elemento manterá os valores de estilo definidos pelo último quadro-chave. Basicamente, depende da direção da animação e da contagem de iterações da animação Nosso próximo valor é inverso. O elemento obterá os valores de estilo definidos pelo primeiro quadro-chave e os manterá durante o período de atraso da animação Caso contrário, podemos usar nosso último valor, que é ambos. A animação seguirá as regras para frente e para trás, estendendo as propriedades da animação em ambas estendendo as propriedades da animação em Então, vamos usar esse valor de quatro campos neste tutorial. Vamos começar a prática e ver como funciona. Como você pode ver lado a lado, abro meu corretor do Visual Studio e meu navegador usando a extensão LifeSer e já crio um documento SML chamado E você também pode ver um elemento profundo no meu navegador. E eu sentei 150 pixels de largura e 100 pixels de altura neste elemento profundo. Agora vou animar esse elemento profundo e também vou colocar cores diferentes nesse elemento Vou aumentar a largura desse elemento. Como você pode ver, eu já criei o quadro-chave para essa animação, e o nome do nosso quadro-chave é exemplo Dentro do carliss, vou digitar. No começo, vou pegar 0%. Dentro do cvss. Primeiro, vou mudar a cor de fundo do plano de fundo. E eu vou colocar a cor amarela. Também vou aumentar a largura do item. Vou digitar com largura. Como você pode ver, nosso wi anterior é de 150 pixels e agora vou colocar 200 pixels. Além disso, vou duplicar essa linha três vezes. 0%, depois vem 50%, pelo menos 100%. Em 50% da animação, vou aumentar a largura para 50 pixels. Além disso, vou mudar a cor do plano de fundo. Cor de fundo vermelha e, em 100%, vou dizer que a largura do item é de 300 pixels. Além disso, vou mudar a cor. Desta vez, vou usar a cor azul. Basicamente, criamos um quadro-chave de animação simples. Vamos usar esse quadro-chave nesta caixa. Para isso, primeiro, vou usar a animação da propriedade de animação. Nosso nome de animação é exemplo. Então, precisamos passar o tempo de duração da animação, e eu quero completar essa animação em 2 segundos. Em seguida, vou passar o valor do atraso da animação e quero atrasar essa animação por 3 segundos. Se eu definir esse arquivo, como você pode ver, depois de três segundos, ele executará nossa animação. E depois de concluir a animação, ela volta à sua posição inicial. Agora vou usar a propriedade do modo de arquivo de animação. Podemos usá-lo após o valor da duração. Caso contrário, podemos chamar o nome da propriedade. Vou chamar o nome da propriedade, modo de arquivo de animação. Como você sabe, essa propriedade veio com quatro valores. No começo, vou usar Valor ruim. Para trás. Se usarmos backward, ele saltará diretamente para 0% dessa animação Deixe-me aumentar o tempo de atraso da animação. Vou usar 5 segundos para este exemplo. Se eu definir esse arquivo, como você pode ver, ele já salta para 0%. Começa a partir do 0%. Depois vem 50%, depois vem 100%, e depois de completar a animação, ela volta à posição normal. Deixe-me te mostrar mais uma vez. Se eu definir esse arquivo, ele iniciará a animação a partir de 0% e, em seguida, atrasará por 5 segundos e, em seguida, executará nossa animação Como você sabe, se usarmos o valor inverso, o elemento obterá os valores de estilo definidos pelo primeiro quadro e os manterá durante o período de atraso da animação Vamos passar para nosso próximo valor, que é o futuro. Vou digitar cabelo para frente. Se usarmos esse valor, ele simplesmente executará nossa animação. Mas, no final, não está de volta ao estado inicial. Deixe-me te mostrar. Se eu definir esse arquivo, como você pode ver, após 5 segundos, ele executará nossa animação. Além disso, você pode ver que ele não volta ao estado inicial. Como você sabe, o elemento manterá os valores de estilo definidos pelo último quadro central. Como você pode ver, nosso último quadro é 100% e sua cor de fundo é azul Nessa posição, definimos a largura do item, 300 pixels. Vamos passar para o próximo valor, que é ambos. Se eu usar esse valor, Both, ele iniciará nossa animação a partir de 0% e, após concluir a animação , ficará preso na posição de 100%. Então, se eu definir esse arquivo, como você pode ver, ele começa com 0%, depois de cinco segundos de atraso, ele inicia nossa animação. Como você pode ver depois de concluir a animação, ela não volta ao estado inicial desse elemento. Se usarmos esse valor, ele seguirá a regra para frente e para trás Esse é o caso de uso de ambas as propriedades. Agora, vamos falar sobre nosso último valor, que é nenhum. Veja como não digitar nenhum aqui. Se eu definir esse arquivo, como você pode ver, nada vai acontecer aqui. Depois de 5 segundos, basta executar nossa animação. Esse é o caso de uso do valor N. Isso é tudo para este tutorial. Espero que você goste desse tutorial. Agora está claro para você o que é o modo de arquivo de animação. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 20. Tutorial do modo de jogo de animação CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos uma nova animação CSS relacionada à propriedade, e o nome da nossa propriedade é animation play state Moore Agora, a questão é: o que é o estado do local da animação. A propriedade de estado do local da animação especifica se a animação está sendo executada ou pausada Você pode executar sua animação. Caso contrário, você pode pausar sua animação com essa propriedade Basicamente, essa propriedade vem com dois valores, pausa e execução Se você usar o valor de pausa, ele especifica que a animação está em pausa e a execução é o valor padrão dessa Sem perder tempo, vamos começar a prática e tentar entender o prática e tentar que é o estado do lugar da animação Como você pode ver, lado a lado, abro meu criador de so stop e meu navegador usando a extensão PSaver e abro meu documento de teste anterior Agora, quero parar minha animação quando coloco meu cursor sobre esse elemento profundo. Para isso, precisamos usar a propriedade da placa de animação. Como você pode ver, atrasamos nossa animação por 5 segundos. Se eu salvar esse arquivo, você pode ver depois de 5 segundos que ele executa nossa animação. E agora eu quero parar essa animação enquanto ela está sendo executada. Para parar a animação, vou passar o cursor Primeiro, vou criar um seletor de foco para essa caixa Vou digitar dot box hover dentro das maldições, vou usar nossa propriedade Plano de animação. No começo, vou usar o Pause Vou digitar pausa aqui. Se eu salvar esse arquivo, como você pode ver, depois de cinco segundos, ele executará nossa animação. Mas vou passar o cursor sobre esse elemento, como você pode ver, ele interrompe nossa animação Eu não executo a animação completamente. Eu removo minha maldição, pois você pode vê-la completar a animação Deixe-me mostrar o exemplo mais uma vez. Mas antes eu vou reduzir o tempo de atraso, 1 segundo. Se eu definir esse arquivo, como você pode ver, uma vez, ele executará nossa animação. Mas quando eu passo o cursor sobre esse elemento, ele interrompe a animação Mas agora vou remover o cursor desse elemento. Como você pode ver, agora está completa a animação. Em seguida, volte ao estado normal desse elemento. Mas agora eu quero executar essa animação, quando eu passar o cursor sobre esse elemento Para isso, vou copiar essa propriedade. E cole aqui. Por padrão, quero pausar essa animação. Mas quando eu me preocupo com esse elemento, quero rodar Então, em nosso seletor Hober, vou digitar animation play state running Se eu definir esse arquivo, como você pode ver mais uma vez, a animação não está sendo executada . Mas se eu focar minha carreira nesse elemento, como você pode ver, mais uma vez, ele executa nossa animação Esse é o caso de uso da propriedade da placa de animação. Espero que agora esteja claro para você como funciona. Obrigado por assistir a este vídeo, aguarde nosso próximo ensaio. 21. Introdução e implementação de animação GSAP: Olá pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com uma nova animação Tutorial Real Tate E a partir deste tutorial, vamos começar a animação GreenSok Agora, vamos tentar entender o que é animação GSOC. Este é o site oficial da Greensak Animation. O GSP é uma biblioteca de animação JavaScript padrão do setor da GreenSok Isso permite criar animações de alto desempenho que funcionam em todos os principais navegadores. Então, em uma palavra, o GSOC é uma biblioteca de animação em JavaScript. É muito útil no desenvolvimento web. Agora, vamos abrir a página inicial. Portanto, esta é a página inicial da animação do GSAP. Costumávamos usar CSS para animação, mas agora podemos criar animação usando bibliotecas Java Scrib E agora a animação se tornou muito fácil porque não precisamos usar uma grande quantidade de propriedades CSS em nosso projeto. Além da animação, usando o GSAP, também podemos criar um site Deixe-me mostrar a demonstração. Estes são exemplos de sites que podemos criar usando animação GSOC Todo o site que você pode ver nesta seção é criado com animação GSOC Se eu rolar para baixo Little wet, aqui você pode ver o site feito com animações GSP Suponha que eu abra este site, esse site de portfólio. Vamos ver como fica. Aqui você pode ver a animação e as transições neste site animação GSAP fornece a aparência híbrida do seu site Deixe-me mostrar outros exemplos. Existem muitos sites feitos com animação GSOC. Suponha que se eu abrir este, aqui você pode ver o resultado. Quando eu rolo para baixo na minha página, fica assim. Há muitos exemplos feitos com animações do GSAP. Você pode conferir todos os exemplos, um por um, e aprender GSAP se tiver o conhecimento básico de Java script, Atmel Você não precisa de nenhum nível avançado de codificação para aprender o GSAP Agora vamos ver como podemos instalar a animação GSOC. Para isso, precisamos acessar a documentação da seção de documentos. E eu já abri meu editor de código Visa Studio e meu navegador usando a extensão Live Server. Então, como você pode ver no meu diretório de trabalho atual, temos apenas o arquivo index dot estil. Agora vou criar um arquivo JavaScript. Digite o som app dot e eu pressionarei Enter. E agora vou vincular esse arquivo JavaScript meu documento estim Então, aqui vou usar a tag Script. Fonte do script igual ao ponto do aplicativo s. Vou definir esse arquivo. E você pode usar qualquer nome para seu arquivo Tower Script. Não é obrigatório usar Ap Dogs. Você pode usar crypto js, ym Dogs, Hart Dogs. Tudo gira em torno de você. Agora vamos voltar para a página do documento. Depois de abrir a seção de documentação, você precisa clicar na opção suspensa Instalar Caso contrário, você pode pesquisar por Instalar. Então, vou clicar nesta seção Instalar. E aqui ele fornece todo o tipo de método de instalação. Usando o NPM, o Note Package Manager, você também pode usar o CN Rede de entrega de conteúdo. Também fornece R. A melhor e mais fácil maneira de usar essa animação é CDN E este é o seu link SN fornecido pelo GSAP. Então, devo copiar este link e voltar para o meu editor de código do Studio E vou colá-lo antes da tag de script App Do JS. E eu vou configurar esse arquivo. Sempre use seu arquivo JS personalizado abaixo do arquivo de origem, porque primeiro seu navegador deve ter conhecimento sobre o GSA Em seguida, ele pode facilmente chamar as funções em seu arquivo JS personalizado. E agora vamos experimentar com pouca animação Além disso, podemos criar essa animação usando CSS, mas não vamos usar CSS aqui. Então, vamos implementar a animação do GSoP. Então, em nossa tag corporal, primeiro, vou criar uma tag profunda Dep dot box Aqui eu crio uma tag profunda we, class name box. E então vou estilizar um pouco essa caixa. Deixe-me te mostrar. Então, vou usar a tag de estilo. Estilo e dentro da etiqueta de estilo, vou selecionar a caixa. Caixa de pontos, depois dentro da primeira propriedade de Caris, vou usar a roda E aqui, eu vou definir 200 pixels. Além disso, vou definir altura, altura, 200 pixels. Basicamente, vou criar uma caixa quadrada e depois vou dizer plano de fundo. Plano de fundo, e pode ser de qualquer cor. Por enquanto, vou usar a cor vermelha porque a cor vermelha é muito mais visível. E eu vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Fizemos nossa parte de STML e Cass. Vamos entrar no arquivo Abdo JS, animação greensock. Você se lembra que, em nossos tutoriais anteriores, aprenderemos sobre de e para Suponha que eu queira mover essa caixa na direção xs. Eu quero movê-lo 100 pixels na direção xs. Por enquanto, a posição dessa caixa é zero e eu quero movê-la em 100 pixels. Se você quiser mover de zero a 100, precisará usar dois. E se você quiser mover 102, zero novamente, então você precisa usar o formulário Você precisa se lembrar do conceito básico sobre isso? Já aprendemos sobre isso em nossa seção de animação, então não vou explicar isso em profundidade. Vamos começar o código para esclarecer o conceito. Aqui, vou digitar GSA. GSA, ponto, vamos usar duas funções. Dois. Então, dentro do latão redondo, você precisa mencionar o seletor, qual elemento você deseja Vou selecionar essa caixa usando o nome da classe. Então, dentro dos códigos duplos, vou digitar caixa de pontos. Então venha. Na próxima linha, vou usar calibraceis, e aqui precisamos mencionar o que queremos fazer com essa caixa? Eu quero mover esta caixa na direção do excesso x. Então, vou passar X, dois pontos, e vou movê-lo até 300 pixels E antes de configurar esse arquivo, se eu mostrar meu arquivo de estimativa de pontos de índice e se eu mostrar minha seção de estilo, e como você pode ver na minha seção de estilo, não usamos nenhuma animação. Depois de definir esse arquivo, como você pode ver, ele não está funcionando por causa da minha sugestão automática porque minha sugestão automática substitui essa palavra-chave por esta. Novamente, precisamos substituí-lo pelo GSA. Sim, e eu vou configurar esse arquivo. R Para definir esse arquivo, como você pode ver, ele moveu o elemento dessa posição para essa posição na direção excessiva. Agora, deixe-me explicar o que está acontecendo nos bastidores. Então, vamos inspecionar essa seção e, primeiro, unificar essa opção e depois selecionar esse elemento e aqui vou abrir minha seção de estilo Como você pode ver neste estilo sion, como você pode ver nesta seção de estilo, aqui ele transforma a propriedade. Transforme e traduza 300 pixels. Nos bastidores, o GSP usa essa propriedade sss para mover esse elemento Deixe-me esclarecer o conceito. Vou estender o valor. Eu vou fazer com que sejam 500. Desta vez, vou movê-lo para 500 pixels. Se eu definir esse arquivo, aqui você pode ver, agora o valor de translação da transformação é x x posição 500 pixels, e y xs posição ainda zero porque não movemos esse elemento na direção yx. É por isso que é zero. A estrutura central feita com css. Para este tutorial, acho que o servidor ativo não é obrigatório, então vou desligar o servidor Lib E, por enquanto, vou abrir o arquivo Index dot estim do nosso diretório Como você pode ver, desta vez eu abro esse arquivo do meu diretório. Não vou usar nenhum servidor ativo. Se eu recarregar este navegador, você poderá ver a animação Você pode experimentar essa animação. Se eu usar o servidor ativo , ele não está funcionando muito bem. Por enquanto, se eu ler este navegador, como você pode ver que ele está se movendo tão rápido, vou dizer alguma duração. Aqui, vou usar coma, depois vou usar a duração da chamada de propriedade. Duração, cólon, por enquanto, vou definir cinco segundos. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu recarregar este navegador, agora você pode ver nossa animação levar cinco segundos para concluí-la Se eu recarregá-lo novamente, aqui você pode notar que, de tempos em tempos , ele aumenta nosso excesso de valor Basicamente, ele alterou a propriedade ss de acordo com a duração. Se você quiser executar essa animação após 2 segundos, sim, você pode usar o delay. Só aqui você entra em coma, então você precisa digitar delay. Atraso, cólon, e eu um, dois segundos de atraso. Se eu definir esse arquivo e reiniciar meu navegador, como você pode ver depois de dois segundos, ele iniciará uma animação Para fazer essa animação acontecer, não precisamos digitar uma grande quantidade de Sess cote em nossa seção Sass Só precisamos usar essa quantidade de votos se usarmos a biblioteca GSAP Em seguida, vou mover essa caixa na direção y x. Aqui, vou digitar y, dois pontos e, da direção xs, quero movê-lo, 300 pixels Se eu definir esse arquivo e recarregar meu navegador, como você pode ver depois de esperar dois segundos, ele se move x x e também se move na direção x. Ao mesmo tempo, se você quiser alterar a cor do plano de fundo, poderá usar essa propriedade. Suponha que eu queira alterar o plano de fundo, então vou usar a propriedade do plano de fundo. Cor do plano de fundo. Cólon, e eu quero dizer que é cor verde Cor de fundo verde. E então eu vou salvar esse arquivo. Depois de definir esse arquivo, vou recarregar o navegador. Depois de configurar esse arquivo, como você pode ver, ele não está funcionando porque acho que fiz alguns ex. Precisamos fornecer esse valor como uma string, então eu preciso fornecer esse valor dentro da cotação. Então, eu vou usar single. Novamente, vou configurar esse arquivo e redotar meu navegador. Depois de reiniciar meu navegador, operando por dois segundos, como você pode ver, ele inicia a animação e também altera a cor de fundo desse elemento profundo Por enquanto, vou reduzir a duração, vou fazer com que seja de dois segundos. Além disso, vou remover o atraso e configurar esse arquivo novamente. Como você pode ver, agora ficou vermelho para verde. Lembre-se, em CSS, usamos propriedades de fundo como essa. Plano de fundo, cor do hífen. Mas no script Java, não usamos propriedades de fundo como essa. Aqui usamos água da caixa Camel. Como você pode ver, nossos personagens C começam com Camel case. Usamos o caso Camel no script Java. Aqui você pode usar dentro da propriedade hy também a propriedade de escala. Suponha que eu queira escalar esse elemento. Escala do tipo H. Escala, e eu quero escalá-la até duas vezes e depois entrar em coma. Agora, se eu executar essa animação, ela estenderá esse elemento duas vezes. Deixe-me te mostrar. Depois de executar essa animação, como você pode ver, ela aumenta o tamanho da caixa. Agora se tornou 400 pixels em x xs e 400 pixels em y x. Além disso, você pode definir w e altura, deixe-me mostrar. Então, novamente, vou configurar esse arquivo e ler meu navegador, e desta vez, vou definir w. Nós e como vou definir com 100 pixels. Basicamente, se eu definir esse arquivo e executar essa animação, ela retornará, reduzirá a largura do elemento porque, em quatro, a largura do nosso elemento é de 200 pixels. Então, se eu relacionar essa animação como você pode ver, ela reduz a largura dela. Por enquanto, espero que esse conceito esteja claro para você, como podemos usá-lo. Neste exemplo, para executar essa animação, precisamos recarregar esse navegador Mas, no futuro, para executar essa animação, usaremos o gatilho Scroll. Então, sempre que eu rolar o navegador, ele executa a animação. Como eu disse para entender a animação SAP, você deve ter conhecimentos básicos sobre SSs e Stable Então, isso é tudo para este tutorial. Esta é a pequena introdução e demonstração sobre animação SAP. Espero que você goste desse tutorial. Obrigado por assistir a este vídeo, Stun para o próximo tutorial 22. Introdução e implementação de animação GSAP, parte Dois: Ei, pessoal, é bom ver vocês de volta. Este é outro tutorial relacionado à animação de meias verdes. Em nosso tutorial anterior, criamos essa animação básica usando o GSOC Se recarregarmos esta página, como você pode ver, esta é a nossa animação Demorou 2 segundos para concluir a animação. Além disso, reduziu a largura desse elemento. Com isso, altere também a cor de fundo desse elemento, de vermelho para verde. E agora vou mostrar como você pode girar esse elemento Por enquanto, vou comentar essa largura de linha e, em seguida, vou usar outra propriedade chamada girar Gire e eu quero girar 360 d em verde. C. Se eu definir esse arquivo e fechar meu navegador, você poderá ver o resultado Basicamente, podemos fazer tudo usando nossas propriedades de animação em CSS. No futuro, vamos aplicar essa animação com eventos. É por isso que o script Java é importante, e agora vamos entrar na função from. Agora vou comentar todas as linhas. Então eu vou ligar a partir da função. Então, novamente, Amer digite G G SAP dot, novamente, minha sugestão automática, substitua minha palavra-chave Então, Amer digite o menu GPS. Um ponto de dentro da bunda redonda. Primeiro, vou selecionar o elemento da caixa. Caixa de pontos. Na próxima linha, vou usar casos. Dentro dos casos, precisamos definir nossas propriedades e valores, e vou aplicar exatamente as mesmas propriedades. Aqui eu digito o valor x x é 500. O valor Y é 300. Em seguida, vou passar o valor enraizado. Gire o valor, ou aplique 360 graus. Próximo valor, eu digo duração. Duração e meses em dois segundos. Em seguida, vou aplicar a cor de fundo. Cor do plano de fundo. A cor de fundo, ou aplique, é em um único verde. E eu quero configurar esse arquivo. Então, basicamente, eu aplico as mesmas propriedades que eu aplico nas minhas duas funções. Se eu relotar meu navegador, agora você pode entender qual é a diferença entre a função two e from Quando eu uso duas funções, ela moveu o elemento da origem. Mas quando você aplica a partir da função, remonta ao seu local de origem Então eu recarrego meu navegador, como você pode ver, ele retornou ao local de origem Se eu recarregar meu navegador novamente, como você pode ver, ele voltará à posição original Então essa é a diferença básica entre a função dois e a função from. Se você notar que está gasoso, ele se transforma em verde para vermelho. Também gira na direção oposta. Agora vamos falar sobre propriedades repetidas. Se você quiser repetir essa animação várias vezes, precisará usar essa propriedade. Ele digita, repete. Repita, e eu vou dizer que repita três vezes. Se eu recarregar meu navegador, ele repetirá essa animação no total quatro Porque, por padrão, ele executará a animação uma vez, depois você repetirá a animação três vezes. Deixe-me te mostrar. Então, vou recarregar meu navegador. Depois de recarregar meu navegador, como você pode ver, ele repetirá essa animação no total quatro vezes Agora, se você quiser repeti-lo por tempo infinito, para isso, você pode usar menos um valor Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, ele será executado sobre a animação infe T. Não vai parar até que eu mude o valor. Por enquanto, vou alterar o valor, repetir, zero, e vou salvar esse arquivo. Depois de configurar esse arquivo, vou recarregar meu navegador. Então, como você pode ver, desta vez, isso interromperá nossa repetição de animação. E agora vou aplicar o efeito O. Agora eu quero executar minha animação para cima e para baixo. Para isso, vou passar uma propriedade O U, U e passar o valor verdadeiro. Verdadeiro. Então eu vou repetir essa animação. Por tempo. Eu quero configurar esse arquivo. Se eu recarregar o navegador, você poderá ver o efeito UU Agora funciona como UU. Se eu tornar esse valor verdadeiro , ele avançará e retrocederá Vai sair uma vez e voltar. E se eu passar o valor de repetição infinito, depois o tempo infinito, ele fará a mesma coisa. Além disso, você também pode aplicar a mesma propriedade nessas duas funções. Em seguida, ele fornecerá o mesmo efeito, mas a diferença é que, se usarmos duas funções , esse elemento não voltará à posição original. Ele para na posição de destino naquele local. Agora vamos voltar para a página de pontos de índice. Como você pode ver, agora temos apenas um elemento profundo. Mas vou duplicar essa linha no total três vezes. Agora temos um total de quatro elementos profundos. Além disso, vou comentar algumas propriedades na minha função ap Dots. Primeiro, vou remover a função de rotação. Então eu quero movê-lo apenas em direção excessiva. Em seguida, removerei o valor de repetição. Além disso, vou descomentar U. Então eu quero definir esse arquivo Em seguida, volte para a página do estel e reduza o tamanho dessa caixa Desta vez, vou fazer com que seja 100 pixels por 100 pixels. Se eu definir esse arquivo e recarregar meu navegador, ele aplicará toda a animação de animação, todo o elemento profundo, porque a classe deles é a mesma Vamos fornecer uma pequena margem entre eles. Margem, cinco pixels. E eu vou configurar esse arquivo. Depois de deslizar esse arquivo, se eu ler meu navegador, agora você pode ver a lacuna entre eles. E agora vou mudar o nome da classe de todos esses elementos. Essa é a caixa 1. Esta é a caixa número dois. Esta é a caixa número três, e esta é a caixa número quatro. E eu vou configurar esse arquivo. Agora vamos voltar ao arquivo Apo JS. Esta é a caixa número um. Primeiro, vou mudar o estilo de animação. Vou usar duas funções. Este aplicativo, dois. Então, vou duplicar esta seção várias vezes. Basicamente, vou remover todas essas linhas comentadas. Eu não preciso disso. Então, vou duplicar esta seção no total três vezes. Esta é a caixa número dois. Esta é a caixa número três. Desculpe, este é o número da caixa. Esta é a caixa número três, e a última é a caixa número quatro. Se eu definir esse arquivo e reordenar meu navegador, ele retornará o mesmo resultado Somente para fazer alterações em nosso ponto de índice , uma seção de estilo de arquivo SML Aqui, vou direcionar todo o elemento de de uma vez. Porque eu mudo o porque a partir daqui, eu mudo os nomes das classes. Vou passar o nome do elemento tag name d. E definir esse arquivo. Se eu ler meu navegador, você verá o resultado. Agora, todos os elementos completam a animação ao mesmo tempo. Mas agora eu quero executar o segundo número após o primeiro número. Quero dizer que depois de executar a animação do primeiro elemento, quero um pouco de atraso para o segundo elemento. Para isso, aqui vou usar outra propriedade chamada delay. Eu vou até lá e vou usar a propriedade Delay. Atraso, e eu quero atrasar até dois segundos. Opa, a ortografia de atraso é redonda, DE AY. Então, devo configurar esse arquivo novamente e recarregar meu navegador. Depois de recarregar meu navegador, como você pode ver, após dois segundos de atraso, ele executa a animação Então, um por um, você pode atrasar a animação. Suponha que, para o terceiro elemento, eu vou atrasá-lo em até 4 segundos. Então, para o quarto elemento, quero atrasá-lo em até 6 segundos. Novamente, vou configurar esse arquivo e recarregar meu navegador. Depois de vermelho meu navegador, depois de concluí-lo, ele espera 2 segundos e, em seguida, roda um por um. Agora, o problema é que você precisa selecionar todas as caixas, uma por uma. Além disso, você precisa aplicar o atraso várias vezes. Mas a Green Sock tem a solução para isso. Então, vou comentar toda a linha , exceto a primeira. Então eu duplico o primeiro e comento esse duplicado. E desta vez, vou selecionar todas as caixas de uma vez. Vou remover a caixa um. Além disso, preciso fazer alterações em nosso arquivo estável. Agora, novamente, vou mudar todo o nome da classe. Caso contrário, também podemos adicionar outra caixa de nome de classe. Aqui eu vou adicionar uma caixa. Caixa. E eu quero configurar esse arquivo. Basicamente, aqui usamos várias classes no mesmo elemento. Agora leva de volta ao arquivo Abdo JS. Agora vou aplicar o mesmo atraso na minha animação. Para isso, basta usar uma propriedade chamada strager, STA double GER, staggered, e eu vou dizer seis Então eu tenho que configurar esse arquivo. Depois de configurar esse arquivo, vou recarregar meu navegador. Como você pode ver, depois de concluir o primeiro, necessário executar o segundo. Depois de concluir o segundo , ele executará o terceiro. Da mesma forma, depois de completar o terceiro, ele executará o quarto. Se eu reduzir o valor do marcador de valores, se eu fizer quatro e depois definir esse arquivo, agora ele fará a mesma coisa um pouco mais rápido Depois de concluir o primeiro, ele executará o segundo. Em seguida, ele executará o terceiro. Por fim, vai rodar o quarto. Se eu reduzir o valor do tiger, se eu fizer 1 segundo, um e depois definir esse arquivo e eluir meu navegador, agora você pode ver que depois de 1 segundo ele executará toda a animação uma por uma Agora, não precisamos digitar essa quantidade de código para obter o resultado. Apenas uma propriedade e um valor fazem a mesma coisa. Não precisamos criar animações individuais para isso. Com a ajuda do valor escalonado, você pode definir o tempo de atraso entre as animações Valor impressionante ao gerenciar seus atrasos individuais. Se você abrir a documentação dessa animação GSP e pesquisar funções, duas GSAP para funcionar, e se você abrir esta seção, aqui poderá ver o uso das propriedades especiais Você pode ver dados, atraso, duração, ID, Las. Há muitas propriedades relacionadas à função e você pode usar todas elas. Depois de rolar um pouco para baixo nesta página, aqui você pode ver a propriedade stagger E nesta seção, você pode ler a documentação sobre a propriedade de escalonamento documentação oficial é a melhor maneira de aprender alguma coisa. Sempre fornece a resposta certa e atualizada. Você pode ler sobre propriedades de UU, UEs, quadros-chave, etc Em nosso primeiro tutorial e no segundo tutorial, eu apenas tento apresentar como podemos usar a animação GSP e quais são as propriedades Acabamos de aprender sobre o processo de trabalho da animação GSP. No próximo tutorial, aprenderemos sobre cronogramas. Vamos aprender sobre revendedor de pergaminhos, locomotivas, etc. Então, isso é tudo para o tutorial. Obrigado por assistir a este vídeo, Stedun, para o próximo tutorial 23. Linha do tempo no GSAP Crie sua primeira linha do tempo: Olá pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com uma nova animação GSP relacionada ao tutorial E neste tutorial, vamos aprender o cronograma do GSP A linha do tempo do GSP é uma ferramenta de sequenciamento que permite aos usuários controlar e gerenciar o tempo da animação Basicamente, é um contêiner para gêmeos e outras linhas do tempo e é usado para criar sequências complexas Com cronogramas, as animações são exibidas na água. Eles estão listados na lista legal. Assim, novas animações podem ser adicionadas sem calcular manualmente Os cronogramas também possibilitam a criação de uma sequência de animação facilmente ajustável e resiliente Aqui estão algumas coisas que você pode fazer com os cronogramas. Posicione a animação no tempo, repita as animações, inclua atrasos antes da repetição e Em uma palavra simples, cronograma é qualquer coisa definida em um período de tempo Suponha que essa seja nossa linha do tempo de cinco segundos. Mas como podemos especificar tarefas diferentes em segundos de tempo diferentes. Podemos realizar tarefas diferentes em períodos de tempo diferentes. Basicamente, usando a linha do tempo, podemos especificar o que vamos executar passo a passo Em nosso tutorial anterior, aprenderemos sobre como podemos executar a animação do GSAP Se quisermos executar animações uma após a outra , precisamos atrasar cada animação e, para resolver o problema de atraso, o GSP introduz Então, vamos discutir o cronograma. E lembre-se de que nossa linha do tempo está conectada entre si e funciona passo a passo Então, finalmente, estamos na página de documentação da animação GsAP E em nossos tutoriais anteriores, já aprendemos como instalar a animação GSP Agora, vamos voltar ao código do User Studio. Então, como você pode ver, lado a lado, abro minhas viseiras no seu editor de código e no meu navegador E como você pode ver no meu diretório de trabalho atual, temos o arquivo Coral Three, o arquivo Index dot SML Mind Sess e o arquivo Abdo GS E em nosso arquivo STL de pontos de índice, eu já vinculo a animação GSP nessa tag de script e já uso link SN da animação GSP usando a tag de Agora, dentro da tag body, vou criar a caixa Total de três. Então, o Hamer tipo D tem uma caixa de etiquetas. Essa é a caixa número um. Então eu dupliquei esta seção. Esta é a caixa número dois. Novamente, vou duplicar esta seção, e esta é a caixa número três Além disso, vou atribuir uma aula. Vou atribuir a mesma classe à qual podemos direcionar todos os conselhos. Então eu vou digitar class, isso é apenas uma caixa. Em seguida, copio esta seção e colo na nossa caixa dois e na caixa reta. Novamente, vou configurar esse arquivo. E então eu vou pular para o ponto principal css five. Primeiro, vou usar o seletor universal. Comece dentro do Cis, eu vou dizer margem, zero Nossa próxima propriedade, vou usar o preenchimento zero, e nossa terceira propriedade é a caixa de dimensionamento da caixa de tamanho da caixa de borda E então eu vou estilizar o elemento da caixa. Então, vou usar o nome da classe dot box dentro do cultivs, primeira propriedade, vou usar peso Peso, 100 pixels. Altura, 100 pixels. Em seguida, vou usar a propriedade de fundo, plano de fundo e vou usar a cor dourada. Além disso, vou adicionar margem, margem e vou adicionar marcha de cinco pixels Vou configurar esse arquivo. Se eu sentar este arquivo e relacionar meu navegador, aqui você verá o resultado. E agora eu quero atribuir animação diferente a esses itens Mas um após o outro. E para atribuir a animação, vamos usar o GSap Vamos entrar no arquivo APP dot GS. Primeiro eu tenho que digitar, Gap. Ponto. Novamente, nossa sugestão automática substitui a palavra-chave Estou de volta à posição GSP, dot, e vou usar a função pro De. Em seguida, em definir a rodada ss insira os códigos duplos , primeiro, vou selecionar o primeiro elemento, caixa um Vou selecionar esse elemento usando seu nome de ID, tem a caixa de tag um. Então Oma inseriu a primeira propriedade cis, eu vou usar a opacidade Opacidade. Primeiro, vou tornar a opacidade zero e, em seguida, vou usar a duração, o tempo de duração da animação Duração e eu quero dizer que a duração total é de cinco segundos. Se eu definir esse arquivo e recarregar meu navegador em 5 segundos, esse elemento se tornará Eu quero dizer que esse elemento oposto se torna 021. Deixe-me te mostrar. Se eu recarregar meu navegador, como você pode ver em 5 segundos, ele se tornará Além disso, vou dizer que o valor excedente é 300. Do excesso de direção, ele vem de 300 pixels. Vou configurar esse arquivo e recarregar meu navegador, você pode ver o resultado Acho que cinco segundos é muito tempo para essa animação, então vou fazer com que sejam dois segundos. Então eu vou começar esta seção. Desta vez, vou selecionar a caixa número dois. Vou alterar a caixa de nome de ID número dois, configuro esse arquivo e recarrego meu navegador , e as duas animações funcionarão juntas. Deixe-me te mostrar. Você pode ver o resultado. Agora temos uma solução. Podemos usar a propriedade de atraso. Atraso, e eu quero adicionar dois segundos de atraso. Se eu configurar esse arquivo e recarregar meu navegador, como você pode ver, use o COA entre esses dois D. Então, novamente, vou configurar esse arquivo e guiá-lo pelo Aqui você pode ver, depois de concluir a primeira animação e dois segundos de atraso, concluir a segunda animação. Se eu fizesse a mesma coisa várias vezes, isso se tornaria um código enorme. Suponha que criemos um site e aprenderemos vários efeitos, e eu queira executar esses efeitos múltiplos um após o outro. E se seguirmos esse método , isso se tornará horrível. Vamos usar o cronograma para isso. Vou comentar todos os códigos. Depois, volto para a seção de documentação. Em seguida, você pode pesquisar a linha do tempo nesta barra lateral do filtro. Além disso, você pode clicar nessa opção, linha do tempo. Aqui, eu apenas tento mostrar de onde você pode obter a documentação do cronograma Depois, basta voltar ao arquivo JS. Primeiro, vou declarar uma variável. Aqui, digite CS. Cs e meu limite variável são estatísticas de T. TL para a linha do tempo, iguais ao GSA Cronograma do GS. Função de cronograma de pontos GSA. Aqui criamos a linha do tempo e agora vou usar o mesmo código Vou copiar esse código e executá-lo usando o GSap Deixe-me te mostrar. Aqui, vou colar o código e descomentar esse Agora precisamos dessa propriedade DLA. Então, vou remover essa propriedade. Aqui, vou substituir o GSP pelo TL. T L. E eu vou configurar esse arquivo. Agora, aqui criamos uma linha do tempo. Se eu recarregar meu navegador, como você pode ver depois de concluir o primeiro, ele iniciará o segundo Mas você pode notar aqui que não usamos nenhum atraso. Se eu fizer a mesma coisa com o terceiro, vou duplicar essa linha e alterar a caixa de nome de ID número três, e eles configurarão esse arquivo Em seguida, defina esse arquivo e recarregue pelo navegador. Agora você pode ver que depois de concluir o primeiro, ele iniciará o segundo depois iniciará o terceiro. Basicamente, o cronograma substitui a propriedade de atraso. Obviamente, você pode usar o delay se trabalhar com pouca animação. Se sua animação for grande, caso contrário, se você usar várias animações, sempre use a linha do tempo É muito útil quando você cria uma série de efeitos. Agora, nos levou de volta à documentação. Se quiser repetir sua linha do tempo, você pode usar esse objeto. Deixe-me te mostrar. Então, vou copiar esse valor e propriedade do objeto. Em seguida, volte ao código do visto sudo. Então, dentro dessa função de tempo, vou usar Call Cases. Em seguida, vou colar o valor de repetição. Quero repetir essa animação no total duas vezes. Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, primeiro ele completa o primeiro, depois o segundo e depois o terceiro E agora ele vai repetir a linha do tempo. É assim que a repetição funciona. E se você quiser atrasar entre esses cronogramas, sim, você pode Apenas uma unidade para usar essa propriedade, repita o atraso. Então copie essa propriedade e valor, depois volte para o código do estúdio, e depois do coma, eu vou colá-lo aqui. Ele vai repetir esse produto de animação duas vezes. Além disso, isso adicionará um pequeno atraso mais uma vez entre esse cronograma Se eu definir esse arquivo e recarregar meu navegador depois de concluir a linha do tempo, você pode ver que ele vai esperar por 1 segundo Então, mais uma vez, ele executará a linha do tempo novamente. Você pode ver o resultado. E se eu aumentar o valor , ele vai esperar por muito tempo. Além disso, ele fornece algumas outras funções, como pausar, retomar SC e reverter Suponha que, se você quiser reverter a linha do tempo, se clicar em qualquer botão , isso inverterá a linha do tempo Ele fornece todas as opções diferentes, como você pode usá-lo. Você pode ler a documentação para obter mais conhecimento sobre isso. A partir daqui, você pode aprender todas as opções. Agora vamos falar sobre o tempo absoluto. Foi medido desde o início da linha do tempo. Deixe-me mostrar o exemplo. Agora, vamos dar ao código do Visa Studio, e vamos dar ao ponto índice uma multa estável. Aqui, vou usar a tag de cabeçalho, H two, e também vou atribuir um ID de ID igual a demi e ele digitar um texto, hello world E vou configurar esse arquivo e recarregar meu navegador. Em seguida, vamos voltar ao arquivo Ab dot JS. Aqui, vou animar essa tag de cabeçalho. Mas, a princípio, vou reduzir o valor da repetição. Eu quero repetir isso apenas por uma vez. Em seguida, vou selecionar essa tag de cabeçalho usando a linha do tempo. TL dot, e eu vou usar o método from. Então eu coloquei o latão redondo. Primeiro, vou segmentar primeiro, vou segmentar a tag de cabeçalho usando o iDame Tem a tag Dm. Portanto, na calibração, Ham usa uma propriedade chamada opacidade Opacidade, e eu defini a opacidade zero, e então vou usar o tempo obsoleto exatamente tempo obsoleto Hm, para usar o tempo obsoleto, e eu quero configurá-lo para 3 segundos. Se eu definir esse arquivo e ler meu navegador, como você pode ver, após 3 segundos, ele iniciará a animação. Primeiro, ele mostrará o hellowd, depois iniciará essa animação uma por uma Basicamente, isso adiciona um pouco de atraso a essa animação. Basicamente, ele mostrará esse elemento após 3 segundos. Mas se eu mover este, se eu mover isso abaixo da caixa dois, então eu vou cortar essa parte e colar abaixo da seção da caixa dois. Se eu configurar esse arquivo e recarregar meu navegador, até 3 segundos, ele mostrará esse texto Mas esse cronograma já começa. Deixe-me te mostrar. Se eu recarregar meu navegador, como você pode ver, ele inicia minha animação e , em 3 segundos, ele mostra o texto É assim que funciona se eu trocar a água. Há muitas coisas assim na linha do tempo do GSP. Comece o nível e aprenderemos sobre isso de tempos em tempos em nosso próximo tutorial. Em seguida, vamos criar um site. Em nosso primeiro tutorial, aprenderemos como podemos usar GSP e, em nosso segundo tutorial, aprenderemos sobre o cronograma No próximo tutorial, vou tentar criar uma página de destino interessante usando esses métodos de cronograma Além disso, vou tentar implementar todas as coisas que aprendi em nossos tutoriais anteriores Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo, Stune para o próximo tutorial 24. Crie designs animados de linha do tempo: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação DSP. Hoje, neste tutorial, vamos criar um lindo projeto. Vamos criar um projeto de cronograma de animação horizontal Como você pode ver no meu navegador, temos uma linha horizontal. E como você pode ver, criamos uma linha do tempo usando essas caixas Agora, eu quero animar essa caixa, quando eu descarrego meu navegador Então, você pode notar que, quando eu removo meu navegador, primeiro, você pode ver que ele se moveu na linha horizontal Então, uma por uma, ela vai animar nossas caixas. Caixas com efeito de arcos, efeito de rotação, efeito de escala, efeito de atenuação e, por fim, movemos essa caixa na direção oposta Como podemos criar esse efeito de animação. Como você sabe, para criar esse efeito de animação, vamos usar a linha do tempo do GSAP Além disso, vamos usar as propriedades GAP is I. Então, sem perder seu tempo, vamos começar a prática e ver como podemos criar essa bela animação Então, como você pode ver, estamos pensando em visto codor. E se você notar, você pode ver que, em nossa etiqueta corporal, temos uma etiqueta profunda principal. Dentro dessa tag profunda principal, ele criará várias caixas. Ele criará um total de seis caixas, e cada caixa vem com um ID diferente. Com isso, atribuímos uma caixa de nome de classe a cada elemento profundo. E para definir a posição da caixa, também atribuímos a outras classes a parte superior da caixa para a posição superior e para a parte inferior da caixa para a posição inferior. Usamos essa classe para posicionar nosso elemento acima da linha horizontal. Além disso, temos outra caixa de nome de classe na parte inferior. E essas classes costumavam colocar caixas abaixo da linha horizontal. Agora, vamos entrar no arquivo CSS. Se eu mostrar esse arquivo CSS, primeiro atribuímos uma altura de vitória fixa à nossa tag de profundidade média e também definimos uma cor de fundo. Então, aqui criamos uma linha horizontal usando o seletor posto após o posto Primeiro, criamos um conteúdo sem graça, depois o posicionamos como absoluto, porque em nosso elemento principal, Hos usa a posição relativa, Dy D H usa a posição absoluta Então eu uso uma altura fixa gh w, seis pixels por oitavo, 1920 pixels Depois, crie a linha horizontal. Aqui eu crio as caixas, essas caixas. Em seguida, eu crio os círculos. Aqui, criamos dois círculos diferentes para boxtop e as classes box bottom Para criar os círculos, use também o seletor after posto Como você pode ver, esse círculo e a rosa foram feitos com seletores pós-docla Por fim, uma a uma, eu posiciono esta caixa de acordo com a linha horizontal. Neste tutorial, não vou explicar como posso criar essa estrutura STS. Não se preocupe, fornecerei o código-fonte dessa estrutura. Agora, vamos entrar no arquivo JS, arquivo Abdo JS. Mas antes, se eu mostrar meu arquivo STL de pontos de índice, aqui você pode ver, eu já vinculo à biblioteca SP usando CL Também anexe o arquivo Abdo JS a este documento. Vamos isso para o arquivo Abdo JS. Então, rapidamente, vou integrar a linha do tempo. Então, vou criar um custo variável. E nossa variável m é t, estrelas TL para a linha do tempo, igual a g Sap Função de cronograma Gap. Eles colocarão dois nesta linha. Depois de criar a linha do tempo, uma por uma, quero implementar todo o elemento No começo, quero implementar o elemento principal. Vou selecionar o nome da classe e depois voltar para o Apo five Primeiro, vou usar a função de formulário. Tl de Then dentro do ss redondo. Primeiro, vou selecionar o elemento principal, usando seu nome de classe dot Ming, e quero mover esse elemento na direção x x. Dentro do heterótipo cals, x dois pontos dentro do duplo menos cem Se eu definir esse arquivo, voltar ao meu navegador e recarregar meu navegador, você poderá ver o resultado Como você pode ver, vamos mover esse elemento principal do lado esquerdo para o direito, acho que essa animação é muito rápida. Vamos usar um pouco de duração. Aqui, vou usar a propriedade de duração. Duração, e aqui vou usar a duração total de segundos de força. Acho que isso é suficiente. Se eu definir esse arquivo, voltar ao meu navegador e recarregar meu navegador, você poderá ver o efeito Como você pode ver, toda a seção se move para o lado direito em 4 segundos. Mas se eu recarregar este navegador novamente, como você pode ver, a cor de fundo do corpo ainda é branca Agora precisamos combinar a cor de fundo desse corpo com essa cor. Para isso, vou entrar no arquivo CSS de pontos de estilo. E aqui, vou usar a mesma cor de fundo na minha etiqueta corporal. Então, primeiro, vou selecionar a tag body. O corpo está no crass, vou usar essa propriedade de fundo e vou definir esse arquivo Agora, se eu voltar ao meu navegador e recarregá-lo. Agora, a cor de fundo do nosso corpo e cor de fundo do elemento principal são semelhantes. E para tornar essa animação mais atraente, vamos torná-la 100%. -100%, não pixel. Se eu definir esse arquivo, voltar ao meu navegador e recarregar meu navegador Você pode ver a animação. Como é assim. Isso é apenas uma animação da seção principal. Mas, como eu disse em nossos tutoriais anteriores, usar o Live Server é a opção não baseada para animação SSs porque toda vez que eu salvo meu arquivo, ele recarrega Então, vou pausar essa gravação por 2 segundos. E desta vez, abro este documento do meu diretório, não do servidor ativo. Inicialmente, em nossa linha do tempo, movemos esse elemento principal da direção de -100% de excesso Aqui usamos a linha do tempo porque, uma por uma, quero realizar minha animação Em seguida, vou selecionar nosso elemento da caixa um. Essa. Então, copio o nome do ID e volto para o arquivo Abdo JS Aqui vou amarrar, basicamente, vou cavar esta seção e substituir dot main em nossa primeira caixa, usando seu nome de ID. Aquela caixa está pronta? Além disso, quero mover esse elemento da direção x xs. Aqui eu quero dizer duração, apenas 1 segundo. E eu vou configurar esse arquivo. Agora, vamos voltar ao navegador. Se eu ler esse navegador, primeiro ele executará a animação principal, depois executará a segunda animação. Mas o problema está na animação do primeiro elemento, os círculos vão atrás da linha horizontal. Então, para resolver o problema, deixe isso no arquivo de estilo dot cess. Este é o nosso arquivo de estilo dot cess. Essa é a linha horizontal. Primeiro, em nossa linha horizontal, vou dizer índice zero, índice Zight e vou dizer zero índice um Então eu vou dizer índice zero em nossa caixa. Vou digitar o índice Zight e Herm pas 999. E eu vou configurar esse arquivo. Aqui eu uso o Big V porque toda vez eu preciso de caixas acima da linha horizontal. É por isso que, aqui estou: linha horizontal zero índice um e caixa zero índice 999 Se eu definir esse arquivo e agir no navegador e recarregar esse navegador, desta vez, você pode ver até rodar a animação principal, ela move a caixa E como você percebe, desta vez nosso círculo está acima da linha horizontal. Com isso, quero tornar essa animação de caixa mais atraente. Hm para definir a opacidade. Vamos voltar ao arquivo Abdo chase e, desta vez, vou usar outra propriedade chamada opacity, OPA City opacity zero Quando a caixa começa a se mover da direção x xs , definimos o zero oposto. Se eu voltar ao navegador e eluir meu navegador, agora você pode ver a animação principal Se você observar com cuidado , está funcionando corretamente. Mas se eu aumentar a duração, se eu fizer 3 segundos para a animação da caixa e, novamente, voltar ao navegador e recarregar o navegador, primeiro ele executará a animação principal Agora você pode notar a opacidade. Aqui você pode observar a opacidade desse elemento, como ele mudou E agora eu quero levar essa animação para o próximo nível. Para isso, precisamos usar algum efeito de atenuação. Então, vamos entrar na documentação deste site e pesquisar por easing, EA, AIN Z, você pode pesquisá-lo nesta seção de versos laterais do filtro Forneça vários exemplos de animação de atenuação, como power one, power two, power three, power four, back, bounds, illustri, etc Cada opção é diferente uma da outra. Suponha que se eu selecionar a potência dois, é assim que nossa animação será executada. Se eu usar de volta. É assim que nossa animação será executada. Esse é o gráfico dessa animação. Da mesma forma, se você quiser usar o efeito illustr, é assim que o efeito illustr funciona. Suponha que eu queira usar esse efeito para ilustrar. Copie essa propriedade e valor e depois volte para o código do estúdio. Aqui, à medida que pressiona a duração, 2,2 x 0,5 segundos, vou usar coma Em seguida, vou usar essa propriedade e ilustração de valor E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar esse navegador, depois de realizar a animação principal, você poderá ver o efeito try do primeiro elemento Por enquanto, eu gostaria de interromper a animação profunda principal, porque toda vez que ela executa a animação , leva mais tempo. Primeiro, vou comentar esta seção. Não se preocupe. Vou descomentar esta seção mais tarde. Em seguida, vou configurar esse arquivo e recarregar meu navegador. Agora você pode observar apenas essa animação. Se você quiser alterar o efeito, suponha que queira usar ba. Nesse caso, só aqui, você precisa digitar está de volta. Depois desse arquivo, se eu recarregar meu navegador, você pode dizer o efeito de retorno Agora, da mesma forma, quero trazer esse elemento da direção oposta. Eu quero trazer esse elemento do lado direito. Desta vez, quero trazer nosso último elemento do lado direito. Vou ampliar esta seção e, desta vez, vou selecionar a caixa número seis, porque essa é a última caixa. Selecionamos essa caixa usando seu nome de ID e, em seguida, vou mudar a posição do eixo x, cem por cento a partir do x xs. Se eu definir esse arquivo e voltar para um navegador e recarregar meu navegador Como você percebe, a primeira caixa vem desse lugar e a segunda caixa vem dessa direção. Ambas as animações fazendo a mesma coisa, mas só para mudar a direção. Em seguida, vou usar o efeito de caixa para esse elemento, 2012. Se eu selecionar essa opção, você pode ver como essa animação funciona. Vamos voltar ao código do estúdio Es. Entre a caixa um e a caixa seis, quero colocar a animação da caixa dois. Quero duplicar esta seção em série e selecionar a caixa dois, e vou alterar o valor ese de volta para Além disso, precisamos mudar a posição, xs para y x, menos a posição y x, e eu vou definir esse arquivo Depois de definir esse arquivo, vamos para o navegador. Depois do navegador, depois de executar a animação da primeira caixa, ele executará a segunda animação da caixa. Opa, acho que cometi algum erro porque precisamos trazer essa caixa de baixo, não de cima Vamos voltar aos vistos para seu código remover o -100% e definir esse arquivo Depois desse arquivo, novamente, vou recarregar meu navegador Depois de executar a primeira animação, você pode observar a segunda animação, como ela funciona e fornece um efeito de ressalto Em seguida, ele executa a terceira animação. Então eu vou animar a terceira caixa. Então, vamos voltar aos vistos para seu código, e vou filtrar esta seção E desta vez eu quero selecionar a caixa número três, e vou mudar a direção -100%. Com isso. Agora, com o salto, quero algum efeito rotativo. Então, vou usar uma propriedade chamada rotacionar. Gire dois pontos e eu quero girá-lo 360 graus, um círculo completo. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, primeiro ele executa nosso primeiro elemento, depois executa o segundo elemento e, se você notar, como você pode ver, ele curva o elemento e também enraizou o elemento Em seguida, vou mirar na quarta caixa. Novamente, estou de volta ao código de parada e à duplicata, número três Primeiro, vou mudar a direção, 100%, porque quero movê-la de baixo para baixo. Então eu vou usar o mesmo efeito de limites. Mas desta vez eu não vou usar o efeito de rotação. Desta vez, vou usar a habilidade cinco. Escala, dois pontos, e eu quero fazer a escala 0-1. Então aqui eu passo zero. Mas antes de definir esse arquivo, precisamos alterar o ID, caixa número quatro, e eu vou definir esse arquivo. Agora, vamos saudar o navegador. Depois de redistribuir o navegador, se você notar a quarta caixa, poderá entender a animação Com efeito de ressalto, ele escala o elemento. E agora eu quero animar o quinto elemento. Para isso, desta vez vou usar outro efeito. Desta vez, vou usar o efeito lento. Vamos voltar ao código do estúdio e, primeiro, vou duplicar esta seção Então eu vou mudar o ID. Coloque quatro a cinco e altere o salto para lento Primeiro, vou mudar a direção -100% e vou remover a escala um Desta vez, não vou aplicar o efeito de escala e vou definir esse arquivo. Depois de definir esse arquivo, volta para o navegador e recarrega o Depois de relacionar o navegador, como você pode ver uma a uma, ele vai realizar todas as animações Curva a animação, animação rotativa, animação em escala, animação de efeito lento E retroceda a animação na direção oposta. E agora vou ativar minha animação profunda principal. Vamos voltar ao código do estúdio de vídeo e descomentar esta seção E defina esse arquivo novamente. Agora vamos voltar ao navegador e redirecionar meu navegador. Agora você pode ver primeiro, você pode ver uma linha horizontal vindo dessa direção e , uma por uma, ela executa toda a animação. Por fim, criamos essa animação de efeito de linha do tempo usando o GSAM Isso é tudo para o tutorial, quanto para assistir a este vídeo, reserve para o próximo tutorial 25. Link animado em CSS Button: Bem vindos de volta, pessoal. Esse é nosso primeiro exercício. Vamos começar nosso exercício de animação com um simples. Neste tutorial, aprenderemos como podemos criar um botão de link animado em CSS. Vamos ver o resultado dessa animação. Deixe-me mostrar o resultado do nosso projeto. Como você pode ver, há um botão. Quando eu coloco meu cursor sobre ele, você pode ver um efeito deslizante. Além disso, você pode ver que ainda é a cor do texto. É um projeto muito simples, mas eficaz para iniciantes. Deixe-me mostrar como podemos criá-lo. Como você pode ver, lado a lado, abro meu iso sudo Correor e meu navegador usando a extensão Live Server Em primeiro lugar, vou criar uma tag âncora neste documento Então, vou digitar A e vou digitar algum texto. Clique em mim. Eu configurei este arquivo, você pode ver o texto em nosso navegador, clique em mim. Além disso, vou atribuir uma classe a essa tag âncora. Classe, e nosso nome de classe é BTM significa botão. Então, dentro da tag principal, vou criar uma tag de estilo. Então, dentro da tag de estilo, vou criar um seletor usando a classe BTN dot BTN Depois, dentro do Calass. No início, para nossa classe de botões, vou dizer uma cor de fundo. Então, para digitar o plano de fundo aqui. Antecedentes. Vou usar a cor laranja para o nosso plano de fundo. Se eu definir esse arquivo, você poderá ver o resultado e agora quero alterar a cor do texto. Algum tipo, cor, cor, branco. Se eu definir esse arquivo, você poderá ver o resultado. Se você notar, você pode ver um sublinhado neste texto, e agora precisamos remover o sublinhado Para isso, precisamos usar a propriedade de decoração de texto. Vou digitar decoração de texto. Nenhuma. Se eu definir esse arquivo, como você pode ver, ele removerá o sublinhado do texto Agora vamos adicionar um pouco de preenchimento a esse botão. Alguns tipos de preenchimento, preenchimento a partir do botão superior, vou atribuir pixels e, da esquerda e da direita, vou atribuir dez Se eu definir esse arquivo, você poderá ver o resultado. Se você quiser adicionar algum parágrafo acima e abaixo do botão. Nesse caso, você precisa usar o bloco de exibição em linha. Então, digite a propriedade de exibição. Exibir bloco embutido. Se não usarmos a propriedade display inline, nosso preenchimento poderá se sobrepor Por esse motivo, precisamos usar o bloco embutido do valor de exibição Agora, quero aumentar o tamanho da fonte e também alterar a família da fonte. Então digite fonte família hair, fonte família aerial. Além disso, vou aumentar o tamanho da fonte. Então, para digitar o tamanho da fonte aqui, tamanho da fonte. 22 pixels. Se eu estiver satisfeito, agora você vê claramente nosso botão. Me chute. Agora você pode ver a cor no fundo. Quando eu passo o cursor, quero animar essa cor de fundo Não quero mostrar essa cor sem animação. Eu só quero mostrar essa borda colorida desse botão. Para isso, vou comentar esse histórico de propriedades. Em seguida, vou digitar borda. Borda de um pixel, sólida, e vou usar a cor vermelha alaranjada como borda. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, vou mudar a cor da fonte. Vou usar a mesma cor para o formulário. Taxa de laranja. Se eu definir esse arquivo, agora você poderá ver apenas a borda e o texto, e agora quero dar um efeito deslizante usando animação Para isso, vou criar um pseudo ponto seletor BTN Em seguida, defina os aliases. Primeiro, vou definir uma cor inversa , digitar o plano de fundo e usar a mesma cor para o plano de fundo, taxa de laranja, e então precisamos posicioná-la. Vou digitar position property. Posição absoluta. Se usarmos um valor, precisaremos remover nosso conteúdo. Para isso, vou digitar códigos duplos de conteúdo. Precisamos deixar em branco. Se usarmos o pseudo seletor Ater e antes. Como você pode ver para Ater, usamos a posição absoluta. Vou usar a posição relativa em nosso contêiner principal, posição relativa. Após a posição, precisamos passar o tipo v para cima e para a esquerda, para cima, zero, para a esquerda, zero e, em seguida, definirei a largura e a altura do nosso seletor Ater Primeiro tipo com cem por cento. E também vou dizer altura, altura, 100%. Se eu definir esse arquivo, como você pode ver, nosso elemento ta cobrirá todo o nosso botão. Por enquanto, vou dizer 0% com, e agora precisamos criar o efeito de foco da classe BGN Para isso, vou digitar dot btn e vou criar um seletor de foco Então, dentro do cvss, primeiro, vou mudar a cor do texto do botão Quando eu passo meu cursor sobre esse botão, eu quero mudar a cor do texto do botão Vou digitar a cor branca. Em seguida, vou duplicar esse seletor de foco com vidro BTN e agora vou criar um seletor de foco com apter Her colon apter esse seletor de foco com vidro BTN e agora vou criar um seletor de foco com apter Her colon apter. Neste seletor, quero estender a erva daninha. Eu quero digitar maconha cem por cento. Se eu definir esse arquivo e passar o cursor sobre esse botão, você poderá ver o efeito, mas não poderá ver o efeito deslizante Além disso, você não pode ver o texto porque precisamos mover o contêiner ter para trás do texto. Para isso, precisamos usar o índice Z. Alguns digitam um índice menos um. Se eu definir esse arquivo e passar o cursor sobre esse botão, você poderá ver o efeito Aqui você pode ver que quando eu coloco meu cursor sobre ele, ele fica com a cor do texto. Com isso, aumentou até 100% da largura do seletor , de 0% para 100% E agora precisamos usar a transição para nossa animação. Precisamos usar essa transição em nossa classe principal. Dentro da classe BTN, vou digitar a transição Faça a transição de tudo. aplicar a transição em todas as transformações. É por isso que eu uso todos os valores e, em seguida, precisamos passar o tempo de duração da transição. Eu quero passar 0,5 segundo, e então você precisa passar pelo modo de transição, que é E. Vou usar o valor e. Além disso, quero passar pela transição de ve. Para isso, vou usar zero segundo. Se eu definir esse arquivo, ele afetará somente texto. Se eu cortar demais, você pode ver o efeito. Você pode ver o efeito de transição em nosso texto, não a cor do plano de fundo. Para obter esse efeito deslizante, precisamos usar essa transição em nosso seletor superior Eu copio essa transição e colo aqui. Se eu definir esse arquivo e passar o mouse sobre ele, você poderá ver o resultado Criamos com sucesso nosso botão de link animado. Não usamos nenhum quadro-chave CSS para isso. Ei, este exercício não é muito difícil porque eu quero começar esses projetos de animação com efeitos de transição muito simples, não com os quadros-chave CSS. A partir do nosso próximo projeto, vamos pular para o difícil. Obrigado por assistir a este vídeo, fique ligado no nosso próximo exercício 26. Flip CSS 3D em Hover Efeitos de Hover Pure CSS3 3D Button: É bom ver vocês de volta, pessoal, estou de volta com um novo e empolgante projeto de animação. Neste projeto, vamos criar um botão de suspensão de três dias Sem perder seu tempo, vamos ver a demonstração. Como você pode ver, há um botão. Se eu passar o cursor sobre ele, 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 no cabelo. É um botão de animação flutuante, mas é bem avançado Sem perder tempo, vamos começar a prática e ver como funciona Como você pode ver, lado a lado, abro meu corretor do Visual Studio e meu navegador usando a extensão Lb Server Além disso, você pode ver que eu já criei documento estil chamado index dot at Com isso, eu crio um arquivo Sess, estilo dot Sess. Como você pode ver, eu vinculo esse arquivo de estilo a este documento de estimativa Então, primeiro, vou criar uma tag âncora dentro da tag body Então, digite A. Por padrão, eu não quero redirecioná-lo, então eu quero usar a tag has Agora, dentro dessa tag âncora, vou criar três novas tags de extensão Frente de vidro Span. Em seguida, vou dedigitar essa tag de extensão duas vezes. Nosso primeiro nome de classe de span é front e nosso segundo nome de classe de span é center. Então, digite, centralize e nosso último nome de classe span está de volta. Então, digite de volta. Então, na parte da frente, vou digitar pi, e na parte de trás, vou digitar cabelo. 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 está o sprint, clique no ar, canto superior esquerdo deste navegador Eu fiz com sucesso uma peça estável. Vamos passar para o arquivo da tese e estilizar esta página. No começo, vou estilizar nossa etiqueta corporal. Então, para digitar o corpo. Dentro do Calise, vou definir Marzin zero, Marzin zero Além disso, quero definir o preenchimento zero, o preenchimento, zero e, em seguida, vou usar a propriedade da família de fontes Então digite família de fontes, Sans. Além disso, vou definir uma cor de fundo escura para o nosso corpo. fundo, e eu vou usar hexa ve, tem, dois, seis, dois, seis, 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 etiqueta de raiva Dentro da etiqueta de raiva, temos uma etiqueta total de dor. Vamos estourar a etiqueta da raiva. Então, res A dentro dos cálices, primeiro vou usar a propriedade de posição, posição Posição, com certeza. Agora eu quero alinhar essa tag âncora, no meio desta página. Para isso, vou usar a melhor propriedade, Top 50%. Então eu vou usar a propriedade Lip. Deixe 50%. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, alinhe 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, acordo com x x e yx Para x xs, eu vou passar -50%, e para o eixo y, eu também vou passar -50% Então eu vou dizer que aumente a largura de sua etiqueta angular. No começo, vou digitar nós. Temos 200 pixels, e então eu vou dizer propriedade de altura, altura, altura 60 pixels. Se eu definir esse arquivo, você poderá ver o resultado e, em seguida, direi texto, centro de alinhamento de texto Como você sabe, vamos criar um botão de três d over. Para isso, precisamos usar outra propriedade, que é o estilo de transformação. Então, para digitar, transforme o estilo. Transforme o estilo. Aqui, vou usar preserve three d v. Essa propriedade especifica 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. Aprenderemos sobre isso em nossa série de tutoriais e, em seguida, usarei outra propriedade, que é prospectiva, prospectiva de 1.000 pixels Além disso, vou dizer transformar posição de origem, transformar origem, centro central. 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 a perspectiva e três transformações porque não estilizamos nosso objeto de extensão. Agora precisamos estilizar nosso objeto span. Como você pode ver, temos um objeto pro three span. Vamos estilizar todo o objeto de uma só vez. Para isso, vou selecionar a tag span. Espaçamento. Dentro das cavas, a princípio, vou digitar position property Posição absoluta. Em seguida, precisamos alinhar essa tag de extensão. Zero, p zero. Além disso, vou dizer y e peso, altura 100% peso 100%. E então vou usar esse blog, bloco de exibição, e também vou alinhar o texto dentro dessa tag pan Vou amarrar o texto, alinhar o texto, alinhar o centro e, em seguida, vou dizer 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 dizer tamanho da fonte, tamanho da fonte, 24 pixels, e também vou definir uma cor de fundo para a tag span. Antecedentes. Vou usar o valor RGV RGB, como você diz, primeiro, precisamos passar o valor vermelho, depois precisamos passar o valor verde, por fim, vitela azul Com isso, precisamos passar o valor Alpha. Podemos controlar a transparência usando o valor Alpha. É por isso que precisamos usar esse arquivo vil. Aqui, eu vou passar 255 para vermelho, 255, e depois vou passar mais uma vez, dois em cinco para verde e também 255 Para o nosso Alpha u, vou passar de 0,10. Agora precisamos mudar o estilo de transformação. Vou amarrar transform style transform style, ps três. Agora eu não quero mostrar a parte de trás da nossa etiqueta de extensão. Quando você gira, não queremos mostrar a parte de trás. Para isso, precisamos usar uma propriedade, e você sabe disso, que é a visibilidade do espaço traseiro. visibilidade traseira dos spas, e vou definir um valor oculto porque não quero mostrar a parte traseira e, em seguida, vou definir o raio da borda da etiqueta de extensão, raio da borda, 30 pixels Nossa próxima propriedade é transformação de texto. Em seguida, quero transformar o texto em maiúsculas. Para isso, vou usar a propriedade de transformação de texto. Transformação de texto em maiúsculas. Em seguida, vou definir uma cor para o nosso texto. Lite colorido. Se eu definir esse arquivo, você poderá ver o resultado. Com isso, quero dizer propriedade de transição, transição. 1 segundo. Como você sabe, temos um total três objetos de extensão dentro da tag âncora Vou transformar todo o tema da tag span em um tema diferente. Primeiro, vou transformar o da frente e depois vou transformar o traseiro. Por fim, vou transformar o central e vamos executar a transformação usando o seletor Vamos voltar ao arquivo CSS e começar com nossa primeira tag span. Então digite, estenda o ponto na frente. Então, dentro das classes, vou usar a propriedade transform, transform, transform rotate x, e quero girá-la em zero d. Com isso, quero movê-la na direção z Vou digitar, traduzir z, 20 pixels. 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 passar o mouse sobre ele. Para isso, precisamos criar um seletor de foco. Então, para obter essa linha , vou amarrar a etiqueta âncora com o ponteiro do mouse Quando passo meu cursor, quero girar nossa etiqueta frontal menos 180 Se eu definir esse arquivo e mouse sobre ele, você poderá ver o resultado Você pode ver nossa primeira etiqueta de panela girar menos 180 graus. A mesma coisa que precisamos fazer com nossa etiqueta traseira. Vou selecionar esse código e obteremos essa linha. Aqui vou amarrar palmo, ponto, costas. Por padrão, quero girá-lo em 180 graus e vou usar o mesmo vídeo para transferi-lo em 20 pixels Em nosso seletor de hober, quero girá-lo para zero d, para trás, e quero girá-lo para Se eu definir este arquivo e os microfones hober estiverem nele, agora você poderá ver o efeito giratório de três D. Agora, quero definir uma cor de fundo para a etiqueta do painel central. Essa. Para isso, vou amarrar span dot center. Dentro das calibragens, vou usar a propriedade de fundo, plano de fundo, e vou usar cor de gradiente e vou usar gradiente linear E eu vou usar a direção labial. Eu quero passar para a iluminação. Vírgula. Agora vou usar o valor da cor hexa Tem etiqueta C 30 1a5b. É uma cor rosa, e nossa próxima cor é a etiqueta 71 29bd. É uma cor roxa. Se eu definir esse arquivo, você poderá ver o resultado. Agora, para nosso objeto de extensão central, quero ativar a visibilidade do Backspace Vou digitar Backspace visibility e vou usar o valor visible Em seguida, vou criar um seletor de foco para nossa tag de extensão central E vou remover a palavra-chave front e vou digitar center. Para Rotate, vou usar menos 18d. Mas para traduzir Oito, vou usar zero pixel. Se eu definir esse arquivo e os microfones Hober estiverem nesse botão, você poderá ver o efeito de três D. Criamos com sucesso três botões D flip Her. Espero que você goste desse projeto. Obrigado por assistir a este DVD, sintonizamos nosso próximo exercício 27. Texto animado editável: É bom ver vocês, mais uma vez, estou de volta com um novo e empolgante projeto de animação. Neste projeto, vamos criar um texto animado irritável com o efeito brilhante Cases Vamos até a tela do computador e vamos ver a demonstração. Aqui você pode ver como nosso texto está brilhando 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 SSS. Você pode usar essa animação em seu site. Isso pode dar ao seu site um azul muito criativo. Sem mais delongas, vamos começar o projeto e ver como podemos criá-lo. Como você pode ver, lado a lado, abro by so to codaor e meu navegador usando a extensão Light Server, e já crio um documento ESTiml chamado index dot ESTiml chamado index Com isso, eu vinculo um arquivo CSS, estilo dot CSS. Primeiro, dentro da tag body, vou criar uma tag com cabeçalho, H two header, e 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. Se você quiser tornar o conteúdo irritável, nesse caso, precisamos usar um atributo, e o nome do nosso atributo é conteúdo irritável. Deixe-me te mostrar. Aqui, vou digitar o conteúdo na tabela e quero torná-lo verdadeiro. 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. Fizemos nossa parte da mesa com sucesso. Vamos entrar na nossa parte de design. Vou pular o arquivo CSS, estilo CSS. No começo, vou usar o seletor universal para digitar estrela Dentro do Calass, eu quero definir a margem. Margem, zero. Com isso, também quero definir o preenchimento, o preenchimento zero. Além disso, quero usar a propriedade de oxidação, dimensionamento da caixa, encaixotamento, caixa de borda Então eu vou usar família de fontes, família de fontes. Família de fontes, e eu quero usar a fonte aérea. Aéreo e sensível. Se eu disser esse arquivo, você pode ver o resultado. Em seguida, quero estilizar o corpo da etiqueta corporal. Em vez dos aliases, quero começar com a propriedade de exibição Display, display flex. Ei, se você não está familiarizado com flex and read, pode conferir meu curso Em seguida, justifique o centro de conteúdo. Além disso, quero alinhar esse centro de itens. Quero usar a propriedade align item, Align item center. Nossa próxima propriedade tem altura mínima. Precisamos definir a altura mínima, altura M. Altura mínima, eu quero usar 100 VH. Com isso, quero definir uma cor de fundo escura. Bground, e eu vou usar gv ve. Por exemplo, vou usar cinco. Para verde, vou usar 30. 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 nosso conteúdo e depois vem a parte mais importante, H, o design da tag de cabeçalho H dois dentro do caliss, nossa primeira propriedade é posição, posição relativa e nossa segunda propriedade é tamanho da fonte Tamanho da fonte seis M. Se eu definir esse arquivo, você poderá ver o resultado. Com isso, quero definir o espaçamento entre letras, espaçamento entre letras. Espaçamento entre letras, 15 pixels. Nossa próxima propriedade é que cor significa cor do lago. Cor, e eu vou usar ou dar valor. 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 As tabulações de texto estão em maiúsculas. Se eu definir esse arquivo, você poderá ver o resultado e, em seguida, definirei wa a 100%. Alinhe o texto ao centro e, em seguida, vem a parte muito importante deste vídeo Agora, precisamos refletir esse texto. Eu quero criar um reflexo de medalha. Para isso, precisamos usar uma nova propriedade n box reflect. Deixe-me te mostrar. Ei, como você pode ver, eu trabalho com o navegador Chrome. É por isso que precisamos usar um prefixo. Web key, nome da sua propriedade, caixa reflita. D reflita. Primeiro, precisamos declarar a direção da nossa reflexão, que é u, 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 definido. Em terceiro lugar, precisamos fornecer o valor da caneca. Para o valor Mux, vou usar o gradiente linear. Aqui vou digitar gradiente linear. Dentro dos parênteses, o primeiro valor é transparente. Nosso segundo valor é v. Dentro dos parênteses, precisamos fornecer o Mas, primeiro, vou ligar o envoltório branco. Agora vou passar o Vu, O primeiro valor é o valor vermelho Para vermelho, vou usar 11. Para verde, vou usar 70. Para azul, vou usar 18. Por fim, precisamos passar o valor Alpha, como você sabe, uso do valor Alpha para transparência. 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 E. Em seguida, quero ativar o contorno deste texto Eu quero usar a propriedade outline. Nenhuma. 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 e, em seguida, vem nossa parte final, que é a animação. Em primeiro lugar, quero criar um quadro-chave com os quadros-chave de taxa. Nosso nome de animação é animate. Em seguida, dentro da classe. Como você sabe, temos um total de dois tipos de seletor de quadros-chave. Você pode usar de ou duas palavras-chave. 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á preparo o valor percentual para este exemplo. Vou copiá-lo e quero colá-lo aqui. Colar. Então, dentro dos estojos, precisamos usar nossa propriedade. No começo, quero mudar a cor do texto. Então, vou usar o valor da cor. Cor, e eu vou usar o valor AGV. E eu uso a mesma cor, que eu uso em nossa tag de cabeçalho. Nossa próxima propriedade é sombra de texto. Então digite, sombra de texto. 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? Eu quero usar a propriedade de inovação. Animação, e nosso eu de animação é animado, e nosso tempo de duração de uma nação é de 1 segundo, e nossa direção de animação Para o tempo de duração da nossa animação, vou usar uma roda infinita Infinito. Se eu salvar esse arquivo, vamos ver o que aconteceu. Como você pode ver, nada está acontecendo. Porque para criar o efeito crescente, precisamos brincar com o valor da sombra do texto. Para isso, precisamos usar um pouco mais de seletor de porcentagem. Eu já copiei o seletor de porcentagem e vou colá-lo aqui Então, dentro da classe, vou usar a propriedade de cor. Cor, cor, branco, tem tag, F f f. Agora precisamos jogar com a propriedade tex shadow. Algum tipo de sombra fiscal. Pegue a sombra. Primeiro, você precisa passar o valor x xs, que é zero, e então você precisa passar o y xs Vu Eu vou usar zero. Em terceiro lugar, você precisa passar o valor de Blarns Aqui, vou usar dez pixels. Por fim, você precisa passar a cor da sombra. Para a cor das sombras, vou usar o RGV vu. RGB dentro dos parênteses, vou digitar o valor vermelho C 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á sangrando. Além disso, você pode ver o reflexo. E agora eu quero criar esse efeito mais atraente. Eu quero duplicar esta linha, C P C Na próxima linha, eu quero duplicar esta 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 crescente de efeito de luz neste texto. Depois do coma, quero duplicar essa linha. Mais uma vez, quero aumentar o valor de 40 pixels de Blarns Então, mais uma vez, quero duplicar essa linha e agora vou usar 80 pixels Por fim, vou usar 160 pixels. Se eu remover o último coma 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 é editável. Suponha que você queira digitar seu nome. Vou remover esse e vou digitar Smith. Você pode digitar qualquer texto aqui porque usamos conteúdo adequado, como você pode ver, conteúdo editável 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 28. Olhos animados seguem o urso: É bom ver vocês mais uma vez. Estou de volta com um novo e empolgante projeto de animação Chases, e o nome do nosso projeto é olhos animados seguem o cursor do mouse Vamos ver a demonstração. Aqui você pode ver um rosto. Se você notar, poderá ver seus olhos seguirem o ponto do cursor. Se eu movê-lo para o lado direito desta página, você poderá ver o seguinte. Se eu movê-lo para cima dessa face, também será seguido. Se eu colocar meu cursor nesta face, você pode ver que isso mudou a reação bucal. Vamos ver como podemos criar esse projeto. Como você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão PSever, e já crio um documento ESTiml chamado Index dot estel Eu já vinculo esse documento ESTeTIL ao arquivo Sess, Style dot Sess Primeiro, dentro da tag body, vou criar uma classe D, D e o nome da nossa classe é phase. No começo, quero criar o rosto. Então, dentro dessa tag profunda, vou criar outra classe D profunda. Nesta seção, vamos criar é do nosso rosto. Então, dentro desta seção, vamos criar dois é. D, mais eu, e eu vou alugar este slide. Concluímos com sucesso uma peça estável. Primeiro, criamos uma tag para a fase. Então, dentro dessa tag rápida, criamos um bloco para s e, em seguida, passamos para outra tag profunda por dois s. Agora, vamos pular para a seção de estilo. No começo, vou usar um seletor universal, estrela. Dentro dos casos, a princípio, vou usar a propriedade de margem. Margem, zero e, em seguida, vou usar a propriedade de preenchimento, preenchimento zero e caixa de borda de tamanho da caixa Em seguida, vou estourar a etiqueta corporal. Corpo interno dos estojos, tela flexível Justifique o centro de conteúdo. Eu uso o contêiner flexível para alinhar nosso centro de fase desta página Em seguida, vou usar a propriedade Align item. Alinhe o centro de itens. Altura mínima, altura média, 100 VH. Eu quero usar toda a página da web. É por isso que eu uso 100 VH, e nossa última propriedade é o plano de fundo Chão. Para a cor de fundo, quero usar o valor RGV RGV para vermelho, vou usar oito, e para verde, vou usar o valor 84 Para azul, vou usar 19. 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 quero estilizar a parte do rosto. Eu quero estilizar o Dot Face, Inside the Calibraces. Primeiro, vou usar a propriedade position, position relative, position relative, e nossa próxima propriedade é wed wit, 300 pixels. Além disso, eu quero dizer altura, altura, 300 pixels também. Nossa próxima propriedade é o plano de fundo. Bground, mais uma vez, vou usar o valor RGV. RGV, para o 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 a 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. Exibir linho. Justifique o centro de conteúdo. Além disso, 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 minhas lojas responsivas Moldamos nossa fase com sucesso. Agora precisamos colocar a boca nessa fase. Para isso, vou criar a fase Colon cool before seletor, before Então, dentro do carro, resina. Como você já sabe, primeiro pegamos uma propriedade em branco, e o nome da nossa propriedade é conteúdo, contém em branco Então, nossa próxima propriedade é posição, posição absoluta. Então eu vou dizer altura e peso, peso 150 pixels, altura 70 pixels, e agora vou usar a cor do fundo. Moído, chocolate. Se eu definir esse arquivo, você pode ver uma retangular no meio dessa face Agora precisamos mover esse rosto 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 nossa boca parecer 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 inferior esquerdo da borda. raio esquerdo da borda inferior, e eu vou usar 70 pixels Se eu definir esse arquivo, você poderá ver o resultado e, em seguida, apostarei nessa linha e substituirei a volta pela direita. Se eu definir esse arquivo, aqui você pode vê-lo criar uma forma de sorriso. Agora eu quero mudar o movimento da boca quando abro meu cursor sobre ela. Para isso, precisamos criar outro seletor. Deixe-me te mostrar. Ponto: face, cólon, passe o ponteiro, cólon antes. Dentro do caliss, 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, 210 pixels. Se eu definir esse arquivo e passar o cursor sobre ele, você verá a diferença É mudar a posição do suporte. Em seguida, vou mudar esse raio de água. Raio zero do lábio inferior da garrafa. Além disso, o raio inferior direito da garrafa é zero. Se eu definir esse arquivo e passar o cursor sobre ele, você verá a diferença Mas não há transição nessa transformação. Para isso, precisamos usar a propriedade de transição. Aqui, vou digitar a transição. Transição de 0,5 segundo. Se eu definir esse arquivo e passar o mouse sobre meus carros, você poderá ver o efeito de transição São necessários 0,5 segundos para concluir a transformação. Concluímos com sucesso nossa seção bucal. Vamos pular para a seção de gelo. Como você pode ver dentro do recipiente de gelo, temos dois. Vamos criar a pele desse rosto. No início, vou estilizar o ponto da seção. Em seguida, dentro da posição relativa de Calass, e eu quero posicioná-la acima de -40 pixels, e vou usar a propriedade de exibição display flex Usando essa propriedade e valores, movemos com sucesso nossa seção de gelo naquele local, não no meio dessa face. Em seguida, precisamos criar a classe i. Eu vou selecionar a classe ice, também vou selecionar a classe i. Então, em set, as calibragens ou a primeira propriedade é posição, posição relativa, e também vou dizer altura e largura. Para isso ou seja, uma célula típica, altura é um Depois de w e altura, vou começar a cor de fundo. Antecedentes. Isso. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, lado a lado, ele cria duas caixas quadradas com uma altura típica. Em seguida, vou usar a propriedade de exibição. Bloco de exibição. Em seguida, vou usar a propriedade border radius. Raio de borda de 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 Para isso, vou usar a propriedade de margem. Margem, zero e 15 pixels. Se eu definir esse arquivo, você pode ver a diferença. No geral, esse valor de margem fornece um espaço de 30 pixels entre esses dois olhos, e agora precisamos criar os globos oculares desse olho No começo, vou copiar essa linha. E eu vou colar aqui. Agora, vou usar o seletor anterior. Colon Colon antes. Então, dentro do caliss, como você sabe, primeiro, precisamos criar um conteúdo em branco, conteúdo em branco Nossa próxima propriedade é posição, posição absoluta. Além disso, precisamos colocá-lo, então vou usar o valor máximo, Top 50%. Restam 25 pixels e, para nossos olhos, vou sentar em 840 Também tem altura de 40 pixels. Em seguida, vou usar a cor do fundo para nosso globo ocular, plano de fundo e vou usar RGV GV, para verde, eu devo passar 42. Então, para o vermelho, vou passar de 42 mais uma vez. Também para azul, vou passar 42. Eu configurei esse arquivo, você pode ver o resultado. Como você pode ver, ele cria duas caixas quadradas cinza escuro. Mas precisamos torná-lo redondo. Vou usar o raio da borda. Raio da borda, 50%. Se eu definir esse arquivo, você poderá ver o resultado. Ei, você pode ver nosso gelo olhando para baixo nesse ângulo. Mas eu quero mudar o ângulo de visão do gelo, algo nessa posição. Para isso, vou usar a propriedade transform. Transforme a tradução em -50% para x xs, também -50% para y Se eu definir esse arquivo, você poderá ver o resultado. Agora vamos olhar nesse ângulo. Se eu for meu cursor nesta fase de modi, você pode ver a reação, mas a bola de gelo não segue a posição do cursor. Para isso, precisamos usar JavaScript. Concluímos com sucesso nossa parte de estilo. Na próxima parte deste vídeo, trabalharemos com JavaScript. Obrigado por assistir a este vídeo, fique ligado na próxima parte 29. Efeitos de animação de CSS 3D ondulados Circle Loader: Vamos ver os caras. Novamente, estou volta com um novo projeto de animação CSS. Neste projeto, vamos criar uma animação do web circle loader Vamos até a tela do meu computador e ver a demonstração. Aqui você pode vê-lo criar uma onda efetiva muito bonita usando três círculos D. Vamos ver como podemos criar essa animação. Como você pode ver, lado a lado, abro meu VSO Studio Creor e meu navegador usando a extensão Light Server e já crio um documento STL chamado Index Dot STL Além disso, vinculo este documento ao arquivo Tyler SSS. Então, primeiro, dentro da minha tag corporal, vou pegar uma tag profunda, D, e então vou definir uma classe para esse carregador de classes profundo Então, dentro da etiqueta de mergulho, vou fazer vários intervalos. Basicamente, vou usar uma tag de extensão vazia para criar alguns círculos. Para este projeto, vou usar a tag Peptin span, então vou duplicar essa linha por tempo. Temos um total de 15 etiquetas de extensão para 15 círculos. Fizemos nossa parte de estimativa com sucesso. Agora, vamos entrar no arquivo CSS, estilo dot Css. Aqui, primeiro, vou selecionar o seletor universal, que é estrela Então, dentro das calibrações, vou usar a propriedade de margem Margem zero. Em seguida, vou usar a propriedade de preenchimento. Preenchimento zero. Então eu configuro esse arquivo. Em seguida, vou selecionar a tag body. Corpo tipo herbáceo. Então, dentro do calvass, primeiro, vou usar a propriedade display Exibir linho. Justifique o centro de conteúdo. Nossa próxima propriedade é o item alinhado. Também está no centro, e então vou dizer a altura mínima da nossa página da web. Para isso, vou usar a propriedade de altura média, I N altura. 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, como plano de fundo, vou usar o valor RGV RGB Para vermelho, vou digitar 70. Da mesma forma que para verde, vou digitar também 70, e para 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. E defina as calibragens primeiro, vou usar a propriedade de posição Relacionado à posição. Também vou definir a altura e o peso desse carregador, peso, 300 pixels Altura, 300 pixels também. Agora vou usar a propriedade mais importante, que é o estilo de transformação. Transforme o estilo. Em nossa propriedade de estilo de transformação, vou usar o valor Pi três D, porque quero dar ao nosso círculo três D. Nossa próxima propriedade é transformar. Transforme nosso primeiro valor é prospectivo. Prospectivo, 500 pixels, O próximo valor é girar v girar x, aqui vou passar o ângulo de Em seguida, vou estilizar toda a tag span dentro da classe loader Eu quero amarrar o espaço dos pontos. Vou selecionar todo o intervalo. Então, dentro das calibrações, nossa primeira propriedade é posição, posição absoluta Nossa próxima propriedade é di display block. E agora vou definir a borda da nossa tag span. Borda, cinco pixels. Vou definir uma borda com cinco pixels e quero uma borda sólida, e a cor da nossa borda é branca. Então, para digitar AF A. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver, apenas para criar várias caixas no mesmo lugar. Por enquanto, não está claro para nós. Nossa próxima propriedade é box shadow, box shadow. Vou posicionar essa sombra, zero célula Pi, cinco pixels e zero pixel. Além disso, vou usar uma cor para essa sombra de caixa. Etiqueta H CCC. A fornece cores mais claras à nossa sombra. Agora, com esse valor, quero usar outro valor, que é inserido Além disso, quero colocar uma sombra dentro de parte dos anéis. É por isso que eu uso o valor inst. Em seguida, copiarei o valor e colarei aqui. Vou configurar esse arquivo. Nossa próxima propriedade é o tamanho de caixas. Dimensionamento da caixa, e aqui vou usar o valor da caixa de borda. Além disso, vou usar outra propriedade, que é raio de borda, raio de borda, raio de borda 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 toda a tag span uma por uma. Vamos selecionar todas as tags de extensão, uma por uma. Algum tipo, ponto, carregador ou tag de extensão, extensão Dois pontos, e agora vou usar o seletor h filho, o filho H. Primeiro, vou selecionar nossa primeira caneta, então eu digito uma aqui. Então, dentro da calivassa, precisamos posicionar nossa primeira caneta No começo, vou usar a propriedade superior, a primeira zero. Nossa próxima propriedade é Lp, Lip também zero, e então vem nossa outra propriedade, que é bottom bottom também zero. Nossa última propriedade de posicionamento é correta, correta, também zero. Com isso, vou usar outra propriedade, que é o atraso da animação. Animação, D. 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 boop, e para criar nosso segundo círculo, vou duplicar toda essa seção No começo, vou mudar o seletor, hein ch two. Com isso, vou alterar valor máximo esquerdo de Valu Gottma Deixe-me te mostrar. Top 10, volta, dez, posição inferior, dez, posição direita, dez. Se eu definir esse arquivo, aqui você pode ver que nada está acontecendo aqui. Não cria um círculo porque não fornecemos nenhuma unidade. Aqui precisamos fornecer a unidade. Eu quero fornecer pixels aqui, 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. 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 pig self bottom e 20 pig 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. 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. 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 13º seletor, usamos o valor máximo de 120 pixels Mas em nosso próximo seletor, em nosso 14º seletor, usamos 130 Dessa forma, em nosso 15º seletor, adicionamos dez pixels e passamos 140 ondas Criamos nosso círculo com sucesso. Agora precisamos animá-lo. Só precisamos brincar com o valor do índice Z para criar a onda. Então, vamos criar um quadro-chave para essa animação. Estou na seção superior e, aqui, vou criar o quadro-chave no quadro-chave de taxa Em seguida, precisamos vincular o nome do quadro-chave e o nome do quadro chave é animado Então, dentro do ss, 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 do Crass, nessa posição, eu quero transformar os círculos Aqui, vou usar uma transformação de propriedade. Transforme, e eu vou usar o valor de translação Z. Traduza Z. E eu quero traduzi-lo em -100 pixels na direção z x. Em seguida, vou selecionar 50% da posição, 50%. Em seguida, ele ajustou as calibragens. Mais uma vez, vou usar a propriedade transform. Transforme traduza cem pixels. Agora precisamos chamar essa animação em nossa tag span. Aqui, vou digitar animação. O nome da animação é animate. E eu quero rodar essa animação por 3 segundos. Com isso, também quero começar a facilitar o movimento de animação. Por fim, vou passar a contagem de iterações da animação, que é infinita Se eu definir esse arquivo, como você pode ver, todos os círculos se movem juntos para cima e para baixo, porque usamos o índice Z. Aqui você pode ver que ele move 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. Aqui, primeiro, vou usar um atraso de 1,4 segundo. Se eu definir esse arquivo, como você pode ver, após 1,4 segundo, ele iniciará a animação do nosso primeiro filho. Da mesma forma, para nosso segundo filho, vou passar 1,3. Segundo. Para nosso terceiro filho, vou passar 1,2 segundo. No nosso quarto, vou passar 1,1 segundo. Para nosso quinto filho, vou passar 1 segundo. Para nosso sexto filho, vou passar 0,9 segundo. Para nosso sétimo filho, vou passar 0,8 segundo. Para nosso oitavo filho, vou passar 0,7 segundo. Para nosso nono filho, vou passar 0,6 segundo. Por dez, vou passar 0,5 segundo. Para nossos 11 filhos, vou passar 0,4 segundo. Para nossa décima criança, vou passar 0,3 segundo. Para nosso 13º filho, vou passar 0,2 segundo, e para o 14º seletor de intervalo, vou passar 0,1 segundo Para o nosso último, vou ultrapassar um atraso de zero segundo. Eu defini com sucesso uma propriedade de atraso de evaçã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. Ele criou uma parte superior infectada muito bonita. Espero que agora esteja claro para você como podemos criar essa animação de círculo na web. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 30. Efeitos de imagem em camadas CSS 3d: Olá. Novamente, estou de volta com um novo projeto de animação CSS. Neste projeto, vamos criar a imagem H de três camadas D de CSS, e é um bom projeto para designer de UI UX. Vamos ver a demonstração. Vamos voltar ao stream do computador. Como você pode ver, há um modelo de interface de usuário móvel. Se eu passar o cursor sobre ele, você poderá ver um efeito D de camada três. Você pode ver esse tipo de animação na maior parte do site. Isso torna nosso site mais atraente. Então, vamos ver como podemos criar esse projeto. Finalmente, estou no meu retor de código do Visual Studio, como você pode ver, eu já crio um documento STL com nome de documento STL, índice, ponto Eu já vinculo um arquivo CSS ao nosso melhor documento, style dot CSS. Como você pode ver no meu diretório de trabalho atual, há uma imagem, ponto de captura de tela PG Deixe-me mostrar a imagem. Neste exemplo, eu já fiz uma captura de tela do arquivo CS Epler Você pode escolher seu próprio layout. Depende de você. Vamos começar pela prática, como podemos criar esse projeto. No início, vou criar um contêiner dentro da minha tag corporal. Aqui, vou vincular a classe e DP ao contêiner de classe contêiner de classe Em seguida, insira essa classe de contêiner, vou usar a tag em para inserir a imagem. Imagem do tipo Ham, I M G. Como você pode ver, o nome da imagem é ren shot dot JPG. Digite Ham, captura de tela, JPG, e eu vou receber essa etiqueta de imagem três vezes Fizemos com sucesso nossa parte de SML para este exemplo. Agora vou ligar meu servidor IP e ver como está. Sem estilo, fica assim. Agora precisamos entrar nesse arquivo de estilo para criar o design perfeito. Agora você pode ver lado a lado, eu abro meu arquivo de estilo e meu navegador. No começo, vou começar com body tag. Aqui vou digitar corpo. Então, dentro das calibragens, vou usar nossa primeira propriedade, que é margem Margem zero. Nossa próxima propriedade é preenchimento, preenchimento zero. Agora vou usar outra propriedade, que é casada com cem por cento de altura, 100 VH. E então eu vou usar a propriedade de exibição. Tela flexível. E eu quero alinhar nosso centro de itens. Vou usar a propriedade align item, central Align items e nossas últimas propriedades justificam Justifique o centro de conteúdo. Ei, se você não está familiarizado com Flexbox e o Read, pode conferir meu código 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. Em seguida, defina as calibragens. Primeiro, vou usar a propriedade de posição, posição relativa e, em seguida, quero dizer wa wa, 360 pixels. Nossa próxima propriedade é altura, altura, 480 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Ele reduz um pouco o tamanho do nosso contêiner e, em seguida, quero definir uma margem na minha seção superior. 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. Fundo do tipo Hamer. Para plano de fundo, vou usar RG B A. Então, dentro dos parênteses, precisamos Para o Vue vermelho, estou acima de zero. Para Vu verde, também sou mais zero. Para o nosso valor azul, mais uma vez, vou passar de zero. Mas para o nosso valor Alfa, vou passar 0,1. Quero uma cor de fundo transparente para este contêiner. Nossa próxima propriedade é transformar propriedade. Oi, Army Traform. Transforme, e eu vou usar um total de seis ve. Primeiro, vou usar a rotação. Gire -30 graus. Com isso, eu quero usar o SQ e a escala serve. SQ 25 dg. E escala 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 um contêiner com a tag de imagem dot container space image. Então, dentro dos aliases, nossa primeira propriedade é posição, posição absoluta e imagem com 100% Se eu definir esse arquivo e mostrar meu navegador. Agora você pode vê-lo perfeitamente na posição que queremos e depois vem a parte mais importante. Agora precisamos jogar com opacidade e transformação com efeito de foco. Deixe-me te mostrar como. Como você pode ver no meu estimado documento, temos um total de quatro imagens Agora precisamos selecionar todas as imagens uma por uma. Para isso, vou usar o seletor Chi. Deixe-me mostrar para você fazer o Container Colon hover. Em seguida, coloque a imagem espacial no cólon da criança. Eu defini as quatro corridas abaixo. Primeiro, seleciono o quarto filho do grupo de imagens. Em seguida, em definir as calices, vou usar a propriedade transform Transforme, traduza 160 pixels na direção exxs e menos 160 mil em sua Com isso, vou usar a propriedade de opacidade. Opacidade, Um, eu quero mostrar a opacidade total. É por isso que eu escolho um. Em seguida, vou selecionar nossa terceira imagem. Vou selecionar essa linha e duplicá-la. Eu, criança de três anos. Além disso, vou mudar o valor da transformação e o valor da oposição. Opacidade, 0,8, e traduza para x x seis, vou passar de um para 20 pixels Para yx, também vou passar menos um a 20 pixels. Agora, mais uma vez, vou selecionar 1 segundo dm. Vou pegar essa linha e Hm tipo dois, n h dois. Para x xx, vou passar oito t, e para xx, vou passar menos oito Ou seja, opacidade de 0,6. Mais uma vez, vou duplicar essa linha para selecionar nossa primeira imagem Nenhuma criança. Em nossa transformação, vou selecionar o eixo y de 40 pixels e -40 de enxofre de porco Opacidade, vou digitar 0,4. Se eu definir esse arquivo e voltar ao meu navegador Chrome e o cursor nesta imagem, você poderá ver o efeito. Mas não há transição nessa imagem. Agora precisamos definir uma transição para dar um efeito de suavidade. Mais uma vez, estou de volta ao meu codaor, e aqui vou chamar nossa propriedade de 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 passar o cursor sobre essa imagem, você poderá ver essa transição suave Espero que agora esteja claro para você como podemos criar três efeitos de foco de imagem em camadas d. Obrigado por assistir a este vídeo, sintonizado para nosso próximo projeto 31. Efeitos de animação de rotação 3D CSS3: Olá pessoal. Mais uma vez, estou de volta com um novo projeto de animação Sess Neste projeto, vamos criar três animações de rotação D. Sem perder seu tempo, vamos ver a demonstração. Neste projeto, vamos criar três animações de rotação D. Aqui você pode ver a demonstração, como ela gira e sua aparência 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 Visual Studio Correlator e meu navegador usando a extensão Live Server, e já crio um arquivo estim chamado index Também vinculo esse arquivo ao nosso estilo de arquivo de estilo dot Sss. Então, primeiro, dentro da tag body, vou criar um D, D e também vou definir uma caixa de classe de classe. Então é essa tag dip, vou criar outra tag dip, D, e não vou definir nenhum nome de classe para essa tag dip Então, dentro dessa tag dip, vou criar uma extensão total de quatro tags de extensão Vou duplicar essa tag de panela três vezes. Agora temos um total de quatro tags de extensão. Se eu definir esse arquivo, você não verá nada no meu navegador. Fizemos nossa melhor parte com sucesso. Agora vamos entrar no arquivo Sass do estilizador e começar a estilizar nossos elementos. Primeiro, vou começar com o body tag. Aqui vou digitar boding. Então você define as casas, primeiro, vou usar a propriedade de margem. Margem, zero. Em seguida, vou usar a propriedade de preenchimento. Preenchimento zero. Nossa segunda propriedade é o plano de fundo. Plano de fundo, e eu vou dizer uma cor de fundo. Para isso, vou usar o valor R GV, RGB. Para vermelho, vou usar 66. Além disso, para verde, vou usar 66. Para o nosso 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. Agora vou estilizar esta seção da caixa. Para isso, vou selecionar um ponto ou classificá-los como caixa. Então, no calibre, nossa primeira propriedade é Posição absoluta. Nossa próxima propriedade é a melhor. Quero posicioná-lo no meio desta página. É por isso que vou passar de 50%, 50%. Nossa próxima propriedade é alugar também 50%. Em seguida, vou usar a propriedade de transformação. Transformar. Aqui eu vou usar prospectivo prospectivo, prospectivo Com essa perspectiva, nossos três motéis não funcionam corretamente. Em seguida, vou dizer altura e largura, Weed, 200 pixels. Em seguida, altura, altura, 300 pixels. Além disso, precisamos usar outra propriedade, que é o estilo de transformação. Estilo de transformação, vou usar preserve três D, e agora precisamos estilizar este, tão profundo, que está dentro desse pai D. Aqui vou selecionar got box, espaço D. Então, dentro do calis O, a primeira propriedade é posição, posição absoluta, e nossa segunda propriedade é top top zero E também vou usar p zero. Então eu vou dizer altura e largura para esse elemento profundo. Peso 100%. Também altura 100%. Agora, vamos dizer uma cor de fundo e ver como ela fica lenta. Antecedentes. Vou usar a cor branca. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode vê-lo criar 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 al. Deixe-me te mostrar. Aqui vou digitar a função al. C A L C. Então, dentro do ss redondo. Precisamos calcular a posição. Como você pode ver, nossa altura é de 300 pixels. Aqui vou nos lembrar de 150 pixels. De 50% da posição, metade da altura, que é de 150 pixels. Da mesma forma, vou usar a função L para nossa posição esquerda. C A LC, ajuste a prensa redonda, 50% menos. Aqui você pode ver que nossa largura é de 200 pixels. Eu vou para -100 pixels wi. 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 profunda, e aqui vou usar a propriedade transform stele Transform transform, Style, transform style servem três D, e agora precisamos estilizar nossa tag span, que está dentro dessa tag dip Aqui, vou selecionar caixa de pontos, espaço, D, extensão espacial. Então, dentro das calibrações, nossa primeira propriedade é posição, posição absoluta E top zero. Atrasado também zero. Nossa próxima propriedade é a vitrine, e eu vou usar o bloco. Além disso, precisamos definir dentro da altura. Nós 100%. Altura cem por cento, e então eu vou definir o plano de fundo. Bground, como plano de fundo, vou usar cor de gradiente linear, gradiente linear Primeiro, precisamos ultrapassar o ângulo do gradiente, e nosso ângulo do gradiente é zero grau C, e aqui, vou fornecer um total de três cores, O primeira cor é mais opaca , F um, F um Vamos ativar a tampa da ala. Agora você pode ver isso claramente. Então nossa próxima cor é a etiqueta BBB, é uma cor cinza claro O terceiro também vai 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 uma pequena cor cinza d e, mais uma vez, com a cor cinza claro. Então eu vou dizer raio de borda para essa cor de gradiente. Deixe-me mostrar isso. 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 d principal. Então, para comentar esta linha e definir novamente. Agora você pode ver o resultado. Agora, precisamos selecionar todas as tags de extensão, uma por uma. Para isso, vou selecionar. Vou digitar caixa de pontos, espaço, D, espaço, extensão. Colón, criança, criança 1. Então, dentro do ss redondo, vou usar uma transformação de nome de propriedade. Transformar Quero girar nosso primeiro filho na direção do eixo x. Aqui eu vou digitar rotate x v, rotacionar x, e eu quero girá-la em zero grau, e então vou selecionar a seção inteira e Agora vou selecionar nosso segundo filho. Eu quero girar este na direção S, 45 graus. Então eu vou duplicar mais uma vez. Agora vou selecionar o terceiro filho. E 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 novamente e, desta vez, vou selecionar o quarto filho Agora vou dizer ângulo de rotação de 90 graus. Além disso, vou dizer esse arquivo. Agora vou girar a seção inteira na direção de y x. Para isso, depois de prospectiva, vou usar girar y, girar y. -45 graus. vou usar girar y, girar y. -45 graus. Se eu definir esse arquivo, você poderá ver o resultado. Agora parece um objeto de três D, e você pode ver e ver toda a parte da tag span. E agora precisamos trabalhar com nossa parte final, que é a parte de animação. Aqui, vou chamar nossa propriedade de animação de animação. O nome da animação é animate. E nosso tempo de duração de animação é de cinco segundos, e nossa direção de animação é linear, e eu quero executar essa animação por tempo infinito. Aqui, vou usar a contagem infinita de iterações de animação. Agora precisamos criar o quadro-chave para essa animação. Vou copiar o nome da animação. Por fim, vou criar o quadro-chave no quadro-chave de taxa. Keyframes, e nosso nome de animação é anime. Então, dentro da grossa, aqui vou usar o valor percentual na posição de 0%, são as calibragens Vou usar transform probity, transform. Transforme primeiro, quero dizer prospectivo, prospectivo de 1.000 pixels Depois de prospectiva, vou definir o valor de rotação x, girar x girar x Em seguida, vou dobrar esta seção e, na posição de 100%, vou definir a rotação x 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 rotação e íon em três D. Obrigado por assistir a este vídeo, sintonizado para nosso próximo projeto 32. Nuvem chuvosa animada, parte Um: Para ver vocês mais uma vez, estou de volta com um novo projeto de animação de Sess Neste projeto, vamos criar uma nuvem chuvosa. É um projeto de animação de tese muito avançado porque vamos usar o compartilhamento variável. Vamos ver a demonstração, como está. Como você pode ver na tela, gotas de chuva caem das nuvens e desaparecem no chão Você pode notar aleatoriamente as gotas de chuva. Sem perder seu tempo, vamos ver como podemos criar esse projeto Como você pode ver, lado a lado, abro meu editor de código Visa Studio e meu navegador usando a extensão life Server, e já crio o arquivo Index dot ESTeML Eu também crio arquivo Sess doot Sess. Como você pode ver, vinculamos nosso arquivo de estilo a este documento ESTeML. Como você sabe, precisamos começar com a estrutura dos ESTs. Primeiro, vou criar um contêiner, que conterá Cloud e R. Vou criar uma classe, contêiner de pontos D. Como você pode ver, criamos um contêiner de nome de classe. Então, dentro desse contêiner profundo, vou criar o Cloud. Aqui, vou criar outro acordo. De dot Clou, eu vou configurar este arquivo. Agora vou pular para a seção de estilo, arquivo CSS de pontos de estilo. Primeiro, vou selecionar a página do documento usando a estrela do tipo Universal select Firm. Então eu defino as Cals, primeiro, vou usar a propriedade de margem Margem, zero. Com isso , também vou usar preenchimento. Acolchoamento, também zero. Em seguida, vou usar a propriedade de dimensionamento de caixas. Dimensionamento da caixa, e aqui vou usar a caixa Bodi V. Por outro lado, não há nenhuma volta de mesclagem neste Agora vou estilizar nossa etiqueta corporal. Aqui vou digitar corpo. Então, em vez dos aliases, primeiro, vou usar a exibição da propriedade display. Tela flexível Em seguida, vou usar o conteúdo do Justify. Justifique o centro de conteúdo. Além disso, precisamos usar outra propriedade, alinhar itens. Alinhe o centro de itens Se você não está familiarizado com a caixa flexível e a ganância , pode conferir meu curso Então eu vou dizer a altura mínima desta página. Então, para digitar altura média, altura média e VH Nossa próxima propriedade é plano de fundo, plano de fundo, e eu vou dizer cor de fundo. Eu vou dizer algo de cor cinza escuro. Cinza escuro. Eu quero uma cor mais escura, seleciono essa cor, essa, e vou dizer esse arquivo Essa cor é boa para o nosso exemplo e você pode escolher sua própria cor. Agora precisamos estilizar a seção do contêiner. Eu copio o nome dessa classe de contêiner e, aqui, vou digitar dot container. Então, dentro da posição cis ou das primeiras propriedades, na verdade Além disso, vou dizer a altura desse contêiner. Altura, algo por menos de um pixel. E eu vou dizer esse lado. Agora precisamos projetar a parte da nuvem. Então, para copiar a nuvem de nome da classe e, em seguida, um contêiner, eu sou a nuvem de pontos de ardósia Então, dentro dos aliases, nossa primeira propriedade é posição, relação posição Além disso, vou dizer isso dentro da altura dessa nuvem. Precisamos de 320 pixels. E altura, 100 pixels. Então eu vou dizer cor de fundo, fundo, e vou usar fundo branco. Para isso, vou usar a tag hexa D H FF eight. 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 a propriedade de raio de borda. Raio da borda, raio da borda, 100 pixels . Vamos definir o amigo e o C. Além disso, vou posicioná-lo de cima para baixo. Aqui eu vou usar a propriedade superior. Os 50 melhores pixels. Vou configurar este e, para dar a ele a forma de nuvem, precisamos usar o seletor posto Aqui, vou criar um seletor de postagem para a nuvem. Nuvem D, cólon e cólon. Então, dentro dos vasos, vou criar sem graça, conter conter sem graça Basicamente, vou criar uma cópia dessa nuvem. A próxima propriedade é posição, posição e, desta vez, vou usar obsoleto, obsoleto. Em seguida, quero mover essa nova nuvem para essa posição. Para isso, precisamos usar a propriedade. Top -50 pixels. Então eu vou dizer com e altura desta nuvem. W 110 pixels. Também vou dizer altura, altura, então 110 pixels. E então eu vou dizer cor de fundo. fundo, e para cor de fundo, vou dizer também branco. Vou configurar esse arquivo. Agora precisamos dar uma forma redonda. Para isso, precisamos usar o raio da borda. Raio de borda de 50%. Eu vou definir este. Para colocá-lo no meio, precisamos mover esse círculo para o lado esquerdo. Aqui eu vou usar a propriedade lift lap Lap 40 pixel. Se eu definir esse arquivo, você poderá ver o resultado. Agora, aqui precisamos criar outra forma de círculo para criar uma nuvem perfeita. Para isso, vou criar uma sombra de caixa sólida. Deixe-me te mostrar como. Aqui eu vou usar a propriedade box shadow, box shadow. Primeiro, precisamos posicionar essa sombra. Do topo, vou dar 90 pixels. Da direita, vou dar zero. De baixo, também vou para g zero, e da esquerda, vou para g 30 pixels. Por fim, vou dar uma cor sólida a essa sombra de caixa. O tipo H tem etiqueta, cor branca, FF. Se eu definir isso enquanto, você pode ver o resultado. Como você pode ver, criamos uma forma de nuvem perfeita usando uma antese pequena. Na próxima parte deste projeto, vamos criar em. Obrigado por assistir a este vídeo, a próxima parte. 33. Nuvem chuvosa animada, parte Dois: O que ver, pessoal. Essa é a segunda parte desse projeto. Na parte anterior, criamos a nuvem com sucesso. Mas nesta parte, vamos criar as gotas de chuva. Sem perder seu tempo, vamos começar. Primeiro, vou criar uma etiqueta profunda, que conterá gotas de chuva. DE.in. Como você pode ver, criamos um elemento profundo com classe de chuva. Então, dentro desse elemento profundo, vou criar uma etiqueta de extensão múltipla para nossas gotas de chuva. Aqui, dentro dessa tag profunda, vou criar uma tag pan. Em seguida, vou usar o atributo de estilo nesse estilo de plano. Aqui eu vou usar variáveis CSS. Sei que parece um pouco avançado, mas é muito eficaz. Para limpar uma variável Sess, precisamos usar das sine. Deixe-me te mostrar como. D e nossa variável me é I. Então precisamos usar dois pontos Em seguida, precisamos usar col para definir nossa variável. Depois de dois pontos, precisamos fornecer o valor. Valor F, ele vou digitar um número aleatório, algo 11. No total, vou usar 20 gotas de chuva, mas você pode usar quantas quiser. Eu quero duplicar essa linha. Aqui eu vou passar. Novamente, vou duplicar essa linha. Aqui eu vou passar t. Você pode usar um número aleatório, qualquer número aleatório. É um pré. Eles o duplicam mais uma vez. Aqui, vou usar 14. Então, novamente, vou usar 18. Vamos proteger esta seção para economizar seu tempo. E então vou duplicar essa seção de trabalho novamente. Eu crio 20 gotas de chuva usando a tag span. Se eu definir esse arquivo, como você pode ver, não há nada aqui. Agora precisamos estilizar as gotas de chuva em nosso arquivo Sess. Quero copiar o nome da classe e, em nosso arquivo de estilo, vou selecionar essa classe, faça. 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 a gota de chuva. Para isso, precisamos selecionar a etiqueta de chuva e amplitude. Para isso, precisamos selecionar span tag.in, space, span. Em seguida, dentro da calva, O primeiro posiciona a posição relativa Nossa próxima propriedade é com altura, dez células de pico. Também pesa dez células de pico. Agora vou dizer a cor do fundo para nossas gotas de chuva. Aqui eu vou usar dground property, background. Vamos configurar o arquivo e ver o que aconteceu. Se eu configurasse o arquivo, como você pode ver, ele parecia uma linha de estado. Mas essas 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 a extremidade superior inferior, vou usar zero, e para a leptina, à direita, vou usar 20 pixels Se eu definir esse arquivo, você poderá ver o resultado. Então, precisamos *** marcar uma margem entre as gotas de chuva. Para isso, precisamos usar a propriedade de margem. Margem. Para cima e para baixo, vou usar zero F na direita, vou usar dois pixels Agora você pode ver que nossos pontos corridos estão perfeitamente organizados. Agora precisamos fazer com que os pontos de chuva tenham a forma redonda, ou seja, precisamos usar a propriedade do raio da borda Aqui, vou digitar o raio da borda. Raio de borda de 50%. Vamos salvar o arquivo e você poderá ver o resultado. Agora, tende a criar a animação. Vou usar a propriedade de animação, animação, e nosso nome de animação é animate. E a duração da nossa nação é de cinco segundos. Além disso, a direção é linear. Por fim, precisamos fornecer uma contagem de iterações de anuação, que é Porque eu quero acompanhar nossas tarifas por tempo infinito. Agora, vamos adicionar o quadro a essa animação. Então, digite nos quadros-chave de taxa e sua nação será animada Em seguida, dentro dos aliases. Primeiro, na posição de 0%. Vou usar a propriedade transform, transform, e quero mover esses pontos vermelhos para baixo. É 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 configurar o arquivo e ver se está correto ou não. Como você pode ver, a animação funciona perfeitamente e, com a propriedade translate it, quero usar a escala na posição de 0%, quero escalá-la uma vez. Então, na posição de 70%, quero escalá-la mais uma vez. Mas na posição de 100%, eu quero escalá-la assim. Se eu definir esse arquivo, agora você poderá ver o resultado. Como você pode ver, quando nossas gotas de chuva caem no chão, elas desaparecem, não voltam à posição antiga porque usamos o valor da escala zero na posição de 100% É por isso que desapareceu quando caiu no chão. Agora precisamos mudar a posição de origem da transformação. Aqui eu vou usar transform origin, e vou usar bottom, e então vem a parte mais importante deste projeto. Aqui você pode ver as gotas de chuva 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 mudarmos a duração da animação , todas as gotas de chuva cairão aleatoriamente uma a uma. Se você se lembra, como você pode ver no meu arquivo STL, criamos nossa tag span com variável e nosso limite de variação é I, e definimos um valor aleatório para essa variável, 161112, 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 Kal, que é uma função do CSS, quero dividir 15 segundos, e ou variável I. Aqui vou digitar onde , dentro do ss redondo, nosso nome é I, e para esfriar muito bem, precisamos usar da da Então eu. Se eu definir esse arquivo, nossas gotas de chuva estão caindo aleatoriamente Eu estou muito bonita. E agora parecem gotas de chuva reais. Só precisamos mudar a cor das gotas de chuva, e vou usar a cor branca para isso Se eu definir esse arquivo, agora você pode ver que ele funcionou perfeitamente. Nosso projeto está quase concluído. Precisamos criar o solo para criar uma parte do solo naquele local, precisamos usar a propriedade border bottom. Precisamos encontrar o contêiner. Aqui, vou digitar borda inferior. E eu 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 eu definir esse arquivo, você poderá ver o resultado. Além disso, preciso remover as gotas de chuva do fundo. Aqui vou digitar os dez pixels inferiores. Eu testei 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, sintonizado para nosso próximo projeto 34. Animação de carregamento de CSS: É bom ver vocês de volta, pessoal, mais uma vez, estou de volta com um novo projeto de animação. Como você pode ver nesta animação, como a animação de carregamento funciona. Sem perder seu tempo, vamos ver como podemos criá-lo Como você pode ver, lado a lado, abro meu editor de código do Visor Studio e meu navegador usando a extensão de servidor Lx, e eu já criei o nome do documento STL index dot Com isso, você também cria ou estiliza o arquivo Sass. Então, primeiro, dentro da tag body, vou criar a tag H dois, H dois. Dentro da etiqueta S two, vou digitar blod. O ponto n. Mas na minha tag H two, vou usar dados em. Dados do tipo Hm. Texto de dados. Então, igual a dentro do duplo cos, vou passar o mesmo texto, carregando. Copie o texto e cole-o dentro dos códigos duplos. Se eu definir esta página, você poderá ver o texto no meu navegador. Esta é a nossa parte estável. Agora precisamos entrar no arquivo ou Sess Primeiro, vou importar um formulário. Deixe-me te mostrar. Aqui vemos que eu importo popping scorm, e a fonte é 700 É uma forma em negrito e agora vou selecionar o seletor universal Em vez disso, a estrela Cass ou a primeira propriedade é a margem. Margem, zero ou segunda propriedade é preenchimento. preenchimento também é uma terceira propriedade: o tamanho da caixa, o tamanho do Bob e como vou usar a E então eu vou usar uma boa propriedade da família. Família de fontes, família Fon, e aqui vou usar Poppins Esta fonte é de Sensory fame. Então, vírgula, vou digitar Sensorial. 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 estilizar nossa seção corporal. Ele deve usar o corpo. Corpo dentro do Cs, nossa primeira propriedade é exibida, e eu vou usar floco Eu quero colocar esse texto no meio do discurso. É por isso que vou usar o flake. Então, nossa próxima propriedade é justificar o conteúdo. Justifique o centro de contenção. Além disso, vou alinhar esse item. Alinhe o centro do item. Se eu definir esse arquivo, você poderá ver a resolução e, em seguida, direi a altura mínima. Altura mínima do tipo Hm, altura mínima cem VH. Com isso, também quero dizer antecedentes. Como plano de fundo, vou usar a cor RGV, RGP. Além disso, você pode usar qualquer cor mais escura. Mas aqui vou usar um pouco de peso 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. É um p e, em seguida, vou estilizar esse tipo H two. Aqui, vou empatar H dois. Então eu ajusto as calibragens, vou digitar a posição Posição relativa, a próxima propriedade é o tamanho da fonte. Tamanho da fonte. 14 V. Se eu definir esse arquivo, você poderá ver o resultado. Agora está perfeito. E agora vou definir a cor do telefone. H, vou amarrar a cor e vou usar a mesma cor RGV Eu copio o valor e vou colá-lo aqui. Vou configurar esse arquivo. Agora você pode ver que combina com a cor do plano de fundo É por isso que você não consegue ver a cor. Nossa próxima propriedade é tomada. Para isso, novamente, vou usar a cor RGV. Mas desta vez, vou mudar o, e nosso valor é 2108 e para azul, vou usar 146 Se eu definir esse arquivo, você ainda não poderá ver esse traçado porque não o definimos. É por isso que vou passar de 0,3. V. Se eu definir esse arquivo, agora você pode ver o motivo. Além disso, você pode aumentar o traço. É um PU e agora precisamos replicar a forma usando a seleção de postura Para isso, vou digitar H dois cólon cólon quatro. Em seguida, dentro do conteúdo das calibrações ou das primeiras propriedades. E aqui vou usar a função Otter. Agora precisamos passar esse atributo, texto de dados. Eu copio esse atributo aqui, vou passar o texto dos 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 top zero. Deixe também zero. Além disso, vou dizer que, por enquanto, vou ultrapassar 30 pixels. Se eu definir esse arquivo, você não poderá dizer nada porque não definimos nenhuma cor e altura para esse elemento. Para isso, vou usar a propriedade de altura. Altura 100%. Também vou usar cores. Cor, aqui, vou usar um vdu hexadecimal, tem 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 propriedades. Antes de fazer qualquer coisa, quero esse texto em maiúsculas. Aqui, vou usar a propriedade text trasf. Mas antes eu vou usar ponto e vírgula. Em seguida, vou digitar Tex transform. Transferência de texto em maiúsculas. E também para definir um traçado neste slot. Aqui, vou usar essa propriedade e valor, e depois da cor, vou colá-la. Mas desta vez, vou trocar o volante. Aqui eu vou passar zero VH h. Traço com zero V. Se eu definir esse arquivo, você poderá ver o resultado Se você perceber que pode ver, não há nenhum derrame neste slot Nossa próxima propriedade é transbordante, transbordamento aquecido. Defina este arquivo, agora você pode ver o resultado. Como você pode ver, nosso oito é zero e Olow z. É por isso que você não consegue ver o texto Mas se eu aumentar o valor de oito, deixe-me mostrar uma célula de 40 pi e, em seguida, definir esse arquivo, você poderá ver o resultado. Como você pode ver lentamente, ele preenche o texto com a cor. Da mesma forma, se eu aumentar o valor, escolher 90 células e, em seguida, definir esse arquivo, você também poderá ver o resultado. Na animação, precisamos brincar com essa propriedade. Por enquanto, vou fazer o zero e depois definir esse arquivo. Em seguida, vou usar outra propriedade, que é fronteira. Border escreve. Borda direita, e eu vou usar borda sólida de dois pixels, sólida. Além disso, vou usar uma cor Hodsimal. 01f e87. Se eu definir esse arquivo, você poderá ver o resultado. Se eu aumentar a largura, desta vez, então aqui vou passar 120 pixels e depois definir esse arquivo. Como você pode ver, parece que essa linha preenche a cor desse texto. Novamente, vou passar de zero aqui, e agora precisamos brincar com a animação. Vou criar uma animação. Animação, e nosso nome de animação é animate. Quero executar essa animação por 6 segundos, e nossa direção de animação é linear. Quero rodar essa animação por um tempo infinito. Aqui eu vou usar infinito. Agora precisamos criar o quadro-chave. Digite H nos quadros-chave de 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. E vou digitar o nome animate. Em seguida, dentro do Calass na posição de 0%. Novamente, dentro dos casos, eu defino w, w zero e vou abordar os tópicos desta seção. Agora, na posição de 70%, não estou pronto para cem por cento. Se eu definir esse arquivo, você poderá ver a animação. Como funciona. Funcionou perfeitamente. Se eu jogar com algum valor percentual com 0%, vou passar Também com 10%, vou passar de 100%. Na posição de 0%, posição de 10% e posição de 100%, quero atirar zero Mas com 70% da posição e 90% da posição dessa animação, eu quero a semana 100%. Se eu definir esse arquivo, agora está perfeito. Como viu. Isso é exatamente o que queremos. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto