CSS 制作进度条

时间:2019-08-30
本文章向大家介绍CSS 制作进度条，主要包括CSS 制作进度条使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

今天和大家分享一组代码，使用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

随机文章
WEB前端知识点必读
最近更新