我们如何创建具有高级 UI/UX 的未来通讯注册表单-css教程-PHP中文网

首页

web前端

css教程

我们如何创建具有高级 UI/UX 的未来通讯注册表单

DDD

Nov 25, 2024 am 07:04 AM

创建一个引人入胜、视觉震撼且实用的时事通讯注册表单绝非易事。对于这个项目，我们开始摆脱典型的设计，旨在实现真正的创新：一种未来主义的、受时间机器启发的注册表单。以下是我们如何将其变为现实。

愿景与理念
目标很简单：制作一份时事通讯注册表单：

立即吸引注意力。
感觉有趣、互动且优质。
展示创意 UI/UX 设计的力量。

我们希望用户在订阅时感觉自己正在步入时光机。凭借发光的霓虹灯效果、动画过渡和完全响应式布局，设计需要在保持功能性的同时脱颖而出。

How We Created a Futuristic Newsletter Sign-Up Form with Premium UI/UX

第一步：核心结构

我们首先用 HTML 构建表单。其中包括：

标题部分：

设定主题的标题和副标题（时间旅行！）。

表格主体：

电子邮件输入字段。
触发交互式动画的“订阅”按钮。

页脚部分：

用于反馈的状态消息。
提交后可见进度的加载栏。

为了使其更具吸引力，我们在右上角添加了“给我买杯咖啡”按钮，巧妙地鼓励用户支持该项目。

<div>



<p>Step 2: Styling for a Futuristic Look</p>

<p>The design needed to feel high-tech, so we focused on:</p>

<ul>
<li>Neon Colors: Bright, glowing colors for a sci-fi vibe.</li>
<li>Smooth Transitions: Subtle animations to make the UI feel alive.</li>
<li>Responsive Design: Ensuring the form looked great on all devices.</li>
</ul>

<p>Key styles included:</p>

<p>A glowing neon effect using text-shadow.<br>
Background animations with @keyframes to create a dynamic atmosphere.<br>
Button hover effects for an interactive feel.</p>

<p>CSS Code<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(circle, #1b2735, #090a0f);
  color: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  animation: backgroundGlow 10s infinite alternate;
}

@keyframes backgroundGlow {
  0% {
    background: radial-gradient(circle, #1b2735, #090a0f);
  }
  100% {
    background: radial-gradient(circle, #202d42, #0d0f1a);
  }
}

.newsletter-container {
  position: relative;
  width: 80%;
  max-width: 500px;
  margin: 100px auto;
  background: linear-gradient(135deg, #2b5876, #4e4376);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.1);
}

.coffee-button {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.coffee-button img {
  width: 150px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.coffee-button:hover img {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(255, 223, 0, 0.5);
}

登录后复制

第 3 步：添加互动性

我们希望表单具有活力和响应能力，因此我们使用 JavaScript 来：

验证电子邮件字段。
显示动态消息（错误、成功、加载）。
动画加载栏以获取视觉反馈。

JavaScript 代码

const subscribeBtn = document.getElementById('subscribe-btn');
const emailInput = document.getElementById('email');
const statusMessage = document.querySelector('.status-message');

subscribeBtn.addEventListener('click', () => {
  const email = emailInput.value.trim();

  if (!email) {
    statusMessage.textContent = '⛔️ Please enter a valid email address!';
    statusMessage.style.color = '#ff4d4d';
    return;
  }

  statusMessage.textContent = '⏳ Calculating time coordinates...';
  statusMessage.style.color = '#ffc107';

  setTimeout(() => {
    statusMessage.textContent = '✅ Coordinates verified! Welcome to the future.';
    statusMessage.style.color = '#00ff99';
    emailInput.value = '';
  }, 3000);
});

登录后复制

第 4 步：测试和部署

为了确保流畅的体验：