飞机进度条
css部分 *{padding:0; margin:0;}
.container{ margin: 0 auto; width: 60%; padding:20px; }
.progress{ margin-top: 50px; padding: 10px; background: grey; border-radius: 5px; height: 20px; } .progress::after{ content:""; display: block; margin-top: 9px; width: 100%; border-top: dashed 3px white; } .progress .progress-bar { float: left; height: 100%; position: relative; } .progress .progress-bar span{ display: block; width: 40px; height: 30px; background: #333; position: absolute; right: -40px; top: -50px; color: white; text-align:center; line-height: 30px; border-radius: 3px; } .progress .progress-bar span::before{ position: absolute; font-family: fontawesome; content: "\f0d7"; font-size: 24px; color: #333; top: 18px; right: 13px; } .progress .progress-bar span::after{ position: absolute; font-family: fontawesome; content: "\f072"; font-size: 48px; color: #333; transform: rotateZ(45deg); top: 47px; right: 5px; } html部分和js部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap飛機跑道進度條動畫特效 - 站長素材</title> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="progress"> <div class="progress-bar" style="width: 55%; background:#005394;"> <span>55%</span> </div> </div>
<div class="progress"> <div class="progress-bar" style="width: 100%; background:#d9534f;"> <span>100%</span> </div> </div>
<div class="progress"> <div class="progress-bar" style="width: 40%; background:#f0ad4e;"> <span>40%</span> </div> </div> </div>
</body> </html> <script> var ps = document.getElementsByClassName("progress-bar"); for( let i = 0 ; i < ps.length ; i++ ){ let timer = setInterval( ()=>{ if( parseInt( ps[i].style.width ) == 100 ){ clearInterval( timer ); }else{ ps[i].style.width = parseInt( ps[i].style.width ) +1 + "%"; ps[i].children[0].innerHTML = ps[i].style.width; } },60 ) } </script>
.container{ margin: 0 auto; width: 60%; padding:20px; }
.progress{ margin-top: 50px; padding: 10px; background: grey; border-radius: 5px; height: 20px; } .progress::after{ content:""; display: block; margin-top: 9px; width: 100%; border-top: dashed 3px white; } .progress .progress-bar { float: left; height: 100%; position: relative; } .progress .progress-bar span{ display: block; width: 40px; height: 30px; background: #333; position: absolute; right: -40px; top: -50px; color: white; text-align:center; line-height: 30px; border-radius: 3px; } .progress .progress-bar span::before{ position: absolute; font-family: fontawesome; content: "\f0d7"; font-size: 24px; color: #333; top: 18px; right: 13px; } .progress .progress-bar span::after{ position: absolute; font-family: fontawesome; content: "\f072"; font-size: 48px; color: #333; transform: rotateZ(45deg); top: 47px; right: 5px; } html部分和js部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap飛機跑道進度條動畫特效 - 站長素材</title> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="progress"> <div class="progress-bar" style="width: 55%; background:#005394;"> <span>55%</span> </div> </div>
<div class="progress"> <div class="progress-bar" style="width: 100%; background:#d9534f;"> <span>100%</span> </div> </div>
<div class="progress"> <div class="progress-bar" style="width: 40%; background:#f0ad4e;"> <span>40%</span> </div> </div> </div>
</body> </html> <script> var ps = document.getElementsByClassName("progress-bar"); for( let i = 0 ; i < ps.length ; i++ ){ let timer = setInterval( ()=>{ if( parseInt( ps[i].style.width ) == 100 ){ clearInterval( timer ); }else{ ps[i].style.width = parseInt( ps[i].style.width ) +1 + "%"; ps[i].children[0].innerHTML = ps[i].style.width; } },60 ) } </script>
轉載于:https://www.cnblogs.com/tis100204/p/10328871.html
總結
- 上一篇： 2010年·总结
- 下一篇： 教您用公式编辑器快速输入公式