【180网站】61-66

1. js实现的进度条效果：

代码：

html:

	
Fix in progress.
		
		
			

		
	

css: 

#process {
	position: absolute;
	top: 60px;
	left: 200px;
	width: 300px;
	height: 100px;
	margin: 0 auto;
	
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 5px;	
}
#process .hint {
	color: #10e3d1;
	margin-top: 10px;
	letter-spacing: 1px;
}

#bar_container {
	height: 10px;
	width: 250px;
	margin: 5px auto;
	background-color: #333;
	border-radius: 20px;
	border: 7px solid rgba(0, 0, 0, 0.9);
}
#inner_bar {
	height: 6px;
	width: 0;
	margin: 2px;
	border-radius: 12px;
	background-color: #07e8a8;
	box-shadow: 0 0 5px rgba(7, 232, 168, 0.7);
}

js:

var incrementBar = (function() {
	
		var length = 10;
		return function processBar() {
			
			length++;
			if (length > 240) {
				
				$("#button").removeClass("gray").addClass("red");
				$("#process").hide();
				$("#inner_bar").css("width", 10);
				$(".message.end").show();
				length = 10;

			} else {
				$("#inner_bar").css("width", length);
				setTimeout(processBar, 20);
			}
		};
		
	}());
 
  
 
  
 
  
 
  
 
  
2.
 
  
不要让container的margin-top不为0，否则影响body.
 
  
3.
 
  
css3 transition, 属性变换过渡。
 
  
css3 animation, 动画。
 
  
css3 transform: 变形，scale(x, y);大小改变。可配合animation使用。
 
  
4.