So erstellen Sie mit CSS3 einen farbigen Fortschrittsbalkenstil-CSS-Tutorial-php.cn

So erstellen Sie mit CSS3 einen farbigen Fortschrittsbalkenstil

不言

Freigeben： 2018-06-20 17:59:34

Original

2631 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von CSS3 zum Erstellen eines Farbfortschrittsbalkenstils vorgestellt. Jetzt kann ich ihn mit Ihnen teilen.

Verwenden Sie den Rahmenradius von CSS3 , Box-Shadow, Transition, -moz-linear-gradient, -webkit-gradient und andere Stile können einen modischen Fortschrittsbalken vervollständigen. Hier sehen wir uns einige CSS3-Codebeispiele für die Erstellung farbiger Fortschrittsbalkenstile an:

1. Erstellen Sie einen statischen violetten Streifen-Fortschrittsbalken
HTML-Code:

<body>
<p class="progress-bar purple"> <span style="width:40%;"></span> </p>
</body>

Nach dem Login kopieren

CSS-Code:

body {   
 background-color:#333;   
}   
.progress-bar {   
 background-color:#222;   
 border-radius:3px;   
 width:300px;   
 height:24px;   
 padding:5px;   
 margin:50px;   
 border-bottom:1px solid #444;   
 box-shadow:inset 0 0 2px 0 #000;   
}   
.progress-bar span {   
 display:inline-block;   
 width:140px;   
 height:24px;   
        border-radius:2px;   
 box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
 -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
 -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;   
}   
.purple span{   
 background-color:#F09;   
 background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);   
 background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));   
 background-size:16px 16px;   
}

Nach dem Login kopieren

Der endgültige Effekt ist wie folgt:
2016623121249918.jpg (340×70)

2. Erstellen Sie einen statischen blauen Fortschrittsbalken
HTML-Code:

<p class="progress-bar orange"> <span style="width:60%;"></span> </p>

Nach dem Login kopieren

CSS-Code:

.orange span{   
 background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));   
 background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);   
}

Nach dem Login kopieren

Der endgültige Effekt ist wie folgt:
2016623121331800.jpg (330×50)

3. Statischer grüner Produktionsfortschrittsbalken
HTML-Code:

<p> <span style="width:80%;"></span> </p>

Nach dem Login kopieren

CSS-Code:

.green span{   
 background-color:#00ff24;   
 box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;   
 -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
 -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
}

Nach dem Login kopieren

Der endgültige Effekt ist wie unten dargestellt :
2016623121411191.jpg (325×43)

4. Fügen Sie dynamische Effekte zu den lila Streifen hinzu
CSS-Code:

.purple span:hover{   
 -webkit-animation:animate-stripes 3s linear infinite;   
 -moz-animation:3s linear 0s normal none infinite animate-stripes;   
}   
@-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;}   
}

Nach dem Login kopieren

Maus nach unten Nach dem Bewegen nach oben erscheinen dynamische Effekte.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS3, um den IOS-Schiebeschaltereffekt zu simulieren

Implementierung des Ladens von CSS3- und HTML5-Webseiten Fortschrittsbalken

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 einen farbigen Fortschrittsbalkenstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!