Comment implémenter la barre de progression en CSS3 ? Introduction à la méthode d'implémentation de la barre de progression en CSS3

Les barres de progression sont souvent utilisées dans les pages Web. Les processus tels que le téléchargement et le téléchargement sont tous affichés sous la forme de barres de progression. Ensuite, cet article vous expliquera comment implémenter les barres de progression dans CSS3. .

Dans le passé, si vous souhaitez obtenir l'effet d'une barre de progression, vous devez utiliser JavaScript pour y parvenir. Cependant, l'émergence de CSS3 nous permet d'effectuer des animations en divs et d'ajouter des éléments de dégradé et de couleur. . Examinons de plus près ci-dessous comment CSS3 implémente les barres de progression.

Nous pouvons utiliser le contrôle d'animation d'animation en CSS3 pour obtenir l'effet de la barre de progression. Jetons un bref coup d'œil au contenu associé de l'animation

Syntaxe : animation : nom durée timing-function delay. iteration-count direction ;

Paramètres :

animation-name : Spécifie le nom de l'image clé qui doit être lié au sélecteur. .

animation-duration : Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.

animation-timing-function : Spécifie la courbe de vitesse de l'animation.

animation-delay : Spécifie le délai avant le début de l'animation.

animation-iteration-count : Spécifie le nombre de fois que l'animation doit être jouée.

animation-direction : Spécifie si l'animation doit être jouée à l'envers à tour de rôle.

Regardons ensuite un simple exemple de code de la barre de progression en CSS3 :

<div class="progress">
    <!--进度条-->
    <div class="loader-container"></div>
</div>

<!--Css3 实现。 animation 动画控制--> 
    html,body{
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .loader-container {
        height: 100%;
        width: 55%;
        background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
        border-radius:7px;
        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
        animation: loader 1s linear;
    }
    .progress{
        width: 70%;
        height: 15px;
        border-radius:7px;
        margin-left: 15%;
        margin-top: 30%;
        background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
    }
    @keyframes loader {
        0% {
            width: 0%;
        }
        100% {
            width: 55%;
        }
    }

L'effet de la barre de progression en CSS3 est le suivant :

Ce qui précède représente l'intégralité du contenu de cet article. Concernant les différentes propriétés CSS3 utilisées ci-dessus, vous pouvez vous référer au Manuel d'étude CSS3 pour plus d'informations. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!