CSS学习笔记之可重复渐变（repeating-linear-gradient）
发布时间：2017-07-02 17:18:02 作者：beyoursun 
我要评论
我要评论这篇文章主要给大家介绍了关于CSS中可重复渐变（repeating-linear-gradient）的相关资料，文中介绍的非常详细，对大家学习或者使用css具有一定的参考学习价值，需要的朋友们下面一起来看看吧。
CSS repeating-linear-gradient
方法
创造一个可重复的渐变。它接受和普通线性渐变相同的属性值并且表现也一致。
但它会自动在延伸的方向上重复 color stops。每段起始和结束的 color stop 之间是一个基本的线性渐变。
用一张图看出线性渐变和可重复渐变的区别。
语法
同志，要学会看语法。
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、最简单的例子，效果如上面第一张图
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%);
温馨提示：要想实现渐变的边缘是硬的，至少需要四个 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);
还可以为进度条添加从左向右滚动的动画。想要动画连贯，对元素的宽高有一定的要求。
animation: loading 5s linear infinite;
@keyframes loading {
from { background-position-x: 0px; }
to { background-position-x: 226px; }
}
Bootstrap 的进度条是用普通的 linear-gradient 实现的，具体的查查字典。
兼容性
冒着没电的危险查了下 Can I use 简化版 小程序（nm这都有小程序，我眉头一紧，觉得事情并不简单）。
很开心只有0.01%的浏览器不兼容，IE8再见。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
参考
文静的ppt
MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient
Codepen：https://codepen.io/binbin/pen/bRawQv
相关文章
这篇文章主要介绍了CSS3 实现文本与图片横向无限滚动动画,本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2024-06-12
这篇文章主要介绍了CSS实现苹果官网文字渐入效果(示例代码),文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度，结合示例代码讲解的非常详细，需要2024-06-12
这篇文章主要介绍了CSS实现鼠标悬停图片放大的几种方法,使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放2024-05-29
这篇文章主要介绍了css3实现类似地图定位循环扩散光圈效果,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2024-05-24
这篇文章主要介绍了CSS鼠标悬浮动画-hover属性详解，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2024-05-24
CSS Flexible Box Module是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直），下面给大家介绍Flexbox布局的一些关键概念和示例代码，感兴趣的朋友一2024-05-16- 在网页开发中，我们经常会使用无序列表（<ul>）来展示一系列的项目,默认情况下，每个列表项（<li>）前面都会有一个圆点作为标记，本文将介绍几种常见的方法来2024-05-16
- 在CSS中，要使一个DOM元素脱离正常的文档流并定位在页面的右顶部，你可以使用position属性，这篇文章主要介绍了CSS实现dom脱离文档流定位固定位置,需要的朋友可以参考下2024-04-30
- Stylus 是一个功能强大的 CSS 预处理器，能够让你的样式表开发变得更加高效和有趣，本文介绍stylus入门使用方法，感兴趣的朋友跟随小编一起看看吧2024-04-22
这篇文章主要为大家详细介绍了CSS中五种常见定位方式以及它们的具体应用，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以跟小编一起学习一下2024-04-22
最新评论