Etapa 2: adicionar um título

Em seguida, insira um título utilizando qualquer “

' para '

' Tag. Por exemplo, '

” adiciona um título.

Etapa 3: adicionar dados à lista

Para inserir os dados em forma de lista, utilize a tecla “ ' marcação:

---

---

< div classe = 'animal de estimação' >

< h1 > Lista de animais de estimação < / h1 >

< que > Galinha < / que >

< que > Pato < / que >

< que > Cão < / que >

< que > Gato < / que >

< que > Coelho < / que >

< / div >

A saída do código acima mencionado é a seguinte:

Agora, avance para a seção CSS para estilizar a lista.

Passo 4: Estilize o elemento “.pet-animal”

Acesse o '

” elemento com a ajuda da classe atribuída “ .animal de estimação ” e aplique as propriedades listadas:

.animal de estimação {

fronteira : 2px pontilhado rgb ( 230 , quinze , quinze ) ;

margem : 50px ;

cor de fundo : rgb ( 252 , 239 , 169 ) ;

}

Aqui:

• “ fronteira ” é usada para especificar o limite ao redor do elemento.
• “ margem ” define o espaço ao redor do limite do elemento.
• “ cor de fundo ” aloca uma cor na parte de trás do elemento.

A imagem resultante mostra a saída do código acima:

Etapa 5: estilo adicionado à lista “li”

Agora, acesse a lista de “ div ” recipiente com classe “ animal de estimação ' usando ' .pet-animal > li ” e aplique as propriedades mencionadas abaixo:

.animal de estimação > que {

visibilidade : escondido ;

opacidade : 0,2 ;

transição : visibilidade 0s , opacidade 0,5s linear ;

}

Aqui:

• O ' visibilidade ” O CSS é utilizado para definir a visibilidade do elemento sem alterar o layout de um documento, como oculto ou visível.
• “ opacidade ” especifica a transparência de um elemento.
• “ transição ” permite que os usuários alterem os valores das propriedades suavemente durante um determinado período:

Passo 6: Aplique a Pseudo Classe “hover”

Agora, aplique o “ flutuar ” na lista:

.animal de estimação : flutuar > que {

visibilidade : visível ;

opacidade : 1 ;

}

O ' :flutuar ” CSS é uma pseudo-classe que faz alterações em tempo de execução quando o ponteiro do mouse é movido sobre o elemento. Torne uma lista visível usando o botão “ visibilidade ” e defina a transparência usando o botão “ opacidade ” Propriedades CSS à lista ao passar o mouse:

Pode-se observar que aplicamos com sucesso a transição no “ tela ' propriedade.

Conclusão

A transição CSS não pode ser aplicada diretamente ao “ tela ' propriedade. No entanto, pode ser aplicado de forma alternativa. Para isso, adicione a tag list no documento HTML, acesse a lista pelo nome da tag e aplique “ transição ”, “ opacidade ', e ' visibilidade ” Propriedades CSS na lista. Em seguida, utilize o “ : flutuar ” pseudoclasse e defina o valor de visibilidade como “ visível ”. Esta postagem explicou como a transição é aplicada à propriedade de exibição do CSS.