【180网站】61-66

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);}};}());

2.

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

3.

css3 transition, 属性变换过渡。

css3 animation, 动画。

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

4.