設計未來：具有 Glassmorphism、Neumorphism 和免密碼登入功能的高階登陸頁面-css教學-PHP中文網

首頁

web前端

css教學

設計未來：具有 Glassmorphism、Neumorphism 和免密碼登入功能的高階登陸頁面

Susan Sarandon

Dec 01, 2024 pm 10:57 PM

簡介
在快速發展的網頁設計世界中，創造身臨其境的功能性使用者體驗比以往任何時候都更重要。無論您是針對行動裝置還是桌面裝置進行開發，使用者都期望介面不僅具有令人驚嘆的視覺效果，而且易於存取。這就是 Glassmorphism、Neumorphism 和免密碼登入等創新 UI/UX 概念發揮作用的地方。

在本文中，我們將探討如何使用這些設計原則製作尖端的登陸頁面。從平滑的暗/亮模式切換到響應式佈局和視覺上引人注目的滾動講述，每項功能都針對現代美學和可用性進行了最佳化。

登陸頁的主要功能

玻璃態：增加深度與透明度

玻璃形狀是一種設計技術，使用模糊的半透明背景來創造類似玻璃的效果。這種風格為使用者介面帶來了深度感和現代感，使元素脫穎而出，但又不會讓使用者感到不知所措。

實作亮點：

背景模糊：套用 CSS 背景濾鏡來實現磨砂玻璃效果。
半透明：利用 RGBA 顏色確保元素與背景自然融合。
Shadow Play：使用盒子陰影來實現深度和分離，創造出優質的外觀。

CSS 的外觀如下：

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

Neumorphism：極簡主義的柔和 3D 效果

Neumorphism 專注於柔和的陰影和高光，為 UI 元素提供偽 3D 外觀。這種技術將扁平化設計與現實主義相結合，在美學吸引力和簡潔性之間取得了平衡。

實作亮點：

內部和外部陰影：使用 CSS box-shadow 製作逼真的按鈕和卡片效果。
微妙的懸停效果：結合縮放動畫以實現互動性。
淺色/深色模式相容性：優化了兩個主題的對比度以實現可訪問性。

Neumorphic 按鈕範例：

.cta-button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  border-radius: 25px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2), -6px -6px 12px rgba(255, 255, 255, 0.8);
  padding: 12px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

免密碼登入：簡化驗證

面容 ID 和簡訊登入等現代身分驗證方法不僅增強了安全性，還提高了使用者便利性。在我們的登陸頁面上，使用者可以透過視覺上吸引人的方式與這些功能互動。

實作亮點：

回饋動畫：新增回饋訊息以實現更好的使用者互動。
動態懸停效果：反白顯示帶有縮放動畫的登入選項。
響應式設計：確保跨裝置的可用性。

用於登入互動回饋的 JavaScript 片段：

loginButtons.forEach((button) => {
  button.addEventListener('click', () => {
    const feedback = document.createElement('div');
    feedback.textContent = `${button.textContent} Attempting...`;
    feedback.style.cssText = `
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 10px 20px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      border-radius: 10px;
      z-index: 1000;
    `;
    document.body.appendChild(feedback);
    setTimeout(() => feedback.remove(), 2000);
  });
});

響應式設計：針對每個螢幕進行最佳化
從桌上型電腦到行動設備，每個細節都經過精心調整以提高響應速度。佈局無縫適應，確保在不同的螢幕尺寸上獲得最佳的使用者體驗。

媒體查詢範例：

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

透過滾動講述增強互動性

旅程部分利用滾動講述來吸引用戶探索我們的設計故事。流暢的動畫和交錯的效果營造出出身臨其境的體驗。

主要特點：