Interfaz de usuario de ondulación 3D

Abrir en el editor Publica tu código

Recomendado

6 November 2024

Panel de administración de AdminHub v2.1

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Gelişmiş Ripple UI</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <style>
    :root {
      --bg: #0d1117;
      --fg: #ffffff;
      --glass: rgba(255, 255, 255, 0.05);
      --blur: 15px;
    }

body.light {
      --bg: #f5f5f5;
      --fg: #222;
      --glass: rgba(0, 0, 0, 0.05);
    }

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      height: 100vh;
      background: var(--bg);
      color: var(--fg);
      font-family: 'Segoe UI', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, color 0.3s;
    }

.container {
      display: flex;
      gap: 20px;
      padding: 20px;
      background: var(--glass);
      border-radius: 16px;
      backdrop-filter: blur(var(--blur));
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

.btn-glass {
      position: relative;
      overflow: hidden;
      padding: 14px 24px;
      font-size: 16px;
      border: none;
      border-radius: 10px;
      background: var(--glass);
      color: var(--fg);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: transform 0.2s;
    }

.btn-glass:hover {
      transform: translateY(-2px);
    }

.btn-glass .fa {
      font-size: 18px;
    }

.ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      opacity: 0.4;
      pointer-events: none;
      background: currentColor;
    }

@keyframes ripple-effect {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }

/* Tooltip */
    .btn-glass::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 130%;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 6px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      white-space: nowrap;
    }

.btn-glass:hover::after {
      opacity: 1;
    }

/* Dark Mode Toggle */
    .toggle-mode {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--glass);
      padding: 10px 14px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 18px;
      color: var(--fg);
      transition: 0.3s;
    }

.loading .fa {
      animation: spin 1s linear infinite;
    }

@keyframes spin {
      0% { transform: rotate(0); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>

buttons.forEach(({ icon, text, color, tooltip }) => {
    const btn = document.createElement("button");
    btn.className = "btn-glass";
    btn.style.color = color;
    btn.setAttribute("data-tooltip", tooltip);

const i = document.createElement("i");
    i.className = `fa ${icon}`;
    btn.appendChild(i);

const span = document.createElement("span");
    span.textContent = text;
    btn.appendChild(span);

// Ripple
    btn.addEventListener("click", e => {
      sound.currentTime = 0;
      sound.play();

// Ripple
      const ripple = document.createElement("span");
      ripple.className = "ripple";
      const rect = btn.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height);
      ripple.style.width = ripple.style.height = `${size}px`;
      ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
      ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
      ripple.style.animation = "ripple-effect 600ms ease-out";
      btn.appendChild(ripple);
      setTimeout(() => ripple.remove(), 600);

// Loading simülasyonu
      const iconEl = btn.querySelector(".fa");
      const originalClass = iconEl.className;
      iconEl.className = "fa fa-spinner";
      btn.classList.add("loading");

setTimeout(() => {
        iconEl.className = originalClass;
        btn.classList.remove("loading");
      }, 1500);
    });

app.appendChild(btn);
  });

// Dark Mode Toggle
  const modeBtn = document.getElementById("modeBtn");
  modeBtn.addEventListener("click", () => {
    document.body.classList.toggle("light");
    const icon = modeBtn.querySelector("i");
    icon.className = document.body.classList.contains("light") ? "fa fa-sun" : "fa fa-moon";
  });
</script>

</body>
</html>

Interfaz de usuario de ondulación 3D

Recomendado

Efecto de texto 3D

inicio de sesión 3d

Panel de administración de AdminHub v2.1

HTML

CSS

JS

Recomendado

Efecto de texto 3D

inicio de sesión 3d

Panel de administración de AdminHub v2.1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS