Animação de carregamento CSS com ondas e ondulações

738 byby.createsite

Abrir no Editor Video Publique Seu Código

Animação de carregamento CSS com ondas e ondulações

Recomendado

23 August 2025

Modelo HTML para loja de comércio eletrônico Tailwind CSS

23 November 2024

Efeito de pairar no ícone

5 December 2025

Formulário HTML para entrada de número de telefone com botão de adição

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ephemeral Echoes</title>
    <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 {
            width: 10px;
            height: 10px;
            background-color: #E6DB74;
            border-radius: 50%;
            position: absolute;
            transform-origin: center;
            animation: loading-animation 1s linear infinite;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

@keyframes loading-animation {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.5);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

.wave {
            position: absolute;
            width: 100%;
            height: 100px;
            background-color: #F92672;
            border-radius: 10px;
            clip-path: polygon(0 0, 0 100%, 80% 100%, 100% 50%, 80% 0, 0 0);
            animation: wave-animation 2s linear infinite;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.wave::before,
        .wave::after {
            content: "";
            width: 50%;
            height: 50px;
            background-color: #66D9EF;
            position: absolute;
            transform-origin: top center;
        }

.wave::before {
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }

.wave::after {
            right: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
        }

@keyframes wave-animation {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.3);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

.ripple {
            position: absolute;
            width: 100%;
            height: 100px;
            background-color: #AE81FF;
            border-radius: 10px;
            clip-path: polygon(0 0, 0 100%, 80% 100%, 100% 50%, 80% 0, 0 0);
            animation: ripple-animation 2s linear infinite;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.ripple::before {
            content: "";
            width: 20%;
            height: 20px;
            background-color: #66D9EF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: ripple-effect 2s linear infinite;
        }

@keyframes ripple-animation {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.5);
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

@keyframes ripple-effect {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(0);
            }
        }
    </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;
}

Recomendado

Modelo HTML para loja de comércio eletrônico Tailwind CSS

Efeito de pairar no ícone

Formulário HTML para entrada de número de telefone com botão de adição

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS