Galería de desplazamiento infinito CSS de CodePen Home

942 kevekıbhack

Abrir en el editor Publica tu código

Galería de desplazamiento infinito CSS de CodePen Home

Recomendado

23 August 2025

Plataforma Educativa | Desarrollo y Diseño Web

28 September 2025

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

25 November 2025

Juego de combinación de palos - Código fuente del juego HTML5

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive AI Bot</title>
    <style>
        @layer properties {
            @property --elh {
                syntax: '<number>';
                inherits: true;
                initial-value: 1;
            }
            @property --erx {
                syntax: '<percentage>';
                inherits: true;
                initial-value: 0%;
            }
            @property --fx {
                syntax: '<percentage>';
                inherits: true;
                initial-value: 0%;
            }
            @property --ealw {
                syntax: '<number>';
                inherits: true;
                initial-value: 1;
            }
            @property --earw {
                syntax: '<number>';
                inherits: true;
                initial-value: 1;
            }
            @property --erh {
                syntax: '<number>';
                inherits: true;
                initial-value: 1;
            }
            @property --mh {
                syntax: '<number>';
                inherits: true;
                initial-value: 1;
            }
            @property --mw {
                syntax: '<number>';
                inherits: true;
                initial-value: 1;
            }
            @property --glow {
                syntax: '<number>';
                inherits: true;
                initial-value: 0;
            }
            @property --pulse {
                syntax: '<number>';
                inherits: true;
                initial-value: 1;
            }
        }

:root {
            --surface: #111;
            --c: white;
            --c2: #9ae3dc;
            --c3: magenta;
            --c4: #00ffaa;
            --voice-color: #9ae3dc;
        }

* {
            box-sizing: border-box;
        }

body {
            display: grid;
            place-items: center;
            height: 100dvh;
            background: var(--surface);
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }

.container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

.ai-bot {
            scale: 4.2;
            width: 34px;
            aspect-ratio: 1;
            position: relative;
            display: grid;
            place-items: center;
            animation: 
                blink 2.4s ease infinite, 
                move-head 4.2s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%) infinite, 
                mouth 1.2s ease-in infinite,
                pulse 3s ease-in-out infinite;
            
            .head {
                background: linear-gradient(var(--c) 80%, color-mix(in srgb, var(--c), black 30%), var(--c));
                border-radius: .375rem;
                position: absolute;
                width: 28px;
                height: 20px;
                filter: drop-shadow(0 0 calc(5px * var(--glow)) var(--c4));
                
                &:before, &:after {
                    content: '';
                    position: absolute;
                    left: -4px;
                    top: 6px;
                    width: 2px;
                    height: 8px;
                    background: var(--c);
                    border-radius: 2px 0 0 2px;
                    scale: var(--ealw, 1) 1;
                    filter: drop-shadow(0 0 calc(3px * var(--glow)) var(--c4));
                }
                &:after {
                    right: -4px;
                    left: unset;
                    border-radius: 0 2px 2px 0;
                    scale: var(--earw, 1) 1;
                }
                
                .face {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: absolute;
                    inset: 0 3px;
                    background: var(--surface);
                    translate: var(--fx) 0;
                    border-radius: 4px;
                    padding: 4px 4px 2px 4px;
                    gap: 3px;
                    scale: var(--pulse);
                    
                    &:before {
                        content: '';
                        background: var(--c);
                        position: absolute;
                        height: 1px;
                        width: 10px;
                        top: -2px;
                        border-radius: 2px 2px 0 0;
                        mask: radial-gradient(circle at 50% 100%, transparent 45%, black 45%);
                        filter: drop-shadow(0 0 calc(2px * var(--glow)) var(--c4));
                    }
                    
                    .eyes {
                        display: flex;
                        height: 8px;
                        gap: 6px;
                        &:before, &:after {
                            content: '';
                            width: 5px;
                            height: 8px;
                            scale: 1 var(--elh);
                            filter: drop-shadow(0 0 calc(3px * var(--glow)) var(--c2));
                            background: repeating-linear-gradient(to bottom, var(--c), var(--c) .25px, transparent .25px, transparent .6px), linear-gradient(to bottom, var(--c3), transparent 60%), var(--c2);
                            border-radius: 1px;
                            translate: var(--erx) 0;
                        }
                        
                        &:after {
                            scale: 1 var(--erh);
                            translate: var(--erx) 0;
                        }
                    }
                    
                    .mouth {
                        width: 10px;
                        height: 2px;
                        background: var(--c2);
                        border-radius: 0 0 1px 1px;
                        filter: drop-shadow(0 0 calc(3px * var(--glow)) var(--c2));
                        scale: var(--mw, 1) var(--mh, 1);
                    }
                }
            }
        }

