Comment créer un style de barre de progression colorée en utilisant CSS3-tutoriel CSS-php.cn

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

不言

Libérer： 2018-06-20 17:59:34

original

2581 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!