Clavier interactif

1,151 sergioarmijo30

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 October 2023

Tableau de bord interactif

24 September 2025

Code graphique interactif SVG Dragon

27 January 2026

Jeu HTML Elastic Face : L'art interactif de David Li

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;
      }
    }