@layer animations {
            @keyframes blink {
                from, 10%, to { 
                    --elh: 1;
                    --erh: 1;
                }
                2% {
                    --elh: .2;
                }
                8% {
                    --erh: .1;
                }
            }

@keyframes mouth {
                from, 30%, 70%, to { 
                    --mh: 1;
                    --mw: 1;
                }
                20% {
                    --mh: .5;
                }
                60% { 
                    --mw: .7;
                }
            }

@keyframes move-head {
                from, 20%, 40% to { 
                    --erx: 0%;
                    --fx: 0%;
                    --ealw: 1;
                    --earw: 1;
                }
                10% {
                    --erx: 20%;
                    --fx: 10%;
                    --ealw: 1.5;
                    --earw: .5;
                }
                30% {
                    --erx: -20%;
                    --fx: -10%;
                    --ealw: .5;
                    --earw: 1.5;
                }
            }

@keyframes pulse {
                0%, 100% { --pulse: 1; }
                50% { --pulse: 1.05; }
            }

@keyframes glow {
                0%, 100% { --glow: 0; }
                50% { --glow: 1; }
            }

@keyframes voice {
                0%, 100% { 
                    --mh: 1;
                    --mw: 1;
                }
                20%, 80% {
                    --mh: 0.3;
                    --mw: 1.2;
                }
                40%, 60% {
                    --mh: 0.5;
                    --mw: 0.8;
                }
            }
        }

.voice-wave {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 40px;
            margin-top: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.voice-bar {
            width: 4px;
            height: 10px;
            background: var(--voice-color);
            border-radius: 2px;
            animation: voice-wave 1.4s ease-in-out infinite;
            transform-origin: bottom;
        }

.voice-bar:nth-child(1) { animation-delay: 0.1s; }
        .voice-bar:nth-child(2) { animation-delay: 0.2s; }
        .voice-bar:nth-child(3) { animation-delay: 0.3s; }
        .voice-bar:nth-child(4) { animation-delay: 0.4s; }
        .voice-bar:nth-child(5) { animation-delay: 0.3s; }
        .voice-bar:nth-child(6) { animation-delay: 0.2s; }
        .voice-bar:nth-child(7) { animation-delay: 0.1s; }

@keyframes voice-wave {
            0%, 100% { transform: scaleY(0.3); }
            50% { transform: scaleY(1.5); }
        }

.controls {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

button {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            background: var(--c2);
            color: #111;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
        }

button:hover {
            background: var(--c4);
            transform: translateY(-2px);
        }

.status {
            margin-top: 1rem;
            color: var(--c2);
            font-size: 0.9rem;
            text-align: center;
            min-height: 20px;
        }

.speech-bubble {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 0.8rem;
            max-width: 200px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.speech-bubble:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 10px 10px 0;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.7) transparent;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="ai-bot">
            <div class="head">
                <div class="face">
                    <div class="eyes"></div>
                    <div class="mouth"></div>
                </div>
            </div>
            <div class="speech-bubble" id="speechBubble">Hello! How can I help you?</div>
        </div>
        
        <div class="voice-wave" id="voiceWave">
            <div class="voice-bar"></div>
            <div class="voice-bar"></div>
            <div class="voice-bar"></div>
            <div class="voice-bar"></div>
            <div class="voice-bar"></div>
            <div class="voice-bar"></div>
            <div class="voice-bar"></div>
        </div>
        
        <div class="controls">
            <button id="listenBtn">Start Listening</button>
            <button id="talkBtn">Talk</button>
            <button id="glowBtn">Activate</button>
        </div>
        
        <div class="status" id="status"></div>
    </div>

Recomendado

Plataforma Educativa | Desarrollo y Diseño Web

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

Juego de combinación de palos - Código fuente del juego HTML5

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS