Maison >interface Web >tutoriel CSS >Exemple de code partageant l'utilisation de CSS3 pour créer un style de barre de progression colorée
Exemple de code partageant l'utilisation de CSS3 pour créer un style de barre de progression colorée
- 高洛峰original
- 2017-03-08 14:58:141282parcourir
Utilisez CSS3 border-radius, box-shadow, transition, -moz-linear-gradient, -webkit-gradient et d'autres styles pour compléter une barre de progression à la mode. Nous examinons ici quelques styles CSS3 pour créer des barres de progression colorées. exemple de partage :
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 : 
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 : 
3. Créez 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 : 
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 est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!