知更鸟begin主题顶部小导航添加彩色渐变背景

今天由查资源给大家带来

前几天看到一个小伙伴的网站,有一个渐变的样式,觉得非常的好看,可是看了一下代码,感觉太复杂了,作为一个资深的屌丝青年,我果断的站出来了,要谴责这样的贱人。

其实实现起来一点也不难,这里以追更鸟主题为例,首先找到顶部导航的位置(class),由于鸟叔大部分的类,都是采用的ID命名的所以我这边找到是这个“#top-header”是顶部菜单栏的小分栏。

这是我做好的样子,我只是随意的写了是个颜色,其实要想做到非常的精致还远远不够,所以小伙伴们如果对颜色,比较喜欢敏感的话,不妨添加三十个颜色或者四十个等等,那样看起来就会非常的璀璨。

具体实现如下:首先是找到该位置的ID(即#top-header)

然后添加背景颜色渐变:background:linea-gradient

这个背景渐变有好几种的渐变方式,查资源拿出两种,供大伙消遣:

background:linea-gradient(线性渐变即一条直线渐变,如上图。)

background: radial-gradient(径向渐变即一圈一圈的向外扩散)

具体喜欢哪一种,看个人喜好。颜色值如下。

当然其中还有一些其他的css属性值,不过虫子向来不以教学为目的哈,仅仅是方便做而已。下面是我写好的,大家可以参照一下。circle

线性渐变

#top-header{background:linear-gradient(to right, #edf6c7 10%,#00b3ff 20%,#dce3ff 30%,#e6eccf 40%,#7bf0fb 50%,#cfff02 60%,#dae1bd 70%,#ffbee8 80%,#ff8f8f 90%,#f0fcbf 100%)}

径向渐变

#top-header{background: radial-gradient(circle,#edf6c7 10%,#00b3ff 20%,#dce3ff 30%,#e6eccf 40%,#7bf0fb 50%,#cfff02 60%,#dae1bd 70%,#ffbee8 80%,#ff8f8f 90%,#f0fcbf 100%)}

两个最终获得结果差不多,不过样式会稍微有一点点的区别。

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!

2. 分享目的仅供大家学习和交流,请不要用于商业用途!

3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!

4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!

5. 如有链接无法下载、失效或广告,请点击后面字体→到投诉版块区举报,可领回失去的金币,并额外有奖!

6. 如遇到加密压缩包,默认解压密码为"www.ziyuanc.com",如遇到无法解压的请联系管理员!


资源之家 » 知更鸟begin主题顶部小导航添加彩色渐变背景

发表评论

  • 117会员总数(位)
  • 6908资源总数(个)
  • 0本周发布(个)
  • 0 今日发布(个)
  • 541稳定运行(天)

提供最优质的资源集合

立即查看 了解详情