Rumah > Artikel > hujung hadapan web > 怎样使用css3制作进度条
怎样使用css3制作进度条
- php中世界最好的语言asal
- 2017-12-01 10:07:201974semak imbas
今天给大家带来的代码案列是怎样使用css3制作进度条，完全用CSS3技术而不用JS来制作进度条效果，一起来看一下。
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>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci 怎样使用css3制作进度条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS3的content属性实现步骤Artikel seterusnya：如何用CSS3属性选择器替代JS的作用