純CSS3實現超酷進度條-魔扣目錄

<!DOCTYPE html> <html> <head> <meta charset="GB2312" /> <title>CSS3打造的<strong>進度條</strong></title> <style> body { background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEUqKiopKSkoKCgjIyMuLi4kJCQtLS0dJckpAAAAO0lEQVR42iXLAQoAUQhCQSvr/kfe910jHIikElsl5qVFa1iE5f0Pom/CNZdbNM6756lQ41NInMfuFPgAHVEAlGk4lvIAAAAASUVORK5CYII="); font: 13px 'trebuchet MS', Arial, Helvetica; } h2, p { text-align: center; color: #fafafa; text-shadow: 0 1px 0 #111; } a { color: #777; } /*---------------------------*/ .progress-bar { background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 70px 0 20px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; } .progress-bar span { display: inline-block; height: 100%; background-color: #777; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-transition: width .4s ease-in-out; -moz-transition: width .4s ease-in-out; -ms-transition: width .4s ease-in-out; -o-transition: width .4s ease-in-out; transition: width .4s ease-in-out; } /*---------------------------*/ .blue span { background-color: #34c2e3; } .orange span { background-color: #fecf23; background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215)); background-image: -webkit-linear-gradient(top, #fecf23, #fd9215); background-image: -moz-linear-gradient(top, #fecf23, #fd9215); background-image: -ms-linear-gradient(top, #fecf23, #fd9215); background-image: -o-linear-gradient(top, #fecf23, #fd9215); background-image: linear-gradient(top, #fecf23, #fd9215); } .green span { background-color: #a5df41; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916)); background-image: -webkit-linear-gradient(top, #a5df41, #4ca916); background-image: -moz-linear-gradient(top, #a5df41, #4ca916); background-image: -ms-linear-gradient(top, #a5df41, #4ca916); background-image: -o-linear-gradient(top, #a5df41, #4ca916); background-image: linear-gradient(top, #a5df41, #4ca916); } /*---------------------------*/ .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); -webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; } @-webkit-keyframes animate-stripes { 0% { background-position: 0 0; } 100% { background-position: 60px 0; } } @-moz-keyframes animate-stripes { 0% { background-position: 0 0; } 100% { background-position: 60px 0; } } /*---------------------------*/ .shine span { position: relative; } .shine span::after { content: ''; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-animation: animate-shine 2s ease-out infinite; -moz-animation: animate-shine 2s ease-out infinite; } @-webkit-keyframes animate-shine { 0% { opacity: 0; width: 0; } 50% { opacity: .5; } 100% { opacity: 0; width: 95%; } } @-moz-keyframes animate-shine { 0% { opacity: 0; width: 0; } 50% { opacity: .5; } 100% { opacity: 0; width: 95%; } } /*---------------------------*/ .glow span { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; -webkit-animation: animate-glow 1s ease-out infinite; -moz-animation: animate-glow 1s ease-out infinite; } @-webkit-keyframes animate-glow { 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; } 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset; } 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; } } @-moz-keyframes animate-glow { 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; } 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset; } 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; } } </style> </head> <body style='margin:100px 10px;'> <div style=" width:360px; margin:0 auto"> <br> <br> <h1>CSS3進度條</h1> <div class="progress-bar blue stripes"> <span style="width: 40%"></span> </div> <p>Set above to: <a href="#" class="quarter">25%</a> / <a href="#" class="half">50%</a> / <a href="#" class="three-quarters">75%</a> / <a href="#" class="full">100%</a> </p> <div class="progress-bar orange shine"> <span style="width: 65%"></span> </div> <p>Set above to: <a href="#" class="quarter">25%</a> / <a href="#" class="half">50%</a> / <a href="#" class="three-quarters">75%</a> / <a href="#" class="full">100%</a> </p> <div class="progress-bar green glow"> <span style="width: 55%"></span> </div> <p>Set above to: <a href="#" class="quarter">25%</a> / <a href="#" class="half">50%</a> / <a href="#" class="three-quarters">75%</a> / <a href="#" class="full">100%</a> </p> </div> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ $('.quarter').click(function(){ $(this).parent().prev().children('span').css('width','25%'); }); $('.half').click(function(){ $(this).parent().prev().children('span').css('width','50%'); }); $('.three-quarters').click(function(){ $(this).parent().prev().children('span').css('width','75%'); }); $('.full').click(function(){ $(this).parent().prev().children('span').css('width','100%'); }); }); </script> </body> </html>
提示：您可以先修改部分代碼再運行

純CSS3實現超酷進度條站長圖庫推薦

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

純CSS3實現超酷進度條

數獨大挑戰2018-06-03

答題星2018-06-03

全階人生考試2018-06-03

運動步數有氧達人2018-06-03

每日養生app2018-06-03

體育訓練成績評定2018-06-03