段落文字彩条效果

朱雀 2022-08-06 17:03 224阅读 0赞

程序媛and程序猿，兄弟姐妹们，大家周末好，我们今天来研读一下利用纯css实现段落文字的彩条效果。有朋友就说了，不就是css3的渐变吗，最多加上webkit内核的-webkit-background-clip，嗯，远不止哟，进来一坐了解详情……

## 1.案例欣赏 ##

![这里写图片描述][20150207094142529]  
![这里写图片描述][20150207094809875]  
代码我同样放到了codepen，大家可以-[在线研究][Link 1]\-，或-[下载收藏][Link 2]\-。  
需要注意的是，本案例的前面四个效果仅仅支持webkit内核浏览器，后面两个效果支持现代浏览器。

## 2.知识解析 ##

实现本案例您需要：

*  css3渐变
 *  \-webkit-background-clip: text和-webkit-text-fill-color: transparent
 *  sass的function的内涵和自定义
 *  伪对象的使用

我们接下来品味实现过程，强烈建议大家根据上面的原理自行实现，有实现的兄弟欢迎通过评论提交佳作哟。

## 3.实现过程 ##

我们的html文件同样使用了haml，貌似下面代码这样。

.container
      - 6.times do |i| %section{class: "lh"}
     %p 前端开发whqet，王海庆的技术博客，关注前端开发，分享相关资源，希望可以对您有所帮助。csdn专家博客http://blog.csdn.net/whqet和个人独立博客http://whqet.github.io同步更新，希望可以得到您的支持与肯定，您的支持是我最大的动力！王海庆，浙江邮电职业技术学院软件技术青椒一枚，其貌不扬、其名不翔，关心技术、热爱生活，我爱怒放的生命。

然后我们设置下页面布局和全局css设置，为了简化问题，本案例使用了sass的scss语法、css reset和-prefix-free。

