Página com imagem de fundo e logo centralizado horizontalmente e verticalmente, piscando

Enviado por mrab em 24. Janeiro 2024 - 3:24

Embarque conosco nesta jornada de design web, onde mergulhamos nas linguagens HTML5 e CSS3 para criar uma experiência visualmente envolvente. Descubra como centralizar horizontal e verticalmente uma imagem de fundo, dando destaque a um logo pulsante que ganha vida com o uso estratégico de keyframes.

Link para download do código

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página com Imagem de Fundo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-image: url('fundo2.jpg'); /* Substitua pelo caminho da sua imagem */
      background-size: cover;
      background-position: center;
      font-family: Arial, sans-serif;
      color: #ffffff; 
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh; /* Define a altura da tela */
    }

.logo img {
      max-width: 100%;
      height: auto;
      opacity: .2; /* Inicialmente, define a opacidade como 20% */
      animation: fadeInOut 5s infinite; /* Define a animação com uma duração de 25 segundos e repetição infinita */
    }

/* Define a animação utilizando @keyframes */
    @keyframes fadeInOut {
      20%, 100% {
        opacity: .2; /* Opacidade inicial e final em %20 */
      }
      20%, 80% {
        opacity: 1; /* Opacidade em 100% durante o meio da animação */
      }
    }
  </style>
</head>
<body>   
  <div class="logo">
    <img src="sua-logo.png" alt="Logo"><!- Substitua pelo caminho do logo em .png ou .svg -->
  </div>
</body>
</html>

Seção:

HTML/CSS