CSS3帶有節點的進度條效果
分享一段程式碼例項,它實現了帶有節點的進度調效果。
這樣的需求在實際應用中算是比較多的,需要的朋友可以做一下參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #progressBar { width: 80%; height: 50px; position: relative; margin: auto; margin-top: 30px; } #progressBar div { width: 100%; height: 10px; position: absolute; top: 50%; left: 0; margin-top: -20px; background: #ccc; } #progressBar div span { position: absolute; display: inline-block; background: green; height: 10px; width: 100%; -webkit-animation: bgLoad 5.5s linear; } @-webkit-keyframes bgLoad { 0% { width: 0%; } 18.18%,27.27% { width: 25%; } 45.45%,54.54% { width: 50%; } 72.72%,81.81% { width: 75%; } 100% { width: 100%; } } #progressBar > span { position: absolute; top: 0; margin-top: -10px; width: 40px; height: 40px; border-radius: 50%; background: #ccc; margin-left: -20px; color: #fff; } @-webkit-keyframes circleLoad_1 { 0%,66.66% { background: #ccc; } 100% { background: green; } } @-webkit-keyframes circleLoad_2 { 0%,83.34% { background: #ccc; } 100% { background: green; } } @-webkit-keyframes circleLoad_3 { 0%,88.88% { background: #ccc; } 100% { background: green; } } @-webkit-keyframes circleLoad_4 { 0%,91.67% { background: #ccc; } 100% { background: green; } } #progressBar span:nth-child(2) { left: 0%; background: green; } #progressBar span:nth-child(3) { left: 25%; background: green; -webkit-animation: circleLoad_1 1.5s ease-in; } #progressBar span:nth-child(4) { left: 50%; background: green; -webkit-animation: circleLoad_2 3s ease-in; } #progressBar span:nth-child(5) { left: 75%; background: green; -webkit-animation: circleLoad_3 4.5s ease-in; } #progressBar span:nth-child(6) { left: 100%; background: green; -webkit-animation: circleLoad_4 6s ease-in; } </style> </head> <body> <div id="progressBar"> <div> <span></span> </div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).animation參閱CSS3 animation一章節。
(2).@keyframes參閱CSS3 @keyframes一章節。
(3).:nth-child參閱CSS E:nth-child(n)一章節。
相關文章
- 簡單實現帶節點的進度條
- CSS3圓形進度條效果CSSS3
- CSS3進度條效果程式碼CSSS3
- CSS3實現原型進度條效果CSSS3原型
- CSS3 螺紋載入進度條效果CSSS3
- Javascript 及 CSS3 實現進度條效果JavaScriptCSSS3
- javascript實現的帶有百分比的進度條效果JavaScript
- 可愛!帶有數字顯示的載入進度條效果外掛
- CSS3帶有倒影的文字效果CSSS3
- jQuery 進度條效果程式碼jQuery
- canvas環形進度條效果Canvas
- CSS快遞進度條效果CSS
- C# 下載帶進度條程式碼(普通進度條)C#
- css3 製作圓環進度條CSSS3
- jQuery實進度條效果詳解jQuery
- 帶進度條的檔案上傳
- CSS3 帶有箭頭圓角效果CSSS3
- 上傳檔案帶進度條
- JavaScript 動態進度條效果詳解JavaScript
- iOS實現音訊進度條效果iOS音訊
- 實現環形進度條效果【一】
- jQuery進度條效果程式碼例項jQuery
- 【新特性速遞】進度條,進度條,進度條
- css3實現的進度條程式碼例項CSSS3
- HTML5/CSS3超酷進度條 不同進度多種顏色HTMLCSSS3
- 超炫!HTML5 粒子效果進度條HTML
- css3帶有光暈的流星效果程式碼例項CSSS3
- 不可思議的純 CSS 滾動進度條效果CSS
- canvas實現具有粒子效果的動態進度條Canvas
- HTML5超炫酷粒子效果的進度條HTML
- 帶進度條複製檔案代替copyfile
- css3實現底部帶有箭頭的圓角矩形效果CSSS3
- Android 編寫一個帶進度條的WebviewAndroidWebView
- jQuery環形旋轉載入進度條效果jQuery
- css實現螺紋動態進度條效果CSS
- JavaScript帶有百分比的滑動條效果JavaScript
- vue中頁面載入進度條效果的實現Vue
- js結合progress標籤實現的進度條效果JS