CSS里的搜索圖標在現代網頁設計中越來越常見，它被用于搜索框、搜索按鈕和其他應用場景。下面我們將介紹如何使用CSS創建搜索圖標。

/* 默認的搜索圖標樣式 */
.search-icon {
background-image: url(search-icon.png);
background-size: 100%;
}
/* 圓形搜索圖標 */
.search-icon.circle {
border-radius: 50%;
}
/* 修改搜索圖標的顏色 */
.search-icon.red {
filter: hue-rotate(90deg);
}
/* 添加搜索圖標動畫 */
.search-icon.animate {
animation: shake 2s infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}

在代碼中，我們首先定義了一個搜索圖標的默認樣式，使用了一個背景圖片作為搜索圖標，并適當使用了背景大小的屬性進行調整。

接下來，我們通過添加類名的方式創建了不同的搜索圖標風格，例如圓形和顏色不同的樣式。如果你想要添加動畫效果，我們還可以通過animation屬性實現搜索圖標的抖動效果。

總的來說，CSS提供了很多方式去設計搜索圖標，并且可以通過類名來將它們應用到不同的場景中，實現豐富及多樣化的用戶體驗。