js+css3制作制作渐变色标题栏 |
您所在的位置：网站首页 › 渐变标题栏在WindowsNT40 › js+css3制作制作渐变色标题栏 |
js+css3制作制作渐变色标题栏
|
单色背景标题栏略显单调，通过css的渐变色功能可以实现动态变色的标题栏：
首先，在页面中加入： 在head中加入： 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; //改变方向 } }标题栏颜色从rgba(0,221,238, 0.5)过渡到rgba(32,194,231, 0.5)，随着n_ratio值得增加，渐变区域从左向右收缩；n_ratio到100后再从右向左扩散还原。 代码将两个独立的变色区域刷新标题栏，产生一种对称变色的效果。 要注意的是，两个变色条同时运行，设置透明度0.5或更小值才能同时显示，否则可能有被遮挡覆盖 |
【本文地址】
今日新闻 |
推荐新闻 |