Maison >interface Web >tutoriel CSS >Comment utiliser CSS3 pour créer une barre de progression
Comment utiliser CSS3 pour créer une barre de progression
- php中世界最好的语言original
- 2017-12-01 10:07:202021parcourir
L'exemple de code que je vous présente aujourd'hui est de savoir comment utiliser CSS3 pour créer une barre de progression. Il utilise la technologie CSS3 au lieu de JS pour créer un effet de barre de progression.
html：
<body>
<div id="box">
<div id="div1"></div>
</div>
</body>
css：
<style>
@keyframes test {
from{
left:0
}
to{
left:-100%;
}
}
#box{
width:400px;
height:50px;
margin: 50px auto;
position: relative;
border: 1px solid #000;
overflow: hidden;
}
#div1{
width:200%;
height:100%;
position: absolute;
left:0;
top:0;
background: -webkit-repeating-linear-gradient(-45deg, red 0px,red 10px,blue 10px,blue 20px);
animation:4s test linear infinite;
}
</style>Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Introduction détaillée de CSS3 à l'attribut translation
Introduction détaillée de CSS3 à l'attribut background-size
Étapes pour implémenter l'effet de halo rotatif avec CSS3
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!