Maison > Article > interface Web > Comment créer un style de barre de progression colorée en utilisant CSS3

Comment créer un style de barre de progression colorée en utilisant CSS3

不言original: 2018-06-20 17:59:342564parcourir

Cet article présente principalement comment utiliser CSS3 pour créer un style de barre de progression de couleur. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Utilisez le rayon de bordure de CSS3. , Box-shadow, transition, -moz-linear-gradient, -webkit-gradient et d'autres styles peuvent compléter une barre de progression à la mode. Nous examinons ici quelques exemples de code CSS3 pour créer des styles de barre de progression colorée :

. 1. Créez une barre de progression statique à rayures violettes
Code HTML :

<body>
<p class="progress-bar purple"> <span style="width:40%;"></span> </p>
</body>

Code CSS :

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;   
}

L'effet final est le suivant :
2016623121249918.jpg (340×70)

2 Créez une barre de progression bleue statique
code html :

<p class="progress-bar orange"> <span style="width:60%;"></span> </p>

code CSS :

.orange span{   
 background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));   
 background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);   
}

L'effet final est le suivant :
2016623121331800.jpg (330×50)

3. Créer une barre de progression verte statique
code html :

<p> <span style="width:80%;"></span> </p>

code css :

.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;   
}

L'effet final est le suivant :
2016623121411191.jpg (325×43)

4. Ajoutez des effets dynamiques aux rayures violettes
code CSS :

.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;}   
}

Lorsque la souris est placée dessus, des effets dynamiques apparaîtront.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisation de CSS3 pour simuler l'effet de commutateur coulissant IOS

Implémentation du chargement des pages Web CSS3 et HTML5 barre de progression

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!

php html5 css css3 html webkit border transition ios

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter le style de barre de défilement personnalisé CSS3Article suivant：Comment implémenter le style de barre de défilement personnalisé CSS3

Articles Liés

Voir plus