CSS学习培训笔记之可反复渐变色(repeating

2021-03-17 22:37 jianzhan

CSS repeating-linear-gradient
 

方式

造就1个可反复的渐变色。它接纳和一般线形渐变色同样的特性值而且主要表现也1致。
 

但它会全自动在拓宽的方位上反复 color stops。每段起止和完毕的 color stop 之间是1个基础的线形渐变色。

用1张图看出线形渐变色和可反复渐变色的差别。


 

英语的语法

朋友,要学会看英语的语法。

Formal grammar: repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) 

where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?

举例

算啦算啦,還是看事例吧。

1、最简易的事例,实际效果如上面第1张图
 

background-image:
    repeating-linear-gradient(#cdf0ff, #0ca0e9 25%);

2、程序流程猿GG喜爱的格子衬衫
 

background-image:
    repeating-linear-gradient(transparent, transparent 23%, #1294f6 23%, #1294f6 27%),
    repeating-linear-gradient(90deg, transparent, transparent 23%, #1294f6 23%, #1294f6 27%);


 

温暖提醒:要想完成渐变色的边沿是硬的,最少必须4个 color-step,而且正中间两个的部位要相同,但色调不一样。

3、条纹纹路
 

background-image:
    repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px)

4、进度条
 

将上面事例中元素的高宽比减小,宽度增大,能够获得普遍的进度条实际效果。

  width: 226px;
  height: 20px;
  background-image:
      repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px);


 

还能够为进度条加上从左向右翻转的动漫。要想动漫连贯性,对元素的宽高有1定的规定。

animation: loading 5s linear infinite;

@keyframes loading {
  from { background-position-x: 0px; }
  to { background-position-x: 226px; }
}

Bootstrap 的进度条是用一般的 linear-gradient 完成的,实际的查查字典。

适配性

冒着没电的风险查了下 Can I use 简化版 小程序流程(nm这都有小程序流程,我眉头1紧,感觉事儿其实不简易)。

很高兴仅有0.01%的访问器兼容问题,IE8再见了。

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用。

参照

文静的ppt

MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient

Codepen:https://codepen.io/binbin/pen/bRawQv