CSS desaparece na transição
Introdução ao HTML e CSS:
O código HTML tem elementos diferentes, como texto, imagens, vídeos, animações, parágrafos e etc. Como outras linguagens de programação têm consulta ou códigos, o HTML contém tags. O usuário deve ter conhecimento sobre as tags básicas do HTML. A sintaxe básica das tags html é:
HTML tem duas seções: porções de cabeça e corpo. Por outro lado, usamos CSS com uma tag de abertura e fechamento . Folha de estilo em cascata (CSS) contém mais três tipos de estilo: CSS em linha, interna e externa. O CSS embutido é o que é declarado dentro da tag html escrita na seção do corpo. O segundo é a etiqueta interna que é declarada dentro da parte da cabeça da tag html. O terceiro é externo, pois o nome mostra que é declarado em outro arquivo fora da tag html. Toda essa visão geral é dada porque o usuário deve saber sobre os tipos de declarações de CSS. Porque usamos os dois primeiros tipos de CSs que estão embutidos e CSs internos, neste artigo.
Desbotado em transição:
Fade é uma propriedade única do CSS que faz com que o conteúdo do HTML desapareça. O objetivo de usar a propriedade Fade é procurar a atenção do usuário ou notificar o usuário com algumas informações. Esse efeito de desbotamento é diferente do efeito piscante, pois a propriedade piscando faz com que o conteúdo continue com o processo de esconderijo. Mas a propriedade Fade aparece depois que o desbotamento não está desbotado novamente, a menos que a página esteja recarregada. Principalmente a propriedade de transição é usada na carga da página da web. Em outras palavras, como a página da web é carregada, a página inicialmente está em branco.
Propriedade de transição definindo opacidade para 1 quando a página for carregada:
Esta é a metodologia em que o corpo está definido para a opacidade 0 no nível inicial. Em seguida, a propriedade de transição é usada aqui para animar a propriedade de transição quando é alterada. Ao usar o evento OnLoad, definimos a propriedade da opacidade como 1 quando a página da web é carregada. Por causa da transição, a mudança de opacidade que aplicamos no CSS será usada para desaparecer a página.
Exemplo:
Usamos um exemplo simples para elaborar o funcionamento dos efeitos de desbotamento na transição. Podemos usar qualquer efeito para mostrar o conteúdo do desbotamento html. Neste exemplo, usamos textos simples na forma de cabeçalho e parágrafos. Agora, vamos entender o código HTML e CSS que é usado para realizar o efeito de desbotamento na transição.
Dentro da seção da cabeça, mencionamos o título da página. Então, as tags de estilo são usadas. Este modo de estilo é de estilo interno, pois todo o código é definido na etiqueta da cabeça. Dentro da etiqueta de estilo, direcionamos todo o corpo do HTML, no qual aplicamos o efeito de opacidade de 0. Isso significa que quando a página da web é carregada no início, a página da web é vazia como um todo. Enquanto isso, após 3 segundos de transição, o corpo de HTML é visível. Esta propriedade é feita através do valor de transição do estilo CSS, a opacidade da transição é definida como 3s.
Ao usar essas propriedades, todo o conteúdo dentro do corpo (texto ou qualquer imagem) terá zero opacidade. Mas após um tempo especificado, todo o conteúdo será visível.
Código CSS:
Em direção à seção corporal das tags HTML, aplicamos um efeito de carga. Ou, a opacidade do corpo é definida como 1, após o efeito desbotado.
< body onload = "document.body.style.opacity = '1'">Depois disso, a cor do fundo do corpo é definida como preto. Um cabeçalho
nome é declarado. Adicionamos um estilo em linha na tag, adicionando a propriedade de cor branca da fonte ao cabeçalho. Em seguida, feche a tag de título.
Código corporal HTML:
Da mesma forma, um texto simples com um ousado O recurso é adicionado e a mesma propriedade é adicionada ao texto em negrito através do CSS embutido.
< p style = "color: white" >No final, o último conteúdo que é adicionado ao corpo é o parágrafo
tendo estilo embutido. Feche todas as tags e salve o arquivo de texto com uma extensão de '.html 'como o nome do arquivo de texto que usamos é amostra.html. O objetivo desta extensão é abrir este arquivo no bloco de notas e no navegador também. Considerando que a '.A extensão txt 'abrirá todo o texto quando for executado no navegador. Mas quando abrimos o arquivo no navegador com uma extensão HTML, ele formará a página da web de acordo com o conteúdo HTML.
Anexamos uma pequena parte do vídeo que mostra o efeito de transição Fade-in na execução do arquivo.
Saída:
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/CSS-Fade-in-Transição.MP400: 0000: 0000: 10 Utilize as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.
Quando a página é carregada na abertura do arquivo no navegador, você verá que no início, o corpo não é mostrado, mas após 3 segundos o conteúdo criado no corpo é mostrado juntos. Toda vez que recarregamos a página, todas as partes do corpo são atualizadas. Inicialmente, eles estão desbotados, mas o texto é exibido quando o período mencionado no CSS é passado. Usamos a tecla 'F5' para recarregar a página novamente.
Também podemos mudar o tempo que mencionamos de acordo com o nosso desejo. Da mesma forma, todos os efeitos de desbotamento só podem ser aplicados a qualquer parte específica do conteúdo HTML em vez de se aplicar ao corpo inteiro. Com isso, você pode se concentrar diretamente na parte especificada da página da web.
Conclusão:
CSS Fade no artigo de transição consiste na propriedade de transição desbotamento e exibição de dados HTML. Introduzimos o uso básico de idiomas HTML e CSS e seus tipos. Tags distribuição e propósito de ambos os idiomas são elaborados. Em seguida, discutimos a propriedade de transição relacionada ao efeito de opacidade no estilo de propriedades do CC. Um recurso de texto simples é usado na parte do corpo. Todo o corpo é aplicado com o efeito de transição.