Heim > Artikel > Web-Frontend > So erstellen Sie mit CSS3 einen farbigen Fortschrittsbalkenstil

So erstellen Sie mit CSS3 einen farbigen Fortschrittsbalkenstil

不言Original: 2018-06-20 17:59:342498Durchsuche

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>

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;   
}

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>

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);   
}

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>

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;   
}

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;}   
}

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!

php html5 css css3 html webkit border transition ios

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie den benutzerdefinierten CSS3-BildlaufleistenstilNächster Artikel：So implementieren Sie den benutzerdefinierten CSS3-Bildlaufleistenstil

In Verbindung stehende Artikel

Mehr sehen