css3的linear-gradient()函数用法详解

linear-gradient()其实是css函数。其翻译成中文叫做线性渐变。而网上关于这个属性用法大多都是用于创建一个表示两种或多种颜色线性渐变的图片。其实不然,linear-gradient()函数其实可以应用很多其他场景。下面我将用gradient()函数列举一些大家常用的场景。

1.不规则图形

切角效果

linear-gradient效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//css
.corner{
width: 100px;
height: 40px;
line-height: 40px;
background:linear-gradient(225deg, transparent 15px, #162e48 15px);
color: #fff;
padding: 5px 15px;
text-align: center;
margin-bottom: 30px;
}
//html
<div class="corner">
</div>

应用原理其实很简单,我们先从上到下设置一个15像素的长方形给个颜色或者透明色,然后通过线性旋转角度旋转到我们需要的位置即可。ps:未设置开始位置就会默认从0%开始,未设置结束位置就代表默认到100%结束。

2.施工路栏效果(发廊灯光效果)

左边是日常路栏牌,右边是做出的效果图

linear-gradient路障图片

ps:将宽高重新设置一下就有发廊灯光效果了,然后加上animation动效就可以动起来了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//css
.road-bar{
      width: 200px;
      height: 50px;
      position: relative;
      background-color: #ffb40c;
    }
    .shadow {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 1;
      transition: opacity 0.3s ease;
      background-size: 50px 50px;
      background-image: linear-gradient(135deg, rgb(0,0,0) 0%,rgb(0,0,0) 25%, #ffb40c 25%,#ffb40c 50%, rgb(0,0,0) 50%,rgb(0,0,0) 75%, #ffb40c 75%,#ffb40c 100%);
    }
//html
<div class="road-bar">
    <div class="shadow"></div>
  </div>

以上代码最难理解就部分就是linear-gradient()函数里面的各种参数设置了,其中第一个参数线性渐变的开始的旋转角度,第二开始为什么颜色都要设置两次,这是因为把每个颜色都设置一个起始着色点,再设置一个结尾着色点,这样就能消除两个颜色之间的渐变色,使之变为实色。

3.多个背景效果

linear-gradient背景效果

1
2
3
4
5
6
7
.two-bg{
width: 130px;
height: 130px;
background: -webkit-linear-gradient(left, rgba(27, 206, 20, 0.5), rgba(255,144,115,1)),url(./aa-03.png);
}
//html
<div class="two-bg"></div>

多个背景既可以做渐变又可以做背景图,结合可以做出很多惊艳到人的效果哦。