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

2018.9. 1518:13:28 评论 459

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

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

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

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

具体实现如下:首先是找到该位置的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%)}

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: