网页线条加载

最新推荐文章于 2019-08-27 22:46:28 发布

一梦醉殇

最新推荐文章于 2019-08-27 22:46:28 发布

阅读量332

点赞数

分类专栏： js特效

js特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
   *{
       margin: 0px;
       padding: 0px;
   }
   #progress{
       position: relative;
       height: 2px;
       background-color: #b91f1f;
       transition: opacity 500ms linear;
   }
   @-webkit-keyframes pulse{
       0%{width: 0;}
       100%{width: 100%;}
   }
   #progress{
       -webkit-animation: pulse 3s;
   }
   #progress.done{
       opacity: 0;
   }
   #progress span{
       position: absolute;
       height: 2px;
       -webkit-box-shadow:#b91f1f 1px 0 6px 1px;
       -webkit-border-radius:100%;
       opacity: 1;
       width: 150px;
       right: -10px;
       -webkit-animation: pulse1 2s easw-out 0s infinite;
   }
   div.yuan{
       margin: 50px auto;
       width: 100px;
       height: 100px;
       background-color: #b91f1f;
       -webkit-box-shadow:#b91f1f 1px 0 6px 1px;
       -webkit-border-radius:100%;
       opacity: 1;
       -webkit-animation: pulse1 2s easw-out 0s infinite;
   }
   @-webkit-keyframes pulse1{
       30%{opacity: 0.5;}
       60%{opacity: 0;}
       100%{opacity: 0.5;}
   }
</style>
</head>
<body>
<div id="progress">
   <span></span>
</div>
<div class="yuan"></div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
   $({property:0}).animate({property:100},{duration:3000,
       step:function(){
           var percentage = Math.round(this.property);
           $("#progress").css('width',percentage+"%");
           if(percentage == 100){
               $("#progress").addClass("done");
           }
       }})
</script>
</body>
</html>

一梦醉殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页线条加载

Document *{ margin: 0px; padding: 0px; } #progress{ position: relative; height: 2px; background-color: #b91f1f; transition: opaci
复制链接

扫一扫

专栏目录