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

822 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

29 July 2025

Liste des cartes d'entreprise avec image de marque et marketing

26 June 2024

Formulaire de connexion/inscription à double curseur

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background:url("./thumb.jpg") no-repeat center center;
            background-color: black;
            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 {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #333;
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0% {
                transform: scale(1);
                background-color: #333;
            }
            50% {
                transform: scale(1.2);
                background-color: #555;
            }
            100% {
                transform: scale(1);
                background-color: #333;
            }
        }

.loading-element::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 20px solid #ccc;
            border-top: 20px solid #fff;
            animation: loading-animation 1s linear infinite;
        }

.loading-element::before {
            z-index: 2;
        }

.loading-element::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #666;
            opacity: 0.5;
            transform: scale(1);
            animation: loading-animation 1s linear infinite;
        }

@keyframes loading-animation {
            0% {
                transform: scale(1);
                background-color: #666;
            }
            50% {
                transform: scale(1.2);
                background-color: #777;
            }
            100% {
                transform: scale(1);
                background-color: #666;
            }
        }

.loading-element .line-1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            animation: loading-animation 1s linear infinite;
        }

.loading-element .line-2 {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            animation: loading-animation 1s linear infinite;
        }

.loading-element .line-3 {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #fff;
            animation: loading-animation 1s linear infinite;
        }

@media (orientation: portrait) {
            .loading-element {
                transform: scale(0.5);
            }
            .loading-element::before {
                width: 50%;
                height: 50%;
                border: 10px solid #ccc;
                border-top: 10px solid #fff;
            }
            .loading-element::after {
                transform: scale(0.5);
            }
            .loading-element .line-1 {
                width: 50%;
            }
            .loading-element .line-2 {
                width: 50%;
            }
            .loading-element .line-3 {
                width: 50%;
            }
        }

</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é

Modèle HTML de joueur de jeu Ruffle Flash

Liste des cartes d'entreprise avec image de marque et marketing

Formulaire de connexion/inscription à double curseur

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS