css3发光搜索表单分享

CSS3发光搜索表单分享是一种简单而有趣的CSS3特效，可以为搜索表单增加闪亮的发光效果，提高用户体验和网站的视觉吸引力。以下是攻略的详细说明：

确定HTML结构

首先，需要在HTML中添加一个搜索表单的结构，例如：

<form>
  <input type="text" placeholder="Search...">
  <button type="submit">Search</button>
</form>

这里我们使用了一个input文本框和一个submit提交按钮。

添加样式

接下来，我们需要为搜索表单添加CSS样式，使其产生闪亮的发光效果。可以使用CSS3的box-shadow属性来实现：

form  {
  position: relative;
  display: inline-block;
}

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: #f2f2f2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}

input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.2), 0 0 80px rgba(0, 0, 0, 0.1);
}

button[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}

button[type="submit"]:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.2), 0 0 80px rgba(0, 0, 0, 0.1);
}

上述代码中，我们首先为form元素设置了position: relative属性，使内部的input和button元素可以通过position: absolute属性来相对于form元素进行定位。

其次，我们为输入框和提交按钮分别设置了相应的样式，其中box-shadow属性产生了发光的效果。需要注意的是，我们在input元素上添加了transition属性，使其在切换box-shadow效果时产生缓动的动画效果。

添加JavaScript交互效果

最后，我们可以为搜索表单添加JavaScript交互效果，使其在输入框获得焦点时自动放大发光效果，提高交互效果和视觉体验。以下是一个简单的JavaScript代码示例：

const input = document.querySelector('input[type="text"]');
input.addEventListener('focus', function() {
  this.style.transform = 'scale(1.1)';
});
input.addEventListener('blur', function() {
  this.style.transform = 'scale(1)';
});

上述代码中，我们首先获取了搜索表单中的input元素，并为其添加了两个事件监听器，分别在焦点获得和失去的时候改变输入框的缩放比例，从而产生闪亮的发光效果。

示例说明

以下是两个使用CSS3发光搜索表单分享的示例，分别演示了不同样式和交互效果：

1. 示例1：使用渐变色背景和旋转动画

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 255, 255, 0.5), 0 0 120px rgba(255, 255, 255, 0.3);
  transform: rotate(10deg);
}

该示例中使用了渐变色背景和旋转动画效果，当输入框获得焦点时会自动旋转10度，同时闪亮的发光效果更加明显。

1. 示例2：使用阴影效果和鼠标hover效果

input[type="text"] {
  padding: 10px;
  border: none;
  border-bottom: 2px solid #ccc;
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

input[type="text"]:focus {
  outline: none;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

button[type="submit"] {
  padding: 10px 20px;
  background-color: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

button[type="submit"]:hover {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

该示例中使用了更加简单的样式和交互效果，当鼠标悬停在输入框和提交按钮上时会产生更明显的阴影效果，从而增强闪亮的发光效果。