Heim > Artikel > Web-Frontend > So erstellen Sie mit CSS3 einen Fortschrittsbalken
So erstellen Sie mit CSS3 einen Fortschrittsbalken
- php中世界最好的语言Original
- 2017-12-01 10:07:201977Durchsuche
Das Codebeispiel, das ich Ihnen heute präsentiere, zeigt, wie man mit CSS3 einen Fortschrittsbalken erstellt. Es verwendet CSS3-Technologie anstelle von JS, um einen Fortschrittsbalkeneffekt zu erstellen.
html：
<body>
<div id="box">
<div id="div1"></div>
</div>
</body>
css：
<style>
@keyframes test {
from{
left:0
}
to{
left:-100%;
}
}
#box{
width:400px;
height:50px;
margin: 50px auto;
position: relative;
border: 1px solid #000;
overflow: hidden;
}
#div1{
width:200%;
height:100%;
position: absolute;
left:0;
top:0;
background: -webkit-repeating-linear-gradient(-45deg, red 0px,red 10px,blue 10px,blue 20px);
animation:4s test linear infinite;
}
</style>Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Detaillierte Einführung von CSS3 zum Übersetzungsattribut
Detaillierte Einführung von CSS3 zum Hintergrundgrößenattribut
Schritte zum Implementieren des rotierenden Halo-Effekts mit CSS3
Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 einen Fortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Warum erscheint mein Kontextmenü in IE7 hinter der Schaltfläche?
- Warum funktioniert die vertikale Ausrichtung nicht für Inline-Block-Elemente?
- Wie navigiert man in CSS durch das Labyrinth der Hintergrundbildpfade?
- Wie schaltet -webkit-transform: translator3d(0,0,0) die Hardwarebeschleunigung für Webanimationen frei?
- Ist es zulässig, ein „“ innerhalb eines „“-Elements zu platzieren?