LabEx
EntrarJunte-se

Técnicas CSS para Designs Visualmente Atraentes

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, vamos mergulhar no mundo da programação CSS e explorar diversas técnicas para aprimorar o design e o layout de páginas web. Através de uma série de exercícios e desafios, você aprenderá a usar seletores, propriedades e valores CSS para estilizar elementos HTML e criar páginas web visualmente atraentes. Ao final do laboratório, você terá adquirido uma base sólida em programação CSS e será capaz de aplicar seus novos conhecimentos para criar websites impressionantes.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Donut Spinner (Carregador de Donut)

index.html e style.css já foram fornecidos na VM.

Para indicar o carregamento de conteúdo, crie um carregador de donut (donut spinner) com uma border semi-transparente para todo o elemento. Exclua um lado para servir como o indicador de carregamento do donut. Em seguida, defina e use uma animação apropriada, usando transform: rotate() para rotacionar o elemento. Aqui está um exemplo de código em HTML e CSS:

HTML:

<div class="donut"></div>

CSS:

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Donut Spinner. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.