搜索放大鏡是許多網站都需要的一個常見特效,它可以幫助用戶快速找到自己需要的內容。CSS技術可以輕松實現放大鏡的效果。
/* 放大鏡的HTML代碼 */ <div class="search-box"> <input type="text" placeholder="搜索..."> <button class="search-btn"><i class="fa fa-search"></i></button> </div> /* 放大鏡的CSS樣式 */ .search-box { position: relative; display: inline-block; } .search-box input[type="text"]{ padding-right: 40px; } .search-box .search-btn { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-color: #fff; border: none; outline: none; cursor: pointer; } /* 放大鏡圖標的樣式 */ .fa-search:before { content: "\f002"; }
上面的代碼,我們首先創(chuàng)建了一個包含輸入框和搜索按鈕的父容器search-box
,通過設置父容器的position:relative
樣式,使得子容器search-btn
可以通過position:absolute
樣式相對于它進行定位,從而實現放大鏡疊加的效果,定義輸入框的樣式padding-right:40px
用于給搜索按鈕留出位置,而搜索按鈕則通過設置位置和大小以及背景色和無邊框實現正方形樣式。
而在搜索按鈕的樣式中,我們還采用了cursor:pointer
樣式來實現當鼠標停留在搜索按鈕上時可以出現指針形狀,這樣可以增加用戶點擊搜索按鈕的意愿。
最后,我們添加了一個放大鏡圖標,這里使用了Font Awesome字體圖標庫中的放大鏡圖標,通過設置其before
偽類的content
屬性來顯示。