Home >Web Front-end >CSS Tutorial >How to use css3 to create a progress bar
How to use css3 to create a progress bar
- php中世界最好的语言Original
- 2017-12-01 10:07:202020browse
The code example I bring to you today is how to use css3 to create a progress bar. It uses CSS3 technology instead of JS to create a progress bar effect. Let’s take a look.
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>
CSS3’s detailed introduction to the translate attribute
CSS3’s detailed introduction to the background-size attribute
CSS3 steps to implement rotating halo effect
The above is the detailed content of How to use css3 to create a progress bar. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3 content attribute implementation stepsNext article：CSS3 content attribute implementation steps