Interfaz de usuario de ondulación 3D

1,303 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

25 August 2024

Sistema solar 3D CSS

17 May 2025

sociedad moderna

25 March 2025

Un código de andrej.social.network

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