Un código de Redllowge

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

13 June 2025

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: #000;
    color: #fff;
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
    overflow: hidden;
  }
  
  #animation-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  .alexa-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 1000px;
  }
  
  .alexa-ring {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    animation: float 6s ease-in-out infinite;
    transition: all 0.5s ease;
  }
  
  .alexa-ring::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #00a2ff;
    box-shadow: 0 0 50px #00a2ff;
    animation: pulse 2s linear infinite;
    transition: all 0.5s ease;
  }
  
  .alexa-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at center, #00a2ff, #0066cc);
    border-radius: 50%;
    box-shadow: 0 0 30px #00a2ff;
    transition: all 0.5s ease;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotateX(0) rotateY(0);
    }
    50% {
      transform: translateY(-20px) rotateX(10deg) rotateY(20deg);
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }
  
  @keyframes pulse-green {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }
  
  @keyframes ripple {
    0% {
      width: 0px;
      height: 0px;
      opacity: 1;
    }
    100% {
      width: 300px;
      height: 300px;
      opacity: 0;
    }
  }
  
  @keyframes fadeInOut {
    0% {
      opacity: 0;
      transform: translateY(20px) translateX(-50%) scale(0.8);
    }
    20% {
      opacity: 1;
      transform: translateY(0) translateX(-50%) scale(1);
    }
    80% {
      opacity: 1;
      transform: translateY(0) translateX(-50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(-20px) translateX(-50%) scale(0.8);
    }
  }
  
  @keyframes search-appear {
    0% {
      opacity: 0;
      transform: translateX(-50%) scale(0.8) rotateX(-30deg);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) scale(1) rotateX(0deg);
    }
  }

Un código de Redllowge

Recomendado

Un código de Metehan

Un bucle cuadrático con CSS

estado de flujo

HTML

CSS

JS

Recomendado

Un código de Metehan

Un bucle cuadrático con CSS

estado de flujo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS