css动画+jQuery实现气泡背景

写了一个动态背景：渐变背景色下移，气泡上移。

预览：

实现思路：

1、先实现渐变背景：将背景色设为渐变（注意设置首尾颜色相同，否则动画时会出现明显分界线）

      background:linear-gradient(to bottom,#DFDFF5 ,#FF9980,#FFF280,#FFC080,#DFDFF5); 

2、将背景动起来：先用 background-size  将背景图像的尺寸扩大；  通过 @keyframes 规则，创建动画：通过 background-position 设置背景图像运动的起始位置和终止位置。

3、实现气泡：我通过<li>标签，将每个<li></li>通过css设置样式为气泡状（圆形、半透明中央、实线边框）。

4、使气泡动起来：首先使气泡的 bottom 值为一个比较大的负数，才能使气泡从底下升上去；  通过 @keyframes 规则，创建动画：使用 translateY() 转换气泡Y轴的值，使气泡上升。

5、产生多个不同颜色、大小、不同位置上升的气泡：使用 jQuery循环添加<li>节点，即添加多个气泡；   每个节点添加不同样式：这里需要注意的是使用eq() 方法 匹配当前节点。

例：  $('li').eq(2).css('background-color', 'red');

                          ———————————————代  码————————————————-

HTML：

<div class="background"> <ul id="ul-cir"></ul> </div>

css：

body{
	padding:0;
	margin:0;	
}
div.background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; 
	background:linear-gradient(to bottom,#DFDFF5,#FF9980,#FFF280,#FFC080,#DFDFF5); /*背景渐变色*/
	background-size:200% 200%;
	animation:bjmove 30s infinite linear;
}
@keyframes bjmove{ /*背景移动动画*/
	from {background-position: 0 200% ;}
	to {background-position:0 0;}
}

.li-cir{
	list-style:none; /*去除ul li的默认样式*/
	width:30px;
	height:30px;
	border-radius:50%;
	position: absolute;
    bottom:-160px;
	animation: ppmove 15s infinite;
}
@keyframes ppmove { /*泡泡移动动画*/
  0% {
    opacity: 0.5;
    transform: translateY(0px)  }
  25% {
    opacity: 0.8;
    transform: translateY(-400px) }
  50% {
    opacity: 1; 
    transform: translateY(-600px) }
  100% {
    opacity: 1; 
    transform: translateY(-1000px) } 
}

jQuery：

$(document).ready(function(){
	
	for(var i=0; i<9; i++){
		var rand = new Array();//rgb色彩值
		for(var j=0; j<3; j++){
			rand[j] = Math.floor(Math.random() * 26 + 230); // 230 ~ 255
		}
		var  op = Math.floor(Math.random()* 5 + 2) / 10; //均衡获取rgba的透明度的随机数
		var left = Math.floor(Math.random()* 100 )+"%"; //泡泡随机分布的距离
		var delay = Math.floor(Math.random()* 10)+"s"; //每个泡泡出现推迟的时间
		var dur = Math.floor(Math.random()* 10 + 11)+"s"; //泡泡完成一个周期所需要的时间
		var enlarge = Math.floor(Math.random()* 40 + 30); //泡泡扩大到的宽和高
		
		$("#ul-cir").append("<li class='li-cir'></li>"); //增加一个泡泡
		$("#ul-cir li").eq(i).css("background","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+op+")");//选取ul li中匹配的索引顺序为i的元素赋予背景颜色
		$("#ul-cir li").eq(i).css("border","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+1+") 1px solid");//给泡泡加上边框
		$("#ul-cir li").eq(i).css("left",left); //泡泡出现的距离值
		$("#ul-cir li").eq(i).css("animation-delay",delay); //泡泡出现推迟的时间
		$("#ul-cir li").eq(i).css("animation-duration",dur); //泡泡完成一个周期所需要的时间
		$("#ul-cir li").eq(i).css("width",enlarge).css("height",enlarge); //扩大泡泡
	}
});