zoukankan      html  css  js  c++  java
  • 使用CSS3线性渐变(linear-gradient)实现文本波浪线效果

    我们在读纸质书的时候,经经常使用笔划波浪线来突出重点内容。以强化视觉感受。

    而在Web页面上,没有CSS3之前,我们仅仅能用背景图片来实现相似功能,这当然不是个高效的方式。且难于维护和调整。

    比方你仅仅是想调整下颜色、线条大小和倾斜的角度,你都得打开作图软件来折腾一下。

    如今我们能够使用CSS3伪元素及其背景渐变(gradient)来实现这一有趣而有用的效果。


    波浪线特征

    我们观察下波浪线,有这么2个基本几何特征:

    1. 波折线是反复的,能够被分解为若干相连的“角”形状

    2. 这些“角”的连接点处是平滑过渡的。不能出现毛刺,所以须要对顶点处做平滑处理


    对于(1),我们能够首先创建一个尖角形状(由一撇一捺2条短直线组成),然后使用x方向的repeat来反复。

    对于(2),我们能够使用渐变色。模拟人手划线时,在转弯处力道减弱,我们在尖角相交处使用相对淡色,构造出圆角的视觉感受。

    CSS3线性渐变

    我们注意到每一个“角”都有2条边,假设以默认渐变轴(从上往下的一条垂直线)来看,左边的呈现45°倾斜。而右边的呈现315°倾斜。

    那么怎样创建一个45°的倾斜线呢?我们非常easy想到用rotate变换,可是rotate是作用于整个元素上的,在这里并不适用。

    我们换个思路,CSS3中的线性渐变(linear-gradient)能够完毕上述要求,线性渐变的核心是渐变轴、起点终点和颜色值分布。

    通过设置渐变轴的角度为45°。我们能够得到倾斜的特性,然后我们再把渐变宽度缩窄到一个线条的大小,详细代码例如以下:

    div {
      background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); 
      background-size: 20px 20px;
      background-repeat: no-repeat;
    }

    上面linear-gradient方法中的第一个參数是渐变轴角度。渐变将沿渐变轴开展,也就是渐变线的角度为45°。

    后面的參数表示从0到45%的长度上为透明,45%到55%为红色渐变,55%到100%为透明。

    也就是仅仅有元素背景长度的10%出现渐变色(且是两边对称)。第二行代码把背景的宽度设置为20px。那么渐变线的实际宽度为(20px)*10%=2px。

    这样我们就得到了一根短折线,具备45°倾斜,且带渐变。

    相似的。我们能够得到一根315°的渐变短折线:

    div {
      background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); 
      background-size: 20px 20px;
      background-repeat: no-repeat;
    }

    可是如今我们得到的是2条交叉的线条,形成一个“X”形状,这并非我们想要的。

    一个简单的技巧就是设置元素的高度为1/2,就得到了一个“V”形。

    然后,我们把background-repeat设置为repeat-x,就得到了波浪线形状。

    CSS3 :before伪元素

    我们还剩最后一步,我们须要把波浪线形状加入到文本以下。仅仅要把上面的div元素改成相应文本的:before伪元素就可以。

    我们还能够设置不同的渐变颜色用以标注不同的文本。

    你能够自己在线试试:http://wow.techbrood.com/fiddle/5868


    by iefreer

  • 相关阅读:
    求给定数组中最大值和其在数组中的索引并输出
    多线程与多进程
    logging模块
    QWidget上下文菜单处理函数
    python中的yield关键字
    菜单栏(QMenuBar)与菜单(QMenu)
    PyQt5布局管理(1)
    QMainFrame类
    QTP11使用DOM XPath以及CSS识别元素对象
    C# 跨线程访问控件
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/7103215.html
Copyright © 2011-2022 走看看