微交互进度条效果
<!doctype html>
<html>
<head>
<style>
body{background-color:#000;}
.bg{position:absolute;top:100px;left:50%;margin-left:-150px;width:300px;height:4px;background-color:#1C1C1C;border-radius:2px;}
.line{height:100%;width:0;position:relative;background-color:#06C;border-radius:2px;box-shadow: 0 0 20px blue;}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="bg">
<div class="line"></div>
</div>
<script src="jquery.js"></script>
<script>
line()
function line(){
$(".line").animate({width:200},2000,"linear").animate({width:250},2000,"linear").animate({width:300},2000,"linear",function(){
//效果从开始位置循环
setTimeout(line,10)
$(".line").css({width:0})
})
}
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-11-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读