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

开源 Discourse
1

效果如图：

image
image1727×906 142 KB

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

组件名称：Search Banner

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%;
    }
}

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

1 Like
2

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

1 Like