Animação de carregamento CSS com imagem de fundo

820 byby.createsite

Abrir no Editor Video Publique Seu Código

Animação de carregamento CSS com imagem de fundo

Recomendado

16 January 2026

Incorpore jogos em Flash com o Ruffle Player

15 September 2024

Menu de navegação do Coreboot

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

Animação de carregamento CSS com imagem de fundo

Recomendado

Incorpore jogos em Flash com o Ruffle Player

Formulário de login animado

Menu de navegação do Coreboot

HTML

CSS

JS

Recomendado

Incorpore jogos em Flash com o Ruffle Player

Formulário de login animado

Menu de navegação do Coreboot

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS