Animation de chargement CSS avec image d'arrière-plan

651 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Animation de chargement CSS avec image d'arrière-plan

Recommandé

26 August 2024

Icônes sociales avec reflets

21 July 2025

Page de destination de location de voiture

27 January 2025

Page de destination d'une agence de marketing numérique

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

Recommandé

Icônes sociales avec reflets

Page de destination de location de voiture

Page de destination d'une agence de marketing numérique

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS