Teclado interativo

504 sergioarmijo30

Abrir no Editor Publique Seu Código

Recomendado

24 September 2025

Código gráfico SVG interativo do dragão

24 September 2025

Código gráfico SVG interativo do dragão

HTML

CSS

/* Stylos.css - Estilos para el simulador de teclas interactivo */
    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #1f1c2c, #928dab);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      color: white;
      text-align: center;
    }

.container {
      background: rgba(0, 0, 0, 0.3);
      padding: 2rem 3rem;
      border-radius: 20px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
      transition: all 0.2s ease-in-out;
    }

.key {
      font-size: 6rem;
      margin: 1rem 0;
      padding: 1rem 2rem;
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid white;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      display: inline-block;
      animation: pop 0.2s ease-in-out;
    }

.info {
      font-size: 1.2rem;
      margin-top: 1rem;
      opacity: 0.8;
    }

@keyframes pop {
      0% {
        transform: scale(0.9);
        opacity: 0.5;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

Recomendado

Código gráfico SVG interativo do dragão

Código gráfico SVG interativo do dragão

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS