CSS 制作进度条

最新推荐文章于 2024-06-05 18:34:39 发布

banchi6453

最新推荐文章于 2024-06-05 18:34:39 发布

阅读量234

点赞数

原文链接：http://www.cnblogs.com/shihaiying/p/11437179.html

版权

今天和大家分享一组代码，使用css制作进度条。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>进度条</title>
  <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, skyblue 0px,skyblue 10px,deeppink 10px,deeppink 20px);

animation:4s test linear infinite;

}

</style>
</head>
<body>
       <div id="box">

       <div id="div1">
         
       </div>

       </div>

</body>
</html>

效果图：

这个效果图是一个动图，颜色可以自己设置，我选择的是天蓝色和深粉色。

转载于:https://www.cnblogs.com/shihaiying/p/11437179.html

banchi6453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 制作进度条

今天和大家分享一组代码，使用css制作进度条。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <style> @keyframes test ...
复制链接

扫一扫