Categoría · Widgets Nivel de Dificultad · Principiante Publicado el · 22 de agosto de 2025

Insignia de Notificación Animada

Insignia de notificación moderna con animaciones suaves, estilos personalizables y funciones interactivas, perfecta para notificaciones y alertas de usuarios.

#notification #badge #animation #alert #ui

Diseño Responsivo

Sí

Soporte para Modo Oscuro

líneas

484

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

200px

Resumen

Insignia de notificación moderna con animaciones suaves, estilos personalizables y funciones interactivas, perfecta para notificaciones y alertas de usuarios.

Cómo usarlo

Copia el marcado HTML en tu página.
Pega el CSS en tu hoja de estilos y verifica que los selectores coincidan con el HTML.
Pega el JavaScript y cárgalo después del HTML.
Ajusta espaciados, colores y textos para tu sistema de diseño.

Consejos de personalización

Renombra las clases para evitar conflictos con tu CSS existente.
Reemplaza colores fijos por variables CSS para facilitar el tema.
Comprueba el diseño en 320px, 768px y 1024px.

HTML

líneas

CSS

302

líneas

JavaScript

135

líneas

                <div class="notification-badge-container">
  <div class="notification-badge-demo">
    <div class="demo-header">
      <h2>Insignias de Notificación</h2>
      <p>Insignias interactivas con animaciones</p>
    </div>
    
    <div class="badges-wrapper">
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">🔔</span>
          <span class="notification-badge" id="notificationBadge1">3</span>
        </div>
        <div class="badge-label">Mensajes</div>
      </div>
      
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">📧</span>
          <span class="notification-badge success" id="notificationBadge2">5</span>
        </div>
        <div class="badge-label">Correos</div>
      </div>
      
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">🛒</span>
          <span class="notification-badge warning" id="notificationBadge3">12</span>
        </div>
        <div class="badge-label">Carrito</div>
      </div>
      
      <div class="badge-item">
        <div class="icon-wrapper">
          <span class="icon">❤️</span>
          <span class="notification-badge error" id="notificationBadge4">7</span>
        </div>
        <div class="badge-label">Me gusta</div>
      </div>
    </div>
    
    <div class="controls-wrapper">
      <button class="btn btn-primary" id="addNotificationBtn">Agregar Notificación</button>
      <button class="btn btn-secondary" id="clearNotificationsBtn">Limpiar Todo</button>
    </div>
  </div>
</div>

              

                .notification-badge-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  padding: 40px 20px;
  border-radius: 20px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.notification-badge-demo {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.demo-header {
  text-align: center;
  margin-bottom: 30px;
}

.demo-header h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 2rem;
  font-weight: 700;
}

.demo-header p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}

.badges-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.icon-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.icon-wrapper:hover {
  background: #f1f5f9;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.icon {
  font-size: 2rem;
  transition: all 0.3s ease;
}

.icon-wrapper:hover .icon {
  transform: scale(1.1);
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  animation: bounceIn 0.6s ease-out;
}

.notification-badge.success {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  box-shadow: 0 3px 10px rgba(39, 174, 96, 0.3);
}

.notification-badge.warning {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  box-shadow: 0 3px 10px rgba(243, 156, 18, 0.3);
}

.notification-badge.error {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
}

.notification-badge.pulse {
  animation: pulse 2s infinite;
}

.notification-badge.bounce {
  animation: bounce 0.6s ease-out;
}

.badge-label {
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.icon-wrapper:hover .badge-label {
  color: #333;
  transform: translateY(-2px);
}

.controls-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f1f5f9;
  color: #666;
}

