怎样使用css3制作进度条
程序员文章站
2022-03-26 11:49:51
...
今天给大家带来的代码案列是怎样使用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>
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是怎样使用css3制作进度条的详细内容,更多请关注其它相关文章!
上一篇: PHP+mysql+Highcharts生成饼状图_jquery
下一篇: 学php有用么?