是的，可以僅用CSS創(chuàng)建動畫搜索欄，關(guān)鍵在於使用:focus偽類、transition和合理佈局實現(xiàn)交互效果，具體步驟如下：1. 用HTML構(gòu)建基礎(chǔ)結(jié)構(gòu)，包含輸入框和可選的搜索圖標(biāo)；2. 使用CSS設(shè)置容器居中並對輸入框設(shè)置默認(rèn)樣式，包括圓角邊框、內(nèi)邊距和過渡效果；3. 通過:hover和:focus偽類定義懸停和聚焦?fàn)顟B(tài)，聚焦時擴(kuò)展寬度、改變邊框顏色並添加陰影；4. 可選添加搜索圖標(biāo)，利用絕對定位或相鄰兄弟選擇器（ ）在聚焦時觸發(fā)動畫效果，如顏色變化和位移；5. 確保過渡時間在0.3s至0.5s之間，保持流暢且不延遲，並保留可見的焦點(diǎn)樣式以保障可訪問性。整個過程無需JavaScript，依賴CSS即可實現(xiàn)輕量高效的動畫效果，適用於所有現(xiàn)代瀏覽器。

Creating a CSS-only animated search bar is a great way to add subtle interactivity to your website without relying on JavaScript. The key is to use focus states, transitions, and pseudo-elements to create smooth visual effects. Below is a step-by-step guide to building a clean, animated search bar using only HTML and CSS.

? Basic Structure (HTML)

Start with a simple input field wrapped in a container:

 <div class="search-container">
  <input type="text" class="search-input" placeholder="Search...">
</div>

? Styling and Animation (CSS)

Here's how to style and animate the search bar:

 .search-container {
  display: flex;
  justify-content: center;
  margin: 50px auto;
  width: 100%;
  max-width: 400px;
}

.search-input {
  width: 60%;
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 25px;
  outline: none;
  transition: all 0.4s ease;
}

/* Hover effect */
.search-input:hover {
  border-color: #999;
}

/* Focus effect – this is where the animation happens */
.search-input:focus {
  width: 80%;
  border-color: #4d90fe;
  box-shadow: 0 0 10px rgba(77, 144, 254, 0.3);
}

? How the Animation Works

• transition: all 0.4s ease;
  This enables smooth changes to width , border , and box-shadow .

• On focus ( :focus )
  The input expands from 60% to 80% width, gets a blue border, and a soft glow. This creates a natural "opening up" effect, drawing attention to the active field.

  

• No JavaScript needed
  The animation is triggered purely by user interaction (focusing the input), handled by CSS pseudo-classes.

? Optional Enhancements

You can go further with more advanced CSS effects:

1. Icon Slide-in Animation

Add a search icon that moves into place:

 <div class="search-container">
  <span class="search-icon">?</span>
  <input type="text" class="search-input" placeholder="Search...">
</div>

 .search-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  transition: all 0.3s ease;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 25px;
  outline: none;
  transition: all 0.4s ease;
}

.search-input:focus {
  border-color: #4d90fe;
  box-shadow: 0 0 10px rgba(77, 144, 254, 0.3);
}

.search-input:focus .search-icon {
  color: #4d90fe;
  transform: translateY(-50%) translateX(-5px);
}

Note: The icon must come after the input in the HTML to use the selector. Or use wrapper-based positioning.

Alternatively, reverse the HTML order and use :

 <div class="search-container">
  <input type="text" class="search-input" placeholder="Search...">
  <span class="search-icon">?</span>
</div>

Then update the CSS selector:

 .search-input:focus .search-icon {
  /* styles */
}

? Tips for Better UX

• Keep the transition duration between 0.3s and 0.5s – long enough to notice, short enough to feel snappy.
• Use outline: none only if you're replacing it with a visible focus style (for accessibility).
• Always ensure the focused state is clearly visible for keyboard users.

? Summary

A CSS-only animated search bar relies on:

• The :focus pseudo-class for interaction
• transition for smooth animations
• Smart layout (flexbox or absolute positioning)
• Optional icon effects using sibling selectors

No JavaScript required. It's lightweight, fast, and works across all modern browsers.

Basically just style the focus state with expanding width or color changes, and let CSS do the rest.

以上是如何創(chuàng)建僅CSS的動畫搜索欄？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！