.btn-secondary:hover {
  background: #e2e8f0;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(0, -10px);
  }
  60% {
    transform: translate(0, -5px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

.badge-item {
  animation: fadeIn 0.6s ease-out;
}

.badge-item:nth-child(1) { animation-delay: 0.1s; }
.badge-item:nth-child(2) { animation-delay: 0.2s; }
.badge-item:nth-child(3) { animation-delay: 0.3s; }
.badge-item:nth-child(4) { animation-delay: 0.4s; }@media (max-width: 768px) {
  .notification-badge-container {
    padding: 30px 15px;
  }
  
  .notification-badge-demo {
    padding: 25px;
  }
  
  .demo-header h2 {
    font-size: 1.7rem;
  }
  
  .badges-wrapper {
    gap: 20px;
  }
  
  .icon-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .icon {
    font-size: 1.7rem;
  }
  
  .notification-badge {
    width: 25px;
    height: 25px;
    font-size: 0.7rem;
  }
  
  .controls-wrapper {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .badges-wrapper {
    gap: 15px;
  }
  
  .icon-wrapper {
    width: 60px;
    height: 60px;
  }
  
  .icon {
    font-size: 1.5rem;
  }
  
  .badge-label {
    font-size: 0.8rem;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {

  const notificationBadges = document.querySelectorAll('.notification-badge');
  const addNotificationBtn = document.getElementById('addNotificationBtn');
  const clearNotificationsBtn = document.getElementById('clearNotificationsBtn');
  const iconWrappers = document.querySelectorAll('.icon-wrapper');

  addNotificationBtn.addEventListener('click', function() {

    notificationBadges.forEach(badge => {
      const currentCount = parseInt(badge.textContent);
      const newCount = currentCount + Math.floor(Math.random() * 3) + 1;
      updateBadgeCount(badge, newCount);

      badge.classList.add('bounce');
      setTimeout(() => {
        badge.classList.remove('bounce');
      }, 600);
    });

    notificationBadges.forEach(badge => {
      badge.classList.add('pulse');
      setTimeout(() => {
        badge.classList.remove('pulse');
      }, 2000);
    });
  });

  clearNotificationsBtn.addEventListener('click', function() {

    notificationBadges.forEach(badge => {
      updateBadgeCount(badge, 0);

      badge.style.animation = 'fadeOut 0.3s ease';
      setTimeout(() => {
        badge.style.animation = '';
      }, 300);
    });

    showMessage('¡Todas las notificaciones han sido limpiadas!', 'success');
  });

  iconWrappers.forEach((wrapper, index) => {
    wrapper.addEventListener('click', function() {
      const badge = notificationBadges[index];
      const currentCount = parseInt(badge.textContent);
      
      if (currentCount > 0) {

        const newCount = currentCount - 1;
        updateBadgeCount(badge, newCount);

        badge.classList.add('bounce');
        setTimeout(() => {
          badge.classList.remove('bounce');
        }, 600);

        const iconName = wrapper.querySelector('.icon').textContent;
        showMessage(`Notificación descartada de \${iconName}`, 'info');
      } else {

        showMessage('No hay notificaciones para descartar', 'warning');
      }
    });
  });

  function updateBadgeCount(badge, count) {
    if (count > 0) {
      badge.textContent = count > 99 ? '99+' : count;
      badge.style.display = 'flex';
    } else {
      badge.textContent = '0';
      badge.style.display = 'none';
    }
  }

  function showMessage(text, type) {

    const message = document.createElement('div');
    message.className = `message \${type}`;
    message.textContent = text;
    message.style.cssText = `
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: \${getMessageColor(type)};
      color: white;
      padding: 15px 25px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.3s ease;
      font-weight: 500;
    `;
    
    document.body.appendChild(message);

    setTimeout(() => {
      message.style.transform = 'translateY(0)';
      message.style.opacity = '1';
    }, 100);

    setTimeout(() => {
      message.style.transform = 'translateY(20px)';
      message.style.opacity = '0';
      setTimeout(() => {
        document.body.removeChild(message);
      }, 300);
    }, 3000);
  }

  function getMessageColor(type) {
    switch(type) {
      case 'success':
        return 'linear-gradient(135deg, #27ae60 0%, #2ecc71 100%)';
      case 'warning':
        return 'linear-gradient(135deg, #f39c12 0%, #e67e22 100%)';
      case 'error':
        return 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)';
      default:
        return 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
    }
  }

  setTimeout(() => {
    notificationBadges.forEach(badge => {
      badge.classList.add('pulse');
      setTimeout(() => {
        badge.classList.remove('pulse');
      }, 2000);
    });
  }, 1000);
});

              

Compatibilidad del Navegador

Chrome

>= 50

Firefox

>= 45

Safari

>= 10

Edge

>= 15

Convertidor de Markdown a HTML

Generador de Políticas de Privacidad

Insignia de Notificación Animada

Vista Previa en Vivo

Resumen

Cómo usarlo

Consejos de personalización

Compatibilidad del Navegador

Fragmentos de Código Relacionados

Precios de Atracción Magnética

Botón de Volver al Inicio Animado

Interfaz de Chat Animada

Explora packs de plantillas