So implementieren Sie den Fortschrittsbalken und den Bestellfortschrittsbalken mit CSS

Das einfache Rendering ist wie folgt:

CSS-Implementierungsfortschrittsbalken :

HTML-Struktur:

<p id="progress">  
    <span>70%</span>  
</p>

CSS-Stil:

#progress{   
    width: 50%;    
    height: 30px;   
    border:1px solid #ccc;   
    border-radius: 15px;   
    margin: 50px 0 0 100px;   
    overflow: hidden;   
    box-shadow: 0 0 5px 0px #ddd inset;   
}   
  
#progress span {   
    display: inline-block;   
    width: 70%;   
    height: 100%;   
    background: #2989d8; /* Old browsers */  
    background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */  
    background: -webkit-gradient(linear, left bottombottom, rightright top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */  
    background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */  
    background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */  
    background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */  
    background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */  
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  
    background-size: 60px 30px;   
    text-align: center;   
    color:#fff;   
}

Für den Fortschrittsbalken kann die Fortschrittsfarbe auch eine Volltonfarbe sein. Wenn Sie Farbverläufe verwenden möchten, können Sie dazu wechseln Website: http://www.php.cn/, es wird sehr einfach, den Verlaufseffekt zu vervollständigen, der mit der Verwendung von PS identisch ist. Nachdem Sie den Hintergrund auf Farbverlauf eingestellt haben, müssen Sie auch die Hintergrundgröße festlegen, damit der Wiederholungseffekt erzielt werden kann:

Css zum Implementieren des Bestellfortschrittsbalkens :

HTML-Struktur:

<p id="progressBar">  
     <!-- 进度条 -->  
     <p>  
         <span></span>  
     </p>  
     <!-- 五个圆 -->  
     <span></span>  
     <span></span>  
     <span></span>  
     <span></span>  
     <span></span>  
</p>

CSS-Stil:

#progressBar{   
    width: 80%;   
    height: 50px;   
    position: relative;   
    margin: 50px 0 0 100px;   
}   
#progressBar p{   
    width: 100%;   
    height: 10px;   
    position: absolute;   
    top:50%;   
    left: 0;   
    margin-top:-20px;   
    border:1px solid #ddd;   
    background: #ccc;   
}   
#progressBar p span{   
    position: absolute;   
    display: inline-block;   
    background: green;   
    height: 10px;   
    width: 25%;   
}   
#progressBar>span{   
    position: absolute;   
    top:0;   
    margin-top: -10px;   
    width: 40px;   
    height: 40px;   
    border:2px solid #ddd;   
    border-radius: 50%;   
    background: green;   
    margin-left: -20px;   
    color:#fff;   
}   
#progressBar>span:nth-child(1){   
    left: 0%;   
}   
#progressBar>span:nth-child(2){   
    left: 25%;   
    background:green;   
}   
#progressBar>span:nth-child(3){   
    left: 50%;   
    background:#ccc;   
}   
#progressBar>span:nth-child(4){   
    left: 75%;   
    background:#ccc;   
}   
#progressBar>span:nth-child(5){   
    left: 100%;   
    background:#ccc;   
}

Dann können Sie mit JS einen dynamischen Fortschrittsbalken implementieren!

PS: Beim Debuggen des CSS-Codes stellte ich fest, dass der erste Kreisstil nicht funktionierte, also habe ich die Standardhintergrundfarbe in Grün geändert Ich löse diesen kleinen Fehler

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere verwandte Artikel zum Implementieren von Fortschrittsbalken und zum Bestellen von Fortschrittsbalken mit CSS finden Sie auf der chinesischen PHP-Website!