在之前的文章《手把手教你如何使用CSS3实现动画效果（代码分享）》中，我将向你介绍如何使用CSS3动画效果设置经验。 下面的文章将为大家介绍如何使用css3给图片添加渐变效果，一起来看看吧。
第一次接触css3渐变是很久以前的事了。 我觉得这个事情很有趣。 就像玩PS一样，你可以做出很多华丽的东西。
浏览器支持IEFFChromeSafariOperaiOSAndroidAndroidChrome
6-9（无）
2-3.5（无）
4-9（部分-webkit-）
3.1-3.2（无）
3.2-4.3（部分）
2.1-3.0（-webkit-）
10-25(-webkit-)
10+
3.6-15（-webkit-）
10-25(-webkit-)
4-5（部分）5-6.1（-webkit-）
5+
4-4.3（-webkit-）
26+
15+
25+
5-6
15+
4.4+
线性渐变 线性渐变
使用句型
linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,]+);
以下代码均可运行，执行结果相同
linear-gradient(#fff, #333); linear-gradient(to bottom, #fff, #333); linear-gradient(to top, #333, #fff); linear-gradient(180deg, #fff, #333); linear-gradient(to bottom, #fff 0%, #333 100%);
您可以定义角度、起始方向、颜色和颜色比例
演示
div {
background: linear-gradient(
to right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
填充尝试线性渐变重复线性渐变
用法和线性渐变类似，虽然是渐变的填充。可以精确到像素渐变css3，例如实现斑马纹
.g {
background: repeating-linear-gradient(
-45deg,
transprent,
transprent 25px,
#fff 25px,
#fff50px
);
}
径向渐变 Radial-gradient
使用句型
radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]+ )
下面的代码执行结果相同
radial-gradient(circle, #f00, #ff0, #080); radial-gradient(circle at center, #f00, #ff0, #080); radial-gradient(circle at 50%, #f00, #ff0, #080); radial-gradient(circle farthest-corner, #f00, #ff0, #080);
您可以使用长度来快速定位形状的位置。 最近侧渐变的边缘形状与最靠近渐变中心的容器侧（正方形）相切，或者至少与最靠近渐变中心的垂直和水平侧（椭圆）相切。
最近角渐变的边缘形状与容器的最近角与渐变中心点相交。
farthest-side 与closest-side 相反渐变css3，边缘形状与距离渐变中心点最远的容器边（或最远的垂直和水平边）相切。
最远角渐变的边缘形状与距渐变中心点最远的容器角相交。
可以使用at快速制定圆心位置circleatlefttop 圆心在左上角
代码示例
div {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.g1 {
background: radial-gradient(circle at center, #f00, #ff0, #080);
}
.g2 {
background: radial-gradient(circle closest-side, #f00, #ff0, #080);
}
.g3 {
background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
}
.g4 {
background: radial-gradient(at top right, #f00, #ff0, #080);
}
.g5 {
background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
}
.g6 {
background: radial-gradient(
farthest-side at top right,
#f00,
#ff0,
#080,
transparent
), radial-gradient(60px at top left, #f00, #ff0, #080);
}
得到如下
填充径向渐变重复径向渐变
这和repeating-linear-gradient的使用类似，都是渐变的填充。
代码示例
div {
width: 200px;
height: 100px;
border: 1px solid #ddd;
float: left;
margin: 10px;
}
.g1 {
background: repeating-radial-gradient(circle, #f00 0, #ff0 10%, #f00 15%);
}
.g2 {
background: repeating-radial-gradient(
at top left,
#f00,
#ff0 10%,
#080 15%,
#ff0 20%,
#f00 25%
);
}
.g3 {
background: repeating-radial-gradient(
circle closest-corner at 20px 50px,
#f00,
#ff0 10%,
#080 20%,
#ff0 30%,
#f00 40%
);
}
得到如下
借助渐变可以实现许多效果
代码示例
@keyframes up {
0% {
top: 100%;
}
100% {
top: -100px;
}
}
.blister {
position: absolute;
width: 80px;
height: 80px;
display: block;
border-radius: 50%;
// left: 300px;
overflow: hidden;
animation: up 20s linear infinite;
bottom: -100%;
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
&:hover {
animation-play-state: paused;
}
&::before {
content: "";
left: 0;
top: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 20px #fff inset;
position: absolute;
border-radius: 50%;
}
.light {
border-radius: 50%;
width: 75px;
height: 54px;
transform: rotate(140deg);
top: -24px;
position: absolute;
left: -18px;
display: block;
background: radial-gradient(farthest-side, #fff, rgba(255, 255, 255, 0));
}
.light2 {
width: 24px;
height: 15px;
position: absolute;
bottom: 9px;
right: 15px;
transform: rotate(-25deg);
border-radius: 50%;
display: block;
background: radial-gradient(farthest-side, #fff, rgba(255, 255, 255, 0));
}
}
如右图，可以做出漂亮的泡泡
然后使用上一篇文章中的动画让他动起来。
要查看效果，请点击此处推迟动画，稍后会出现。
推荐学习：CSS3视频教程
以上就是教你如何使用css3给图片添加渐变效果的详细内容（代码解读）！
CSS3实现“红包照片”的模糊效果
近日，同学圈里的红包照片引起了不少“雾霾”。 它是如何实现的？ 下面YJBYS小编就来给大家介绍一下！
废话不多说，直接上代码看看如何实现“红包照片”的模糊效果：
达到模糊疗效的途径：
如果我们想要对图像进行模糊处理，我们就会想到CSS3中的filter属性filter。 这个属性可以像photoshop一样处理，得到很多效果。 它常用于处理图片、DOM元素和视频等，并已被大多数现代浏览器支持。
过滤器的值有很多。 这里我们首先介绍一个模糊图片所必需的值blur()。 这是设置高斯模糊，即将一个像素重置为周围像素的平均值； 参数值越大，即周围范围越大，越模糊； 该参数可以以像素为单位设置，不接受百分比值；
如滤镜：blur(5px)
选择一张图片并设置其滤镜属性，对比图如下：
这样就大致实现了毛玻璃的模糊疗效。 这大致说明，距离理想还是有点差距。 如果仔细观察疗效，你会发现几个问题：
图片之外也是模糊的，尤其是背景颜色与图片颜色的对比更容易发现模糊的边缘；
图片边缘内部，很窄的部分接近透明，显露出背景的颜色；
去除模糊边缘
问题1可以通过两种方式解决：
在图片外面添加一层容器，容器的宽度和高度与图片一致，设置容器样式为overflow:hidden； 消除边缘模糊；
您还可以使用 Clip: rect(top, right, Bottom, right); 直接在图像元素上剪出一个圆圈。 需要注意的是，被裁剪的元素必须是绝对定位的元素，即需要设置position:absolute; 同时
消除透明边缘
问题2是因为高斯模糊算法而形成的，使得图片的边缘接近于透明，也可以理解为图片被裁剪了。 Blur()参数的值越大，越突出，背景颜色就会暴露。
解决方法如下：
在图像外面添加一层容器，与图像的宽度和高度相同，并设置相同的图像作为容器的背景图像css加图片，这样剩下的就是容器中的背景图像。
示例代码：
// HTML 结构
// CSS样式(显示关键部分).container {
宽度：300px；
高度：300px；
背景图像：无；
背景重复：不重复；
溢出：隐藏；
.模糊{
宽度：300px；
高度：300px；
背景：继承； /* 继承父元素的样式 */
-webkit-过滤器：模糊（10px）；
滤镜：模糊（10px）；
这样，透明边缘暴露出来的部分也是图片的内容。 虽然没有模糊效果，但效果更好。 如果追求完美，还可以将模糊层扩大几个像素，超出容器，控制位置即可。
修改之前的代码：
// 代码相同部分被省略（即省略号部分）.container {
位置：相对；
...
.模糊{
宽度：320px；
高度：320像素；
位置：绝对；
顶部：-10px；
左：-10px；
...
就完成了图片的模糊处理。 和ios7上的磨砂玻璃相比，效果可能不太一样。 感觉缺少了一点质感。 下面是filter属性的另外两个值：
Brightness() - 设置元素的色温css加图片，值越大越亮，一个比例参数；
对比() - 设置元素对比度，值越大对比度越显着，是一个比率参数；
这里通过调试对比得出一个与磨砂玻璃疗效类似的参数值：
滤镜：模糊（8px）亮度（1.4）对比度（0.4）；
【CSS3实现“红包照片”模糊效果】相关文章：
1.
2、照片墙效果图
3.css3实现地球自转代码图文教程
4.PS打造秋季照片效果教程
5. CSS3制作导航栏和毛玻璃效果
六、如何达到演讲的预期疗效
7.如何制作CSS3导航栏和毛玻璃效果
8.菜鸟教程：科普5种常见PS模糊疗效
