用css3和jquery實現的漸進式的動態進度條-css教學-PHP中文網

首頁

web前端

css教學

用css3和jquery實現的漸進式的動態進度條

高洛峰

Nov 24, 2016 am 09:40 AM

進度條是網站中常見的一種，今天經過研究外國一個網站的例子，試著用css3來實現進度條：

html程式碼如下：

    <div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>
<p>Set above to:
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
</p>
 
<div class="progress-bar orange shine">
    <span style="width: 65%"></span>
</div>
<p>Set above to:
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
</p>
 
<div class="progress-bar green glow">
    <span style="width: 55%"></span>
</div>
<p>Set above to:
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
    <a href="http://www.php1.cn/">
</p>

css樣式：

re背景：

body{ background:#222; width:360px; margin:0 auto; font:13px &#39;trebuchet MS&#39;,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-raidus:5px; border-radius:5px;-moz-box-shadow:0 1px 5px #000 inset, 0 1px 0 #444;-webkit-box-shadow:0 1px 5px #1a1a1a inset,0 1px 0 #444; box-shadow:0 1px 5px 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; border-radius:3px; box-shadow:0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow:0 1px 0 rgba(255,255,.5) inset; -moz-box-shadow:0 1px 0 rgba(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;transition: width .4s ease-in-out;    }

jquey部分：

.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);  
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=&#39;#fecf23&#39;, endColorstr=&#39;#fd9215&#39;); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=&#39;#fecf23&#39;, endColorstr=&#39;#fd9215&#39;)"; /* IE8 */ 
 
    }
    .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);  
       filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=&#39;#a5df41&#39;, endColorstr=&#39;#4ca916&#39;); /* IE6 & IE7 */
       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=&#39;#a5df41&#39;, endColorstr=&#39;#4ca916&#39;)"; /* IE8 */  
 
 }
        .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: &#39;&#39;;
            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;}
         }

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

網站應該在沒有JavaScript的情況下工作嗎？Apr 17, 2025 am 09:27 AM

JS派對播客只是一個有趣的一集，他們通過分為兩組兩組來辯論這個經典問題。每個小組都被分配了

可訪問性和網絡性能不是功能，它們是基線Apr 17, 2025 am 09:21 AM

本週，我一直在沉思網絡性能和可訪問性。一切始於伊桑·馬科特（Ethan Marcotte）關於可訪問性的好筆記

具有Netlify和Anymod的快速靜態站點Apr 17, 2025 am 09:16 AM

在大約10分鐘內，我們＆＃039; ll設置了一個工作流程，使靜態站點變得簡單。

'關閉主線程”Apr 17, 2025 am 09:14 AM

JavaScript就是他們所謂的“單線線程”。正如布萊恩·巴伯（Brian Barbour）所說：

可掩蓋的圖標：PWA的Android自適應圖標Apr 17, 2025 am 09:13 AM

有一個新的Web功能，稱為“蒙版”圖標，即將推出Firefox Preview和其他Web瀏覽器。這種新的圖標格式將使您的PWA在Android上具有自己的自適應圖標。

'訂閱播客”鏈接應在哪裡？Apr 16, 2025 pm 12:04 PM

有一段時間，iTunes是播客中的大狗，因此，如果您將“訂閱播客”鏈接到喜歡：

瀏覽器引擎多樣性Apr 16, 2025 pm 12:02 PM

當他們在2013年去Chrome時，我們失去了歌劇。與Edge今年早些時候也進行了同樣的交易。邁克·泰勒（Mike Taylor）稱這些變化為“減少

網絡共享的UX注意事項Apr 16, 2025 am 11:59 AM

從垃圾點擊誘餌網站到大多數出版物的最多，共享按鈕長期以來一直無處不在。然而，這些

See all articles

熱AI工具

熱工具

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

用css3和jquery實現的漸進式的動態進度條

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

禪工作室 13.0.1

記事本++7.3.1

Safe Exam Browser

WebStorm Mac版

mPDF

熱門話題