Wie kann man mit CSS+JS einen einfachen dynamischen Fortschrittsbalkeneffekt erzielen? (Codebeispiel)

Wie implementiert man einen einfachen dynamischen Fortschrittsbalken mit CSS+JS? In diesem Artikel wird CSS + JS verwendet, um einen einfachen dynamischen Fortschrittsbalkeneffekt zu erstellen, und ich hoffe, dass er für Sie hilfreich ist.

Wir müssen wissen, dass hier hauptsächlich das Animationsattribut von CSS3 verwendet wird. Stellen Sie zunächst den Fortschrittsbalken auf ein Element mit einer anfänglichen Breite von 0, einer Hintergrundfarbe von Grün und einer gleichen Höhe ein als Container; Seine Breite wird geändert, um den Effekt des Füllens des Fortschrittsbalkens zu erzielen.

Werfen wir einen Blick auf das relevante Wissen über die Animationseigenschaft von CSS3. Das

animationsattribut ist ein Kurzattribut, das zum Festlegen von sechs Animationsattributen verwendet wird:

animationsname: gibt den Namen des Keyframes an, der an den Selektor gebunden werden muss; >Animationsdauer: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.

Animations-Timing-Funktion: Gibt die Geschwindigkeitskurve der Animation an. gibt die Zeit an, bevor die Animation startet. Verzögerung;

animation-iteration-count: gibt an, wie oft die Animation abgespielt werden soll.

animation-direction: gibt an, ob die Animation abgespielt werden soll Der Reihe nach umkehren

Werfen wir einen Blick auf die spezifischen

.

CSS+JS-Codebeispiel zur Implementierung eines einfachen dynamischen Fortschrittsbalkeneffekts:
HTML-Code:

<!--外层容器-->
<div id="wrapper">
    <!--进度条容器-->
    <div id="progressbar">
        <!--用来模仿进度条推进效果的进度条元素-->
        <div id="fill"></div>
    </div>
</div>

CSS-Code:

#wrapper{
    position: relative;
    width:200px;
    height:100px;
    border:1px solid darkgray;
}
#progressbar{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-90px;
    margin-top:-10px;
    width:180px;
    height:20px;
    border:1px solid darkgray;

}
/*在进度条元素上调用动画*/
#fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}

var progressbar={
    init:function(){
        var fill=document.getElementById('fill');
        var count=0;
    //通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
        var timer=setInterval(function(e){
            count++;
            fill.innerHTML=count+'%';
            if(count===100) clearInterval(timer);
        },17);
    }
};
progressbar.init();

Verwandte Empfehlungen:

Was ist das Clip-Attribut in CSS? clip:rect() erzeugt eine kreisförmige Fortschrittsbalkenanimation

js implementiert benutzerdefinierten Drag-Fortschrittsbalkeneffekt

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS+JS einen einfachen dynamischen Fortschrittsbalkeneffekt erzielen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!