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:141250Durchsuche
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: 
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: 
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: 
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!