Animación de carga CSS con imagen de fondo

902 byby.createsite

Abrir en el editor Publica tu código

Animación de carga CSS con imagen de fondo

Recomendado

22 April 2025

Un código de andres.stahr

14 April 2026

caja de arena hiper

30 January 2026

Cargador de juegos Flash con reproductor Ruffle

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;
}