HTML+CSS39 渐变效果

linear-gradient

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  
  • <angle>| to <side-or-corner>用来描述渐变发生的方向或角度的。未指定时,默认是由上至下进行渐变。
  • <color-stop>由一个<color>值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的<length>)。取值如:#FF837E 80%或者blue 30px

它分为两组参数,第一组参数用来描述渐变线的起点位置,to top这样的值会转换为0度,to left会被转换为270度。第二组参数可以包含多个值,用逗号分隔,每个值都是一个色值,后面跟随一个可选的终点位置,终点位置可以是百分比也可以是绝对值

CSS规范规定,如果某个色标的位置值比整个列表在它之前的位置都要小,则改色标的位置会被设置为它前面的额所有色标位置值的最大值,所以可以使用0来指代前面的颜色的位置最大值

(1)默认效果

.container {
  background: linear-gradient(white, black);
}

(2)从左到右的渐变:

.container {
  background: linear-gradient(to right, white, black);
  /* 或者 */
  background: linear-gradient(90deg, white, black);
}

(3)从左到右渐变,渐变位置发生在中间的一小部分(20%左右)

.container {
  background: linear-gradient(to right, white 40%, black 60%);
}

(4)突然变色

如果多个色标具有相同的位置,他们会产生一个无限小的过渡区域,过渡的起止色分别是第一个和最后一个指定值。从效果上看,颜色会在那个位置突然变化,而不是一个平滑的渐变过程。

.container {
  background: linear-gradient(to right, white 50%, black 50%, black 100%);
  /* 或者 */
  background: linear-gradient(to right, white 50%, 0, black 100%);
}

(5)边框渐变

三种渐变都属于CSS数据类型中的<gradient>类型,而<gradient>数据类型又是<image>数据类型的子类型。所以有时能应用到<image>的地方同样也可以应用到<gradient>,比如我们可以利用border-image属性来实现边框的渐变。如下面的效果:

.container {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, white, black) 10;
}

(6)条纹进度条(竖直)

.container {
  width: 500px;
  height: 20px;
  border-radius: 5px;
}

.container:after {
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(90deg, black 50%, darkgoldenrod 0);
  background-size: 20;
  animation: loading 10s linear infinite;
}

@keyframes loading {
  to {
    background-position: 100% 0;
  }
}

(7)条纹进度条(倾斜)

倾斜的话,除了修改角度之外,还需要细化色阶值,让色块充满backgroun-size的范围内,只需要修改:

.container:after {
   background: linear-gradient(45deg, black 0, black 25%, darkgoldenrod 0, darkgoldenrod 50%,
      black 0, black 75%,  darkgoldenrod 0, darkgoldenrod 20px);
}

(7)桌布效果

使用backgroun-image绘制多个背景图像,进行叠加:

.container {
  width: 210px;
  height: 210px;
  background-color: #FFF;
  background-image: linear-gradient(90deg, black 50%, transparent 0),
      linear-gradient(black 50%, transparent 0);
  background-size: 20px 20px;
}

径向渐变

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

可以简化为:

radial-gradient(shape size position, color-stop[...,color-stop]);
  • position,代表径向渐变的圆心位置,默认值是中心点
  • shape,径向渐变的形状,可以为circle或者ellipse(默认)
  • size,代表径向渐变范围的的小,shapeellipse需要指定两个值,比如20%, 30%,前者代表相对元素宽度的20%,后者代表相对高度的30%,也可以用关键字

(1)中间到四周渐变:

.container {
  background: radial-gradient(white, black)
}

\

(2)半椭圆形渐变,由左侧中心点到四周

.container {
  background: radial-gradient(ellipse 100% 50% at left center, white, black)
}

(3)从左上角到右下角的发散式渐变

.container {
  background: radial-gradient(circle farthest-corner at left top, white, black)
}

(4)指定颜色渐变范围

.container {
  background: radial-gradient(ellipse 50% 30%, white 30%, black 70%)
}

重复渐变

重复渐变分为两种:线性重复渐变和径向重复渐变,语法都与普通的渐变相同。

repeating-linear-gradient类似linear-gradient,并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器。

其实repeating-linear-gradient的效果大多数时候可以用linear-gradient + background-repeat + background-size实现,上面的倾斜的进度条用repeating-linear-gradient也可以直接实现,关键点就是色阶值改用固定尺寸而非百分比,不再需要background-size,因为repeating-linear-gradient会自动充满容器了

.container {
  width: 500px;
  height: 20px;
  border-radius: 5px;
}

.container:after {
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: repeating-linear-gradient(45deg, black 0, black 10px, darkgoldenrod 0, darkgoldenrod 20px);
  animation: loading 10s linear infinite;
}

@keyframes loading {
  to {
    background-position: 100% 0;
  }
}

更多的渐变效果可以直接Copy这个网站

参考

发布了382 篇原创文章 · 获赞 91 · 访问量 33万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览