1.設計網頁結構(html/5)
2.利用css3 的animation實現動畫效果
3.給樣式設定position屬性,利用「父相子絕」實現定位
4.使用box-shadow實現小點點
效果如下:
結構如下:
loading...
loading...
loading...
loading...
loading
loading
loading
loading
loading
樣式設定如下
pb.css
*
body
div.loading_1
.ul1
.ul1 li
.loading_1_1
.loading_1_2
.loading_1_3
.loading_1_4
.loading_1_5
.loading_1
/**/
.loading_2
.ul2
.ul2 li
.loading_2_1
.loading_2_2
.loading_2_3
.loading_2_4
.loading_2_5
/**/
@keyframes progressmove
100%
}/* 第三種 */
.loading_3
.circle1
@keyframes move1
100%
}.circle2
@keyframes move2
100%
}.circle3
@keyframes move3
100%
}.loading_3 .loading
/*four*/
.loading_4
.loading_4 .loading
.loading_4 .circle
@keyframes rotatemove4
50%100%
}/*loading_5*/
.loading_5
.loading_5 .bg
.loading_5 .circle
@keyframes rotatemove5
to}.loading_5 .loadword
.loading_5 .loading
@keyframes change
50%75%
}/*loading_6*/
.loading_6
.circleout
.circlein
@keyframes circleroate
to}.loading_6 p
/*loading7*/
.loading_7
.loading_7 p
.loaing_7 loading
.loading_7_1
.loading_7_2
.loading_7_3
.loading_7_4
.loading_7_5
.loading_7_6
@keyframes colmove
100%
}/*loading 8*/
.loading_8
.loading bg
.loading_8 .loading
@keyframes loadingmove
100%
}.loading_8 p
/*loading9*/
.loading_9
.loading_9 .loading
@keyframes showmove
25%37.5%
50%62.5%
75%}@keyframes showmove2
50%100%
}@keyframes changemove2
50%75%
}@keyframes changemove2
100%
}.loading_9 .loadingword
/*loading_10*/
.loading_10
.loading_10 .circle
@keyframes move to}
bootstrap 進度條樣式
bootstrap為我們提供具有漂亮樣式的進度條來表示乙個事務的進度,如下 實現方法如下 1 引入bootrap檔案,html view plain copy link rel stylesheet href libs bootstrap 3.3.7 css bootstrap.css 2 新增乙個...
學習進度條10
星期日星期一 星期二星期三 星期四星期五 星期六所花時間 包括上課 15 45 18 00 8 00 9 50 15 30 16 17 19 21 20 10 15 40 16 11 15 17 18 11 08 00 09 00 量 行 79行41行 0行0行 0行0行 0行部落格量 篇 了解到的...
用access實現的進度條
其實用access實現進度條幾簡單。用vba都能,相信用其它的語言也是相同,可能差別就是放在不同的事件裡吧!下面的 放在窗體的 計時器觸發 順便提一下最好設計時器間隔為100 private sub form timer if text1.value 100 then text1.value 1 t...