Exemple de code partageant l'utilisation de CSS3 pour créer un style de barre de progression colorée-tutoriel CSS-php.cn

Exemple de code partageant l'utilisation de CSS3 pour créer un style de barre de progression colorée

高洛峰

Libérer： 2017-03-08 14:58:14

original

1281 Les gens l'ont consulté

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>

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 :
Exemple de code partageant lutilisation de CSS3 pour créer un style de barre de progression colorée

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 :
Exemple de code partageant lutilisation de CSS3 pour créer un style de barre de progression colorée

3. Créez 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 :
Exemple de code partageant lutilisation de CSS3 pour créer un style de barre de progression colorée

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 est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!