# 给主页的搜索组件增加一个好玩的渐变背景

**URL:** <https://www.isharkfly.com/t/topic/16756>\
**Category:** Discourse\
**Tags:** discourse\
**Created:** [December 31, 2024, 3:22am UTC](https://www.isharkfly.com/t/topic/16756 "2024-12-31T03:22:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![luobo](https://www.isharkfly.com/user_avatar/www.isharkfly.com/luobo/32/15604_2.png) [@luobo](https://www.isharkfly.com/u/luobo)\
**Post date:** [December 31, 2024, 3:22am UTC](https://www.isharkfly.com/t/topic/16756/1 "2024-12-31T03:22:55Z")

</div>

效果如图：

 ![image](https://cdn.isharkfly.com/com-isharkfly-www/discourse-uploads/original/3X/4/6/467ab3ad381969e432f3f7dd1f6100fd921d1af9.png)

这个其实是动态的，我这没录gif，可以去我的站 [https://bbs.imbhj.com](https://bbs.imbhj.com) 参观一下。

组件名称：Search Banner

css代码：

```css
.custom-search-banner-wrap {
    background-image: linear-gradient(135deg, #f8c3c3, #a8c8ff, #f8c3c3);
    background-size: 500% 500%;
    animation: gradientAnimation 6s linear infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

```

> 可以自己调节动画速度和颜色。

---

<div class="post-metadata">

**Author:** ![luobo](https://www.isharkfly.com/user_avatar/www.isharkfly.com/luobo/32/15604_2.png) [@luobo](https://www.isharkfly.com/u/luobo)\
**Post date:** [December 31, 2024, 3:32am UTC](https://www.isharkfly.com/t/topic/16756/2 "2024-12-31T03:32:17Z")

</div>

顺便再分享一个免费CSS渐变色的搭配网站：

> **[Free Gradients Collection by itmeo.com](https://webgradients.com)**
>
> Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

---

<div class="post-metadata">

**Author:** ![VegaMonika](https://www.isharkfly.com/user_avatar/www.isharkfly.com/vegamonika/32/14424_2.png) [@VegaMonika](https://www.isharkfly.com/u/VegaMonika)\
**Post date:** [February 8, 2025, 12:39pm UTC](https://www.isharkfly.com/t/topic/16756/3 "2025-02-08T12:39:02Z")

</div>

![image](https://cdn.isharkfly.com/com-isharkfly-www/discourse-uploads/original/3X/e/1/e1ff0581c427f029b57db2c7a059c2d8929e86a6.jpeg)  
挖个坟

# 玻璃磨砂 也很好看

---

<div class="post-metadata">

**Author:** ![hex](https://www.isharkfly.com/user_avatar/www.isharkfly.com/hex/32/21953_2.png) [@hex](https://www.isharkfly.com/u/hex)\
**Post date:** [February 8, 2025, 2:31pm UTC](https://www.isharkfly.com/t/topic/16756/4 "2025-02-08T14:31:15Z")

</div>

> [@luobo](#):
>
> Search Banner

挺好的，是一个搜索组件：[Advanced Search Banner - Theme component - Discourse Meta](https://meta.discourse.org/t/search-banner/122939)

 ![2025-02-08_09-29-12](https://com-isharkfly-discourse.s3.dualstack.us-east-2.amazonaws.com/com-isharkfly-www/discourse-uploads/original/3X/4/0/408268b868cabfd96b7a20c837cba8bc876b05fb.jpeg)

我倒比较习惯用上面这个快速搜索。

想搜东西的时候用下快捷键 `/` 就能打开搜索框。

输入搜索内容后，回车第一页大部分情况都能搜到一些内容。