分享一个导航栏下边渐变条效果,效果看图

技术 748
技术 748

html代码放导航栏的</div>后面,然后把css放到</head>前即可

html

<div class="divide-wrap">
<div class="colorbar-before"></div>
<div class="colorbar-after"></div>
<div class="colorbar"></div>
</div>

css

<style>
.divide-wrap {
    position: relative;
    height: 1px;
    z-index: 1;
}
.colorbar-before {
    content: "";
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 9;
    background-color: #040101;
}
.colorbar-after {
    content: "";
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 9;
    background-color: #fd0371;
}
.colorbar {
    width: 100%;
    height: 100%;
    z-index: 11;
    background: url(//fanyi.bdstatic.com/static/translation/img/header/colorbar_623c2a2.png) center no-repeat;
    position: relative;
}
</style>

图片素材

这个图片你可以自定义放路径里,替换什么css里的链接
colorbar_623c2a2.png

  • copyright
    著作权归作者所有
  • person
  • play_arrow
    748 Views
  • create
  • autorenew
    最后修改:2018 年 11 月 22 日
  • local_offer
copyright info_outline

*