今天给大家带来的代码案列是怎样使用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中文网其它相关文章!
相关阅读:
以上就是怎样使用css3制作进度条的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号