css3渐变实例

以前想要做背景由几种颜色来过度的效果，只能通过图片来代替。直到后来W3C组织将渐变收入到CSS3标准中，这个用css3渐变才慢慢的试图取代图片做的渐变效果。现在css3的渐变兼容已经非常高了，如果大家只做移动端或者pc端不考虑低版本的IE浏览器，是可以使用css3的渐变啦，过度效果非常漂亮哦。渐变分为线性渐变和径向渐变，线性渐变的默认角度是180°，当然径向渐变相对于线性渐变来说复杂很多，这里就不详细讲，只讲我实例中用到的，想去了解具体属性可以去查资料。

线性渐变（linear-gradient）：颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴，linear-gradient（角度、颜色、百分比）。

径向渐变（radial-gradient）：从一个起点朝所有方向混合，radial-gradient（left百分比 top百分比、颜色、百分比）。

示例图：

html代码：

<div class="box1">我是线性渐变</div>
<div class="box2">我是径向渐变</div>

css代码：

.box1,.box2{
	width: 300px;
	height: 300px;
	line-height:300px;
	display: inline-block;
}
.box1{
	background-image: -webkit-linear-gradient(90deg,#5FC08B 0%,#BED479 50%,#EF865B 100%);/*Chrome*/
	background-image: -o-linear-gradient(90deg,#5FC08B 0%,#BED479 50%,#EF865B 100%);/*Opera*/
	background-image: -moz-linear-gradient(90deg,#5FC08B 0%,#BED479 50%,#EF865B 100%);/*firefox*/
}
.box2{
	border-radius: 50%;	
	background-image: -webkit-radial-gradient(30% 30%,#fff 0%,#515151 72%);	
	background-image: -o-radial-gradient(30% 30%,#fff 0%,#515151 72%);	
	background-image: -moz-radial-gradient(30% 30%,#fff 0%,#515151 72%);	
}

如有写得不对的地方，欢迎指出。

给大家推荐一个很好用的css库，叫Animate.css。

官方网站：https://daneden.github.io/animate.css/

cdn链接：https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css

用法：给需要的盒子添加必须的class -- animated  然后再找合适的效果的class添加进去即可。