Interfaz de usuario de ondulación 3D

1,304 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

28 November 2024

Fondo animado de Matrix

20 November 2025

Plantilla HTML de cuenta regresiva de autodestrucción

5 December 2024

Un código de logicalcode2

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>

CSS