Heim > Artikel > Web-Frontend > Teilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils

Teilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils

高洛峰Original: 2017-03-08 14:58:141232Durchsuche

Verwenden Sie CSS3-Border-Radius, Box-Shadow, Transition, -moz-linear-gradient, -webkit-gradient und andere Stile, um einen modischen Fortschrittsbalken zu vervollständigen. Hier sehen wir uns einige CSS3-Stile an, um farbenfrohen Fortschrittsbalken zu erstellen Beispielfreigabe:

1. Erstellen Sie einen statischen lila 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 Endeffekt ist wie folgt:
Teilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils

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 Endeffekt ist wie folgt:
Teilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils

3. Erstellen Sie einen statischen grünen Fortschrittsbalken
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 folgt:
Teilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils

4. Fügen Sie dynamische Effekte zu den violetten 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;}   
}

Wenn die Maus darauf platziert wird, erscheinen dynamische Effekte.

Das obige ist der detaillierte Inhalt vonTeilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：CSS imitiert Thunder und betrachtet die blaue NavigationsmethodeNächster Artikel：CSS imitiert Thunder und betrachtet die blaue Navigationsmethode

In Verbindung stehende Artikel

Mehr sehen