用動畫實現10種進度條樣式

2021-10-05 08:26:04 字數 2336 閱讀 2049

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...