Animación de carga CSS con ondas y ondulaciones

889 byby.createsite

Abrir en el editor Video Publica tu código

Animación de carga CSS con ondas y ondulaciones

Recomendado

26 August 2025

Plantilla HTML para sitio web de películas

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

31 January 2026

Casa secundaria con fondo colorido

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

Plantilla HTML para sitio web de películas

Reproductor de juegos Flash con emulador Ruffle

Casa secundaria con fondo colorido

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS