Galería de desplazamiento infinito CSS de CodePen Home

1,461 kevekıbhack

Abrir en el editor Publica tu código

Galería de desplazamiento infinito CSS de CodePen Home

Recomendado

30 August 2024

Efecto de paralaje del control deslizante

20 March 2024

Plantilla de página de destino HTML con animaciones

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>

CSS