1. 线性渐变背景

要创建最基本的渐变类型，只需指定两种颜色即可。至少指定两个颜色，也可以指定任意数量。默认渐变方向从上到下。

如：

.bg1{width: 500px;height: 500px;background-image:linear-gradient(red, #ff0);
}

可以指定一个值来改变渐变的方向。to + 方向

要更精确地控制渐变的方向，可以给渐变设置一个具体的角度。

.bg1{background-image:linear-gradient(to right, red, #ff0);
}
或者：
.bg1{background-image:linear-gradient(30deg, red, #ff0);
}

可以设置颜色的停止的位置（下一个颜色开始呈现，即颜色渐变开始），位置可以是像素值，也可以是百分比。0%，代表起点，100% 代表终点。

.bg1{background-image:linear-gradient(30deg, red 50%, #ff0 80%, #00f);
}

要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。

.bg1{background-image:linear-gradient(30deg, red 50%, #ff0 50%);
}

2. 线性重复渐变

在一个背景上重复应用渐变模式的情况。即，当颜色结束时，就会重复渐变。这时就需要使用重复渐变。

实现重复线性渐变的效果，其基本语法格式跟线性渐变类似，如下。

.bg1{background-image:repeating-linear-gradient( red ,#ff0 20% );
}

3. 滚动的条纹背景

基于以上基本知识，结合帧动画，可以实现滚动的条纹背景。

开篇 gif 动画效果的代码如下：

 .box{width: 400px;height: 30px;border-radius: 30px;box-shadow: inset 0 0 3px #555;background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 15px,#58a 30px);background-size: 100% 60px;animation: ani 1s infinite both linear;}@keyframes ani {0%{}100%{background-position: 0 -60px;}}

需要注意的时：

1. 实现动画，是采用的背景上下移动。因此，背景的大小，要高于div的高度。

2. 因为如果水平移动背景，会出现不和谐的bug。所以，我就想到，反正条纹是斜着的，就上下移动，一样的视觉效果。

完毕。

CSS3技巧35：滚动的条纹背景相关推荐

html中背景条纹效果,纯css3实现条纹背景方法（水平，垂直，倾斜）
以上这些并不是背景图,而是由CSS样式代码实现.在现代标准浏览器中,我们通过CSS3的两个属性,一个是linear-gradient,即线性渐变,另一个是background-size,用来确定渐变的 ...
html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...
使用CSS3设置条纹背景
系列文章目录 CSS3实现半透明边框(1) CSS3实现多重边框(2) CSS3如何调整背景图片大小(3) CSS3背景定位(4) 使用CSS3设置条纹背景系列文章目录前言一.水平条纹不等宽的 ...
1.animation 判断动画结束，结束后执行另一事件；2.用css3写竖条纹背景
1.用css3的animation完成一个动画,并监听动画结束后才执行另一个事的实现方法: 动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以 2.用css3写带透明色的 ...
html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
超实用CSS技巧总结（1）——背景和边框
文章内容来自CSS神书<CSS揭秘>. 献上膝盖就好 1.半透明边框错误的写法: div {background-color: white;border: 10px solid hsla ...
CSS3技巧：利用css3径向渐变做一张优惠券（转）
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
CSS3初级学习（二）背景图片叠加
CSS3初级学习(二) 背景图片叠加 Hello!大家好久不见,这里是学业日渐繁忙的万物之恋,沉迷学习无心写博客(并不是),久违的来和大家分享下自己在学习过程中碰到的一些有趣案列.话不多说: 先看效果 ...

CSS3技巧35：滚动的条纹背景

1. 线性渐变背景

2. 线性重复渐变

3. 滚动的条纹背景

CSS3技巧35：滚动的条纹背景相关推荐

最新文章

热门文章