/*全局变量的设置，行高和彩条颜色*/
    $lh:1.8em;
    $colors: #9588DD #DD88C8 #D3DD88 #88B0DD #FFD86F #B4DB6C #0090FB #00965E;
    /*布局和全局设置*/
    .container{ counter-reset:counterA; }
    .container section{ counter-increment:counterA; position: relative; padding:10vh 20vw; background:#2B293D; border-bottom:1px dashed rgba(255,255,255,.1); &::before{ content:counter(counterA); position: absolute; left:0; top:0; font-size:20vw; color:rgba(255,255,255,.05); }
     p{ text-indent: 2em; line-height: $lh; color:#fff; }
    }

### 3.1 彩条效果 ###

案例创意来自Chris Coyier’s Pen [One line of Text Dif Color][]，案例效果如下  
![这里写图片描述][20150207094142529]  
我们在实现这个效果时，手动设置渐变的颜色，需要把握的核心在于**设置渐变点与段落文字的行高吻合**。

/*第一个，彩色条纹，手动指定颜色*/
    section:nth-of-type(1) {
      p {
        /*本案例仅仅兼容webkit内核浏览器*/
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /*繁琐的渐变颜色设置*/
        background-image: linear-gradient( to bottom, #9588DD, #9588DD $lh, #DD88C8 $lh, #DD88C8 $lh*2, #D3DD88 $lh*2, #D3DD88 $lh*3, #88B0DD $lh*3, #88B0DD $lh*4, #FFD86F $lh*4, #FFD86F $lh*5, #B4DB6C $lh*5, #B4DB6C $lh*6, #0090FB $lh*6, #0090FB $lh*7, #00965E $lh*7, #00965E );
      }
    }

### 3.2 函数实现彩条效果 ###

由上面彩条效果实现过程可知，渐变颜色的设置是整个案例实现的关键，但是比较不幸的是，这个过程太过danteng，这个煎熬的过程是程序猿都顶不住，于是穷则思变，使用scss的自定义函数来代替繁琐的人工设置。

/*第二个，彩色条纹，mixins方式读取预设值*/
    /** * $colors, 渐变颜色序列 * $lh, 段落的行高 *************************************************/
    @function makestripes($colors,$lh){ 
      $stripes: 'to bottom,';
      $i: 1;
      $l: length($colors);
      @each $color in $colors{ 
        $stripes: $stripes + $color + ' ' + ($lh * ($i - 1)) + ',' + $color + ' ' + ($lh * ($i * 1)) ;
        @if ($i < $l){ 
          $stripes: $stripes + ',';
        }
        $i: $i + 1;
      }
      @return unquote('repeating-linear-gradient(' + $stripes + ')');
    }
    section:nth-of-type(2) {
      p {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /*你体会到愉快了吗？*/
        background-image: makestripes($colors,$lh);
      }
    }

### 3.3 淡出效果 ###

彩条效果多少有点炫技，属于前端er的玩儿弄，实际应用场合有待探索，但是下面的这个淡出效果应该应用挺广，比如用在日志摘要以增加设计的优雅。  
![这里写图片描述][20150207094809875]  
本效果的实现，我们同样从手动设置渐变颜色出发，然后研究sass的函数设置，然后研究兼容firefox的实现方式，参见3.3-3.6.

/*第三个，淡出效果，手动方式指定*/
    section:nth-of-type(3) {
      p {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient( to top, rgba(white, 0.2), rgba(white, 0.2) $lh, rgba(white, 0.4) $lh, rgba(white, 0.4) $lh*2, rgba(white, 0.6) $lh*2, rgba(white, 0.6) $lh*3, rgba(white, 0.8) $lh*3, rgba(white, 0.8));
        background-position: bottom center;
      }
    }

### 3.4 函数实现淡入淡出 ###

/*第四个，淡出效果，mixins*/
    /** * $color, 渐变颜色 * $lh, 段落的行高 * $dir, 渐变方向，可接受参数：'to top'表示淡出，'to bottom'表示淡入 * $n, 渐变的快慢，渐变完成的行数，默认为3行 *************************************************/
    @function makesFade($color:white,$lh:1.5em,$dir:'to top',$n:3){ 
      $stripes:$dir+", ";
      @for $i from 1 through $n{ 
        $stripes: $stripes + rgba($color,$i/$n) + ' ' + ($lh * ($i - 1)) + ',' + rgba($color,$i/$n) + ' ' + ($lh * ($i * 1));
        @if ($i < $n){ 
          $stripes: $stripes + ',';
        }
      }
      @return unquote('linear-gradient(' + $stripes + ')');
    }
    section:nth-of-type(4) {
      p {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: makesFade(white,$lh,'to top',4);
      }
    }

### 3.5 兼容firefox的淡出方式 ###

我们知道上面的案例因为使用webkit内核的background-clip，text-fill-color，因此只兼容webkit内核的浏览器，这不公平。firefox会叫屈不平，所以我们得做点什么。我们把颜色渐变添加在::after伪对象上覆盖文字，注意这时，渐变颜色跟背景颜色一样，透明度从1到0。

/*第五个，兼容其他浏览器*/
    section:nth-of-type(5) {
      p{
        position: relative;
      }
      p::after{
        content:"";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        bottom:0;
        background-image: linear-gradient( to top, rgba(#2B293D, 1), rgba(#2B293D, 1) $lh, rgba(#2B293D, 0.8) $lh, rgba(#2B293D, 0.8) $lh*2, rgba(#2B293D, 0.6) $lh*2, rgba(#2B293D, 0.6) $lh*3, rgba(#2B293D, 0.4) $lh*3, rgba(#2B293D, 0.4) $lh*4, rgba(#2B293D, 0.2) );
        background-position: bottom center;
      }
    }

### 3.6 兼容firefox的函数实现淡入淡出 ###

/*第六个，兼容其他浏览器的mixins*/
    /** * $color, 渐变颜色，这里就是背景色。 * $lh, 段落的行高 * $dir, 渐变方向，可接受参数：'to top'表示淡出，'to bottom'表示淡入 * $n, 渐变的快慢，渐变完成的行数，默认为3行 *************************************************/
    @function makesFadeOther($color:white,$lh:1.5em,$dir:'to top',$n:3){ 
      $stripes:$dir+", ";
      @for $i from 1 through $n{ 
        $stripes: $stripes + rgba($color,1-$i/$n) + ' ' + ($lh * ($i - 1)) + ',' + rgba($color,1-$i/$n) + ' ' + ($lh * ($i * 1));
        @if ($i < $n){ 
          $stripes: $stripes + ',';
        }
      }
      @return unquote('linear-gradient(' + $stripes + ')');
    }
    section:nth-of-type(6) {
      p{
        position: relative;
      }
      p::after {
        content:"";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        bottom:0;
        background-image: makesFadeOther(#2B293D,$lh,'to top',4);
      }
    }

## 4.相关阅读 ##

*  [再说CSS3渐变——线性渐变][CSS3]
 *  [再说CSS3渐变——径向渐变][CSS3 1]
 *  [CSS3 text-fill-color简介及应用展示][CSS3 text-fill-color]
 *  [CSS3 文字渐变][CSS3 2]
 *  [纯CSS3文字效果推荐][CSS3 3]
 *  [sass官方文档][sass]

## 5.版权说明 ##

*前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。*  
*本文欢迎转载，转载请注明，保留原文链接。*  
*本文原文链接，[http://blog.csdn.net/whqet/article/details/43601051][http_blog.csdn.net_whqet_article_details_43601051]*  
*欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]*

[20150207094142529]: /images/20220805/f5d3c9b868bf4771a936d12492bf96b4.png
[20150207094809875]: /images/20220805/25e1e330ab624e59a1c0517431d4d74b.png
[Link 1]: http://codepen.io/whqet/pen/raYGVN?editors=010
[Link 2]: http://codepen.io/whqet/share/zip/raYGVN/
[One line of Text Dif Color]: http://codepen.io/chriscoyier/pen/YPZLGj/
[CSS3]: http://www.w3cplus.com/css3/new-css3-linear-gradient.html
[CSS3 1]: http://www.w3cplus.com/css3/new-css3-radial-gradient.html
[CSS3 text-fill-color]: http://www.zhangxinxu.com/wordpress/2010/06/css3-text-fill-color%E7%AE%80%E4%BB%8B%E5%8F%8A%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/
[CSS3 2]: http://www.qianduan.net/css3-text-gradient.html
[CSS3 3]: http://blog.csdn.net/whqet/article/details/24793049
[sass]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html
[http_blog.csdn.net_whqet_article_details_43601051]: http://blog.csdn.net/whqet/article/details/43601051
[http_whqet.github.io]: http://whqet.github.io