设计未来：具有 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;
}

通过滚动讲述增强互动性

旅程部分利用滚动讲述来吸引用户探索我们的设计故事。流畅的动画和交错的效果营造出身临其境的体验。

主要特点：