js+css3制作制作渐变色标题栏

单色背景标题栏略显单调，通过css的渐变色功能可以实现动态变色的标题栏：

 首先，在页面中加入：

<div class='title_change' style='width:200px;height:25px;'></div>

在head中加入：

<script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
        var n_ratio;
        var b_init = true;
        setInterval(set_td_change, 50);
        var n_flag;
        function set_td_change() {
            if (b_init) {
                n_ratio = 1;
                n_flag = 1;
                b_init = false;
            }
            else {
                n_ratio = n_ratio + n_flag;
            }
            var c_css = "linear-gradient(270deg, rgba(0,221,238, 0.5) 0%,rgba(32,194,231, 0.5) " + n_ratio + "% )";
            c_css += ",linear-gradient(90deg, rgba(0,221,238, 0.5) 0%,rgba(32,194,231, 0.5) " + n_ratio + "% )";
            $(".title_change").css("background-image", c_css);
            $(".title_change").css("background-size", "100% 50%");
            if (n_ratio >= 101 || n_ratio < 1) {
                n_flag = -n_flag; //改变方向
            }
        }
</script>

标题栏颜色从rgba(0,221,238, 0.5)过渡到rgba(32,194,231, 0.5)，随着n_ratio值得增加，渐变区域从左向右收缩；n_ratio到100后再从右向左扩散还原。

代码将两个独立的变色区域刷新标题栏，产生一种对称变色的效果。

要注意的是，两个变色条同时运行，设置透明度0.5或更小值才能同时显示，否则可能有被遮挡覆盖

最后

以上就是任性战斗机为你收集整理的js+css3制作制作渐变色标题栏的全部内容，希望文章能够帮你解决js+css3制作制作渐变色标题栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。