CSS3是一種基于CSS的標(biāo)準(zhǔn)，它為Web開發(fā)帶來了許多新的特效，其中之一就是搜索特效。使用CSS3可以輕松地添加漂亮的搜索特效，提升頁面的用戶體驗(yàn)。

.search {
position: relative;
}
.search input[type="text"] {
width: 200px;
padding: 8px 30px 8px 10px;
border: none;
border-radius: 30px;
background-color: #f0f0f0;
outline: none;
font-size: 16px;
transition: all 0.3s ease-in-out;
}
.search input[type="text"]:focus {
width: 300px;
background-color: #dcdcdc;
}
.search input[type="submit"] {
position: absolute;
right: 0;
top: 0;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search input[type="submit"]:hover {
transform: rotate(360deg);
}
.search input[type="submit"]::before {
content: "\f002";
font-family: FontAwesome;
font-size: 20px;
color: #666;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid #666;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.search input[type="submit"]:hover::before {
color: white;
background-color: #666;
}

以上是一個(gè)簡單的CSS3搜索特效示例。其中，將input[type="text"]和input[type="submit"]放在一個(gè)position:relative的容器內(nèi)，使用CSS3 transition屬性實(shí)現(xiàn)輸入框的展開和收縮效果，同時(shí)使用FontAwesome字體庫實(shí)現(xiàn)搜索圖標(biāo)，使用CSS3 transform屬性實(shí)現(xiàn)搜索圖標(biāo)的旋轉(zhuǎn)效果。

總之，使用CSS3可以輕松地添加漂亮的搜索特效，提升頁面的用戶體驗(yàn)。開發(fā)者只需了解常用的CSS3屬性和選擇器，就能為網(wǎng)站添加許多互動效果。