Teilen eines Codebeispiels für die Verwendung von CSS3 zum Erstellen eines farbigen Fortschrittsbalkenstils-CSS-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-03-08 14:58:14

Original

1236 Leute haben es durchsucht

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>

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

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

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

Nach dem Login kopieren

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!