HTML5是一種新一代的網頁標準，它引入了很多新的特性和功能。其中一個非常酷炫的特性就是炫酷搜索框。這種搜索框不僅僅具有搜索的功能，還能為網站增加一份時尚和個性。下面我們就來看看如何創建一個HTML5炫酷搜索框。

<form>
<input type="text" placeholder="Search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>

這是一個簡單的HTML5搜索框代碼，它包括一個文本框和一個提交按鈕。文本框的placeholder屬性用于指定默認文字，這里我們設置為“Search”。提交按鈕內部使用了Font Awesome圖標庫中的搜索圖標。

我們可以通過CSS樣式來美化這個搜索框。首先，我們需要將文本框和提交按鈕放在同一行，并讓它們占滿整個屏幕寬度：

form {
display: flex;
width: 100%;
}
input[type="text"] {
flex: 1;
width: 100%;
height: 50px;
padding: 10px;
font-size: 18px;
border: none;
outline: none;
}
button[type="submit"] {
width: 50px;
height: 50px;
border: none;
background-color: #007bff;
color: #fff;
font-size: 18px;
outline: none;
cursor: pointer;
}

這段CSS樣式定義了form元素的display屬性為“flex”，使它的子元素能夠放在同一行上。文本框使用了flex屬性，并且寬度為100%，高度為50px，設置了內邊距和字體大小。提交按鈕的樣式設置了其寬度和高度為50px，顏色和背景色為藍色，字體顏色和大小為白色和18px，指針樣式為手型。

接下來，我們為搜索框添加動畫效果，讓它更具有吸引力：

form {
position: relative;
display: flex;
width: 100%;
}
input[type="text"] {
flex: 1;
width: 100%;
height: 50px;
padding: 10px;
font-size: 18px;
border: none;
outline: none;
border-radius: 50px;
transition: all .3s ease;
background-color: #eee;
}
input[type="text"]:focus {
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 123, 255, .5);
}
button[type="submit"] {
position: absolute;
right: 0;
width: 50px;
height: 50px;
border: none;
background-color: #007bff;
color: #fff;
font-size: 18px;
outline: none;
cursor: pointer;
border-radius: 50px;
transition: all .3s ease;
}
button[type="submit"]:hover {
background-color: #0069d9;
}

這段CSS樣式為文本框添加了過渡效果，使其在獲取焦點和失去焦點時有動畫效果，同時也為文本框設置了邊框半徑，讓它變成了圓形。在獲取焦點時，文本框的背景顏色會變成白色，并添加一個陰影效果，指定顏色和透明度。提交按鈕同樣設置了過渡效果，并且在鼠標懸停時背景顏色會變成深藍色。

在實際使用時，我們需要將Font Awesome圖標庫的CSS文件引入，并且將按鈕內部的圖標代碼進行適當修改。

<link rel="stylesheet" >
<form>
<input type="text" placeholder="Search">
<button type="submit">
<i class="fa fa-search fa-lg"></i>
</button>
</form>

最后，我們可以通過修改樣式中的顏色、背景色和過渡時間等屬性來定制自己的個性化搜索框。