Animação de carregamento de CSS puro

1. Introdução: Olá cara, é bom ver você de volta. Hoje vamos criar esse lindo projeto de animação de carregamento usando TML e CSS Meu nome é John Shortcut e sou seu instrutor neste projeto É uma animação de carregamento muito bonita , feita por STML e CSS Também é muito responsivo. Se eu reduzir a largura do nosso navegador, acordo com a resolução do navegador, ele mudará o tamanho do telefone, então ele é bastante responsivo Podemos aplicar esse tipo de animação de carregamento em nossos projetos. Para criar essa animação de carregamento, não vou usar nenhuma biblioteca Javasceep e nenhuma biblioteca CSS Vamos usar estim puro e CSS puro. E se você estiver interessado nesse projeto de animação, podemos começar nossa jornada a partir do próximo tutorial. Obrigado. 2. Como criar modelo HTML: Então, esta é a primeira aula de uma hora relacionada a vídeo. Então, deixe Jung entrar na tela do computador e comece a programar. Como você pode ver, lado a lado, abro meu editor de código do Wiser Studio e meu navegador usando a extensão Lifesaver, e já crio um documento de estimativa e também criamos um arquivo CSS de pontos de estilo Por enquanto, como você pode ver, nosso documento está completamente em branco. Então, agora precisamos criar nosso modelo iniciado em TML. Para isso, como você pode ver, estamos usando o código VS. Vou elogiar a placa de escavação em forma. Então eu vou elogiar Enter. Como você pode ver, automaticamente, ele cria um modelo iniciado para mim. Em seguida, vou definir um título para esse modelo. Aqui vou digitar o efeito de animação de texto criativo do CSS . Depois de digitar o nome do título da nossa página da web, precisamos vincular esse arquivo CSS padrão a um documento estável. Para isso, vamos usar o link LINK da etiqueta de tinta, folha de estilo de referência e também precisamos passar pelo Aqui, precisamos fornecer o caminho do arquivo dessa folha de estilo Como você pode ver, ele está no meu diretório de roteamento atual. Então, vou colocar o nome fino no estilo de ponto CSS. Então, dentro da tag body, vou usar o cabeçalho para marcar H two. Então, dentro desse cabeçalho para marcar, vou digitar Lodi Além disso, vou digitar três pontos. Em seguida, vou usar um atributo e vou usar esse atributo em nosso cabeçalho para marcar, e o nome do nosso atributo é texto de dados. Texto de dados igual a di. Esse é um atributo de dados personalizado. No STM, os atributos de dados permitem que você armazene informações extras em um elemento estável Esse atributo não afeta o layout. Eu não altero nenhuma aparência em nossa página da web. Basicamente, nós o usamos com Java strep caso contrário, CSS para adicionar comportamento dinâmico, nosso tipo de dados é teste e armazenamos esse valor carregando e vamos usar esse valor posteriormente Isso é tudo para este vídeo. No próximo vídeo, vamos começar o CSS. Há para assistir. 3. Comece com código css aprimorado: É bom ver vocês, pessoal. Mais uma vez, estou de volta com outro vídeo relacionado ao nosso projeto de animação de carregamento. Então, vamos entrar na tela do computador. Como você pode ver na tela do seu computador, aqui abrimos um site, Google Forms, e pesquisamos uma fonte chamada Pop ins. Para nosso projeto de animação de carregamento, usaremos o Pop in Forms. E a partir daqui, vou selecionar essa forma de fonte. 700 negrito 700. Para obter essa fonte, basta clicar no botão Gate fun e ele fornecerá o código incorporado do Gate. Basta clicar nessa opção. E então você precisa selecionar para qual plataforma você deseja usar essa fonte para web, Android, IOS flutter Vou usá-lo para fins web e quero importar essa fonte. Eu clico na opção Importar. E a partir daí, precisamos copiar o código, esse código de opção de importação. Então eu copio a fonte inteira. Depois de copiar o código, volto para a tela do meu computador. Para obter exatamente o mesmo resultado, precisamos dessa fonte. Então, vamos entrar no estilo dot css fun. Primeiro, vou importar essa fonte. Então eu colei o código. Depois disso, vou aplicar essa fonte a esse texto. Para isso, primeiro, vou criar um signo universal de elétron Então, em su, a Calira diz, primeira probabilidade, vou usar margem Margem, e eu vou atribuir a margem Ju. Então eu vou atribuir pan. O preenchimento também é zero. Como você sabe, estrela é um seletor universal Primeiro, definimos a margem zero de todos os elementos. Em seguida, definimos todo o preenchimento do elemento como zero. Depois de definir esse arquivo, como você pode ver, nosso texto de carregamento, agora ele começa no canto superior direito porque nosso título para tag vem com preenchimento e margem padrão E removemos todo o preenchimento e a margem padrão usando o seletor universal Depois disso, vou usar outra propriedade chamada tamanho da caixa, tamanho da caixa e vou usar caixa de borda Outra pergunta é: o que é isso? Por que você usa o tamanho da caixa, a propriedade da caixa de garrafa? Ele mudou a forma como a largura e a altura de um elemento são calculadas. Deixe-me esclarecer o conceito de tamanho de caixa, por que usamos essa propriedade Então, como você pode ver, o inferno criou o elemento DV e definimos com 200 pixels Mas esse elemento profundo vem com borda de dez pixels em cada direção, esquerda e direita. Depois de usar uma borda de dez pixels, cada lado, aumenta a largura D. Agora ele se torna 220 pixels. Da mesma forma, se adicionarmos preenchimento à esquerda e à direita, suponha que digamos um preenchimento de dez pixels em cada lado, novamente, isso ampliará a largura profunda Agora ele se torna 240 pixels. Mas dissemos 200 pixels de largura de profundidade. Devido ao acolchoamento e à borda, ele estende a largura. Para resolver o problema, tamanho da caixa vai nos ajudar. Se aplicarmos o tamanho da caixa, isso não aumentará a largura do elemento profundo Sempre manterá qualquer poço em que passemos. Basicamente, isso reduzirá o conteúdo dentro do contêiner, mas não aumentará a altura do contêiner É por isso que aplicamos a propriedade de dimensionamento de caixas em nosso documento. Depois de aplicar o tamanho da caixa, agora vou aplicar o fonfam Vou vincular a família de fontes e vou usar a fonte Poppins Dentro do curso único, vou amarrar Poppins, e ele vem da família San Serif, San Serif e ele vem da família San Serif, San Serif. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode observar o título que alguém usa. Isso mudou o estilo da fonte. Eu parecia um pouco mais ousado. É isso para este vídeo. No próximo vídeo, vamos estilizar essa tag corporal. 4. Estilizar a etiqueta do corpo e a etiqueta de título: É bom ver vocês. Este é o terceiro vídeo deste tutorial e, neste vídeo, vamos estilizar a tag body. Então, vamos entrar na tela do computador. É isso que vamos criar neste tutorial. Para isso, precisamos estilizar a tag corporal. Então, vamos entrar no arquivo CSS de pontos de estilo e começar a estilizar a tag body Então, primeiro, vou direcionar a tag body usando seu nome, nome da tag, BO, DY body e, dentro da propriedade Cali ressFS, vou usar display Mostre, e eu vou fazer com que seja de linho. Outra explicação é por que eu uso flocos de propriedades de exibição? Porque habilita o layout de linho. Então, o que podemos fazer com o flexlou? Qual é a vantagem de usar o Flex Llaout? Porque facilita o alinhamento e a distribuição do elemento dentro de um contêiner Até mesmo o tamanho do elemento é desconhecido ou dinâmico. Quando alteramos o tamanho da janela do navegador, vamos alterar o conteúdo acordo com a resolução da janela do navegador. Funciona dinamicamente. Em seguida, vou usar outra propriedade chamada Justificar conteúdo. Justifique o conteúdo E aqui eu vou passar pela onda central. Essa propriedade centralizou o conteúdo horizontalmente É um elemento de canal alinhado ao centro. Se eu definir esse arquivo, você poderá ver o resultado. Ele alinha nosso título ao centro de tags desta página. Ele centralizou horizontalmente o conteúdo. Além disso, precisamos centralizar esse conteúdo verticalmente. Para isso, vou usar outra propriedade chamada align IN Alinhe os itens. Além disso, vou colocá-lo no centro. Se eu definir esse arquivo, essa propriedade vai centralizar a vertical 11. Mas depois de definir esse arquivo, ele não está funcionando. Agora você pode ter perguntado por que não está funcionando? Porque não especificamos a altura. Então, para isso, vou usar outra propriedade, altura mínima, altura média, e vou definir a altura mínima, área de 100 janelas de visualização Cem VH. Harry estabeleceu uma altura mínima para esse corpo e Harry atribuiu 100% da altura de poucos pés. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora, também centralizada horizontalmente e verticalmente centrada na e verticalmente Em seguida, vou atribuir uma cor de fundo a essa tag corporal. Para isso, vou vincular o plano de fundo ao plano de fundo da festa nossos códigos de cores, e aos nossos códigos de cores, e vou usar a cor RGB e, dentro da prensa redonda, para vermelho , vou usar para verde , vou usar 40 e para azul , vou usar 53 e vou enviar esse arquivo Depois de estilizar a tag do corpo, também vou estilizar o título para a tag. Aqui vou criar o select trot, H two, e dentro da propriedade cliVSF, vou usar position Posição, e eu vou usar a posição relativa. Em seguida, vou definir o tamanho da fonte. Tamanho da fonte, e vou usar o tamanho da fonte 14 VW. Se eu definir esse arquivo, você poderá ver o resultado. Agora, a questão é por que usamos a unidade VW? Temos outras unidades, como pixel, PT, porcentagem e mínimo. Mas em vez de usar outras unidades, usamos a VW. VW significa largura da porta V e 14 VW significa 14% da largura de poucos pés Então, sempre que aumentarmos a largura desse navegador, ele aumentará o tamanho da fonte de acordo com a largura do navegador. Em seguida, vou definir a cor da fonte. Então, digite cor e, para cor, vou usar RGV Value o vestido de pluma for vermelho, eu vou passar por três. Para verde, vou passar dos 40. E para azul, vou usar 53 e vou definir esse arquivo. Basicamente, aqui eu uso exatamente a mesma cor de fundo. Agora, nosso texto não está visível porque corresponde à cor do plano de fundo. Então, vou adicionar outra propriedade. Aqui vou aplicar outra propriedade chamada traçado de texto. Digite texto, traçado de hífen e, para usar a propriedade, use também webkeat Esse estilo específico de web keit adiciona um traçado ou um contorno ao redor do texto Então, eu quero um traço 0,3 VW. Também vou definir a cor do traço Para a cor do traçado, vou usar o valor RGV, RGV. Então você disse que os vestidos redondos, ela passaria por vermelho eu vou usar dois, para verde, eu vou usar 108 e para azul, eu vou usar 146, e eu vou definir esse arquivo Essa cor é um pouco mais clara que a cor de fundo. Se eu definir esse arquivo, você poderá ver o resultado. Agora, se você quiser converter essa tomada em maiúsculas, caso contrário, você pode usar o texto em minúsculas Eu gostaria de usar maiúsculas, então vou digitar text transform uppercase e vou definir esse arquivo Agora é assim que parece. Agora, é bastante compatível com o nosso resultado, e esse é o nosso resultado, o que vamos criar Então, na próxima parte deste tutorial, aqui vamos criar um pseudoelemento, que adicionará um efeito de sobreposição dinâmica como esse Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 5. Como adicionar o efeito de sobreposição: É bom ver vocês de volta, pessoal. Mais uma vez, estou de volta com outro tutorial relacionado a esse projeto de animação de carregamento, e essa é a parte mais importante deste tutorial porque, nesta parte, vamos adicionar esse ajuste dinâmico de sobreposição Para isso, vamos usar a ajuda do posito antes do elemento positivo Então, vamos começar a prática. Então, aqui, vou criar um elemento antes positivo da tag H two. Então, primeiro, vou digitar taut H two e vou digitar colon colon BFO Então, dentro das calibrações, vou usar nossa primeira propriedade content, content e, como conteúdo, vou usar a função de atributo Ater, essa função aqui dentro das corridas redondas, vou passar o atributo, vou passar o atributo, que criamos em nosso texto de dados TimlPage de ponto de índice Eu copio o texto dos dados do nome do atributo e vou colá-lo nas corridas redondas. Aqui passamos o conteúdo dos dados e, como você sabe, dentro desse texto de dados, Henry passa o carregamento do Hentype Vamos usar esse texto e a função utter para permitir o elemento positivo replique o texto do título Agora precisamos definir a posição desse conteúdo. Para isso, vou digitar position property. Posição e aqui, vou usar a posição absoluta. Ele permite que o elemento poseido seja colocado diretamente sobre o texto Quero dizer, o texto original, e então precisamos mencionar a posição da parte superior e dos lábios. No topo, vou passar de zero. Então, para P, eu também vou passar zero. Então eu vou definir o com W Hemost com zero e altura Vou usar a altura 100%. Como você pode ver, coloque a posição da parte superior e dos lábios em zero , pois isso permitirá colocar o conteúdo sobre o texto com precisão E então atribuímos e depois atribuímos com zero. Por que atribuímos com zero? Porque isso o torna invisível no início. Por meio da animação, essa largura se expandirá e criará um efeito revelador. Em seguida, usamos a altura 100% para garantir que o elemento positivo ocupe a altura total do elemento H dois e cubra o texto verticalmente Em seguida, vou atribuir cores a esse texto. Para isso, para o texto de sobreposição. Para isso, vou digitar a propriedade da cor. Cor, hashtag e nosso código de cores é zero, um, um e87. É uma espécie de verde, verde claro. Em seguida, precisamos atribuir um traço. Para isso, vou copiar essa propriedade desta posição e colá-la aqui. Para traçado, aqui vou atribuir zero V W e para traçado colorido, vou usar o valor RGB RGV E por dentro, o redondo é para vermelho, vou usar dois Ou verde aqui eu vou usar 108 e para azul, eu vou usar 146 Eu quero dizer a mesma cor. Aqui, usamos a mesma cor de traço que usamos para marcar o H. Mas você pode notar que aplicamos traços com zero VW. Basicamente, ele remove efetivamente qualquer efeito de traçado do texto dos quatro elementos. Em seguida, precisamos criar essa linha horizontal. Essa linha. Para isso, vamos usar a fronteira. Deixe-me te mostrar. Aqui, vou usar a propriedade border write. Borda, certo, e eu quero uma borda sólida de dois pixels, e nosso estilo boer é Em seguida, precisamos fornecer a cor da borda, e eu vou usar a mesma cor. Para o bôer e a cor do texto, usamos a mesma cor verde clara Em seguida, precisamos remover a área de transbordamento algum tipo de cabeçalho, transbordamento Em seguida, precisamos criar a animação. Quero criar essa animação na próxima parte deste tutorial. Eu não vou criar essa animação nesta parte. Obrigado por assistir a este vídeo, fique ligado na próxima parte 6. Aplique a animação de sobreposição aprimorada: Então, bem-vindos de volta, pessoal. Este é o último tutorial relacionado ao Nosso projeto. E neste tutorial, vamos criar a animação. Então, primeiro, vou declarar um quadro-chave, um quadro-chave de estado, quadros-chave quadros-chave , e o nome do nosso quadro-chave Em seguida, na culira diz: Aqui, precisamos animar o valor da largura da largura antes do elemento positivo Se alterarmos o valor da largura ao longo do tempo, isso criará um efeito revelador Então, na posição de 0%, posição de 10% e posição de 100%. É essa a meta que vou definir com zero. 0,0 em 0,10 e em 0,100, vai definir com zero e em 70% e 90%, vou definir com No 0%, a animação começa com os elementos definidos como zero. E isso o torna invisível para cada estreito. Então, com 10%, a largura ainda é zero, então o 11 permaneceu oculto. E em 70%, aqui definimos a largura 100, tornando-a totalmente visível ou estendida por toda a largura, e em 90% também com remanescente de 100%, mantendo o elemento totalmente estendido e em cem por cento também definido com zo. Basicamente, permite que a animação reinicie a partir do estado oculto. Agora vou aplicar essa animação a esse elemento posito Para isso, aqui precisamos vincular a propriedade de animação. Animação. Primeiro, precisamos fornecer o nome da animação que é animate. Em seguida, precisamos fornecer a duração da animação. Quero executar essa animação por seis segundos e nossa direção de animação é linear. Além disso, quero executar essa animação por tempo infinito, então vou passar pelo infinito. A duração da animação é infinita. Agora, antes de configurar esse arquivo, primeiro, vou descomentar essa linha Então eu vou configurar esse arquivo. Acho que cometi algum erro. Sim. Esse é o nosso erro. Não é uma aula. É uma etiqueta, então eu quero remover o ponto e vou salvá-lo novamente. Agora você pode ter que colocar esse arquivo. É isso que ele enraíza. Esta é a fronteira na posição correta. Se eu fizer isso com 10%, caso contrário 20%, defina esse arquivo, você pode ver o resultado. Você já pode identificar o efeito de sobreposição. E se eu aumentar mais de 70%, é assim. Então, em nossa animação, aqui fizemos a mesma coisa. Aqui aumentamos a largura desse elemento antes do positivo. É por isso que cria esse efeito revelador. Então, por enquanto, vou torná-lo zero novamente e vou definir esse arquivo. Depois de configurar esse arquivo, como você pode ver, agora ele está invisível. Além disso, vou descomentar essa linha e vou executar essa animação Agora, depois de aplicar a animação, é assim que ela fica baixa. Criamos essa animação, essa animação de carregamento com sucesso. Espero que agora esteja claro para você o conceito de como podemos criar essa animação de carregamento. E se você gosta desse projeto , não se esqueça de fornecer sua valiosa avaliação. É importante para nós. Muito obrigado.