【180网站】61-66-CSDN博客

本文链接：https://blog.csdn.net/shatangju/article/details/38982431

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

代码：

html:

<pre name="code" class="html"><div id="process">
<span style="white-space:pre">	</span><div class="hint">Fix in progress.</div>
		<div id="bar_container">		
			<div id="inner_bar"></div>
		</div>
	</div>

</div>

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:

<pre name="code" class="javascript">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);
			}
		};
		
	}());

不要让container的margin-top不为0，否则影响body.

css3 transition, 属性变换过渡。

css3 animation, 动画。

css3 transform: 变形，scale(x, y);大小改变。可配合animation使用。