Heim > Artikel > Web-Frontend > So verwenden Sie CSS3, um den Bar-Fortschrittsbalkeneffekt zu erzielen (vollständiger Code im Anhang)

So verwenden Sie CSS3, um den Bar-Fortschrittsbalkeneffekt zu erzielen (vollständiger Code im Anhang)

坏嘻嘻Original: 2018-09-27 11:58:354260Durchsuche

Beim Abspielen von Musik und Videos können Sie nicht nur die Wiedergabezeit direkt überprüfen, sondern auch die Wiedergabezeit anhand des Fortschrittsbalkens überprüfen, um dem Benutzer intuitiver zu sagen, wie lange es bis zum Ende dauern wird Der Fortschrittsbalken ist ein sehr nützlicher Spezialeffekt. Dieser Artikel stellt vor, wie man mit CSS3 den Fortschrittsbalkeneffekt erzielt, und konzentriert sich auf die spezifischen Schritte. Der Inhalt dieses Artikels ist kompakt und ich hoffe, dass jeder etwas gewinnen kann.

Verwenden Sie CSS3, um das Prinzip des Bar-Fortschrittsbalkeneffekts zu realisieren

Verwenden Sie zunächst HTML, um die beiden erforderlichen Divs zu erstellen . Verwenden Sie position:absolute, um die beiden Divs zu überlappen und nach Bedarf verschiedene Farben zu unterscheiden.
Verwenden Sie das Keyframe-Attribut, um die überlappenden Fortschrittsbalken zu verschieben, und verwenden Sie dann die Animation zur Animationssteuerung. Die Syntax lautet @keyframes Animationsname {keyframes-selector {css-styles;}} >

ps: Wenn es Freunde gibt, die das oben genannte Wissen nicht kennen, lesen Sie bitte die entsprechenden Artikel auf dieser Website.

So verwenden Sie CSS3, um den automatischen Karusselleffekt von Bildern zu erzielen (vollständiger Code im Anhang)

Verwenden Sie CSS3, um die Leiste zu erreichen Fortschrittsbalken-Effektcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"   />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
    width:100px;
    display:inline-block;
    *zoom:1;
}
.pb-wrapper
{
    border:1px solid #cfd0d2;
    position:relative;
    background:#cfd0d2;
    border-radius: 8px;
}
.pb-container
{
    height:12px;
    position:relative;
    left:-1px;
    margin-right:-2px;
    font:1px/0 arial;
    padding:1px;
}
.pb-highlight
{
    position:absolute;
    left:0;
    top:0;
    _top:1px;
    width:100%;
    opacity:0.6;
    filter:alpha(opacity=60);
    height:6px;
    background:white;
    font-size:1px;
    line-height:0;
    z-index:1
}
.pb-text
{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
    font:10px/12px arial;
    color:black;
    font:10px/12px arial
}
</style>
</head>
<body>
    <div class="process-bar skin-green">
        <div class="pb-wrapper">
            <div class="pb-highlight"></div>
            <div class="pb-container">
                <div class="pb-text">50%</div>
                <div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

Der Effekt ist wie im Bild gezeigt

So verwenden Sie CSS3, um den Bar-Fortschrittsbalkeneffekt zu erzielen (vollständiger Code im Anhang)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um den Bar-Fortschrittsbalkeneffekt zu erzielen (vollständiger Code im Anhang). 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：Wie stelle ich den Textabstand in CSS ein?Nächster Artikel：Wie stelle ich den Textabstand in CSS ein?

In Verbindung stehende Artikel

Mehr sehen