Animación de carga CSS con imagen de fondo

1,221 byby.createsite

Abrir en el editor Publica tu código

Animación de carga CSS con imagen de fondo

Recomendado

29 January 2026

Lienzo HTML del juego de carreras de karts con JavaScript

17 September 2024

Inicio de sesión simple

13 May 2025

Página de inicio de sesión de Roblox HTML CSS

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    /* css_foundation */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background: url("./thumb.jpg") no-repeat center center;
      background-color: #000;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #272822;
      color: #F8F8F2;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 18px;
      padding: 20px;
      border-radius: 8px;
      white-space: pre-line;
      text-align: left;
      line-height: 1.6;
      max-height: 25%;
      max-width: 75%;
      width: 75%;
      height: 25%;
      top: 15%;
      overflow-y: hidden;
      box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector {
      color: #F92672;
    }

.property {
      color: #66D9EF;
    }

.value-number {
      color: #AE81FF;
    }

.value-string {
      color: #E6DB74;
    }

.value-color {
      color: #A6E22E;
    }

.function {
      color: #A6E22E;
    }

.animation-container {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

/* loading-element */
    .loading-element {
      width: 20vmin;
      height: 20vmin;
      border-radius: 50%;
      background-color: #FF69B4;
      animation: loading-animation 1s linear infinite;
    }

/* 
    O movimento de expansão da esfera em miniatura é uma metáfora visual para a nossa capacidade de expandir nossos horizontes e sonhos.
    */
    @keyframes loading-animation {
      0% {
        width: 10vmin;
        height: 10vmin;
      }
      50% {
        width: 25vmin;
        height: 25vmin;
      }
      100% {
        width: 10vmin;
        height: 10vmin;
      }
    }

.loading-element::before,
    .loading-element::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10vmin;
      height: 0.5vmin;
      background-color: #FF69B4;
      animation: ripple-animation 1s linear infinite;
    }

@keyframes ripple-animation {
      0% {
        height: 0.5vmin;
      }
      50% {
        height: 5vmin;
      }
      100% {
        height: 0.5vmin;
      }
    }

/* micro-detail: uma alteração na cor da esfera em miniatura após a segunda rolagem */
    .loading-element {
      animation-delay: 2s;
    }
  </style>
</head>
<body>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

body{
    background: rgb(251, 247, 247);
      overflow-x: hidden; }

}

.band{
    color: white;
    background-color: blueviolet;
    height: 30px ;

}

.band h1{
    padding: 10px;
    font: 1em sans-serif;
    text-align: center;
}

.logo{
    font-family: sans-serif;
    font-size: large;
    text-align: center;
    padding: 30px;

}

nav{
    height: 80px;
    background-color: rgb(251, 251, 251)
}
.hero{
    height: 400px;
    background-color: white;
    display: flex;
}

.hero .container{
display: flex;
height: 98%;
width: 100%;

}

.container img{
    width: 100%;
}

.content{
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-top: -200px;
}

.content button{
height: 40px;
width: 150px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: white;
color: black;
border:none;
border-radius: 3px;
}

.title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:130px;
}

.title h1{
    font-family: sans-serif;
    font-size: 25px;
    margin-bottom: 50px;
}

.product{
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    height: 320px;
    width: 200px;
    flex-direction: column;
    display: flex;
}
.product img{
    height: 200px;
}
.product button{
    height: 50px;
    width: 200px;
    background-color: rgb(51, 47, 47);
    color: #ffffff;
    border: none;

}
.product h2{
margin-top: 20px;
color: rgb(0, 0, 0);
font-family: sans-serif;
font-size: 15px;
margin-bottom: 20px;
text-align: center;

}
.product p{
    font-family: sans-serif;
    font-size: 15px;
    position: relative;
    color: rgb(0, 0, 0);
    left: 160px;
    
}

.product-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.product {
    margin: 10px;
}