构建简单的表单颤振

在Web开发中，表单是一个不可或缺的组件。本文将介绍如何使用HTML和CSS构建简单的表单颤振。

HTML

HTML是构建Web页面的基本语言。我们将使用HTML创建表单的结构。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email：</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  
  <button type="submit">提交</button>
</form>

以上代码创建了一个包含三个输入字段和一个提交按钮的表单。每个输入字段都使用<input>元素创建，其中type属性指定了输入类型。<label>元素用于标记每个输入字段，for属性与相应的输入字段id属性相关联。

CSS

CSS是用于样式化Web页面的语言。我们将使用CSS为表单添加颤抖效果。

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: #5c5c5c;
  box-shadow: 0 0 5px #5c5c5c;
  outline: none;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  color: #fff;
  background-color: #007bff;
  border: none;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

以上CSS代码添加了一些基本样式到表单元素。display:flex将表单元素设置为flex容器，align-items:center将子元素垂直居中。input元素添加了一些基本样式，如边框、圆角和过渡效果。input:focus样式在输入字段获得焦点时添加了颤抖效果。button元素添加了一些基本样式，如颜色、背景色、边框半径和过渡效果。:hover样式在鼠标悬停时添加了背景颜色。

结论

以上HTML和CSS代码创建了一个简单的表单颤抖效果。你可以根据需要调整样式以改变表单的外观和行为。