若何處理mysqlimport: Error: 13, Can't get stat of 的成績。本站提示廣大學習愛好者：（若何處理mysqlimport: Error: 13, Can't get stat of 的成績）文章只能為提供參考，不一定能成為您想要的結果。以下是若何處理mysqlimport: Error: 13, Can't get stat of 的成績正文
在網頁設計中，想必一個出色的進度條將會為你的網站增加很多的出色，一個好的網頁設計常常表現在一些小的細節下面，細節決議了勝利與否。在此之前也為年夜家分享了一些關於進度條的設計 ― 讓人不能不愛的22個UI進度條設計。有了設計理念和作品，那我們怎樣用最出色的辦法應用到我們的網頁制造傍邊呢﹖明天就為年夜家分享一個應用css3制造靜態進度條和附加jQuery百分比數字顯示。其後果比較flash來講卻絕不減色，有一個精細的動畫進度條，下面還有以後進度的百分比數字顯示，並且還會隨著進度條而挪動。信任尋求新鮮的同伙來講必定會異常的愛好。
HTML代碼
HTML的代碼異常簡略，只需為進度條供給一個容器便可以了。根本的HTML代碼以下：
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
</div>
<h1>Loading</h1>
<p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>
CSS款式表
接上去是為我們的進度條界說款式，這裡重要應用了CSS3的linear-gradient的突變屬性、border-radius的圓角屬性、box-shadow的暗影屬性等等，來制造出進度條的初步模子。完成進度條的模子後我們應用animation屬性，讓進度條開端動起來，就個中的進度條動畫設置代碼以下：
.load-bar-inner {
height: 99%;
width: 0%;
border-radius: inherit;
position: relative;
background: #c2d7ac;
background: linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10s linear infinite;
}
假如接觸了CSS3的同伙，信任年夜多半人對這個屬性都比擬熟習了，在這裡年夜概的解釋一下animation設置的參數：
設置對象所運用的動畫稱號：loader
設置對象動畫的連續時光：10s
設置對象動畫的過渡類型：linear （線性過渡，同等於貝塞爾曲線）
設置對象動畫的輪回次數：infinite （無窮輪回）
@keyframes loader這個標簽屬性是用來被animation應用的，界說動畫時，簡略的動畫可以直接應用症結字from和to，即從一種狀況過渡到另外一種狀況：
@keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
上面是完全的CSS代碼，年夜家可以多研討下，也能夠本身修正個中的代碼，看看能否制造出加倍風趣的器械來：
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #efeeea;
background: linear-gradient(#f9f9f9, #cecbc4);
background: -moz-linear-gradient(#f9f9f9, #cecbc4);
background: -webkit-linear-gradient(#f9f9f9, #cecbc4);
background: -o-linear-gradient(#f9f9f9, #cecbc4);
color: #757575;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-align: center;
}
h1, p {
padding:0; margin:0;
}
.wrapper {
width: 350px;
margin: 200px auto;
}
.wrapper p a {color:#757575; text-decoration:none;}
.wrapper .load-bar {
width: 100%;
height: 25px;
border-radius: 30px;
background: #dcdbd7;
position: relative;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.wrapper .load-bar-inner {
height: 99%;
width: 0%;
border-radius: inherit;
position: relative;
background: #c2d7ac;
background: linear-gradient(#e0f6c8, #98ad84);
background: -moz-linear-gradient(#e0f6c8, #98ad84);
background: -webkit-linear-gradient(#e0f6c8, #98ad84);
background: -o-linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10s linear infinite;
-moz-animation: loader 10s linear infinite;
-webkit-animation: loader 10s linear infinite;
-o-animation: loader 10s linear infinite;
}
.wrapper #counter {
position: absolute;
background: #eeeff3;
background: linear-gradient(#eeeff3, #cbcbd3);
background: -moz-linear-gradient(#eeeff3, #cbcbd3);
background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
background: -o-linear-gradient(#eeeff3, #cbcbd3);
padding: 5px 10px;
border-radius: 0.4em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
left: -25px;
top: -50px;
font-size: 12px;
font-weight: bold;
width: 44px;
animation: counter 10s linear infinite;
-moz-animation: counter 10s linear infinite;
-webkit-animation: counter 10s linear infinite;
-o-animation: counter 10s linear infinite;
}
.wrapper #counter:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #cbcbd3;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
left: 50%;
margin-left: -4px;
bottom: -4px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 0;
}
.wrapper h1 {
font-size: 28px;
padding: 20px 0 8px 0;
}
.wrapper p {
font-size: 13px;
}
@keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@-moz-keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@-webkit-keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@-o-keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}
@-moz-keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}
@-webkit-keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}
@-o-keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}
在這裡其實有許多個CSS3的常識點，例如進度條下面的進度提醒的小圖標的下方有個小三角形，這個小三角重要是經由過程制造一個小的正方形，然後應用position來定位，調劑好地位後，再經由過程transform來轉換角度，使之終究成為一個三角形。年夜家可以多多看看外面的一些小細節，關於進修CSS3來講是很有贊助的。
Javascript
完成了進度條的模子，並且進度條也經由過程CSS3的界說開端動起來了，那我們就接上去用jQuery來完美我們的進度條，讓他成為一個不論表面照樣心坎都很壯大的進度條。嘿嘿…在這裡重要做的是讓進度條下面的數字跟著進度而產生變更，從而客不雅的曉得以後進度條的進度百分比，看上面的代碼：
$(function(){
var interval = setInterval(increment,100);
var current = 0;
function increment(){
current++;
$('#counter').html(current+'%');
if(current == 100) { current = 0; }
}
$('.load-bar').mou搜索引擎優化ver(function(){
clearInterval(interval);
}).mou搜索引擎優化ut(function(){
interval = setInterval(increment,100);
});
});
這一步須要留意的是別忘了參加jQuery庫，否則就看不到後果了。
