实现loading的代码 原
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading</title>
<style>
.loader {
position:relative;
}
.loader span{
position:absolute;
top:200px;
width:30px;height:10px;
border-bottom-left-radius:3px;
background:green;
transform-origin:40px 0;
-webkit-transform-origin:50px 5px;
-webkit-animation:circle-line 1s infinite;
animation:circle-line 1s infinite;
}
@keyframes circle-line{
0%{
OPACITY:0.1;
}
100%{
opacity:0.7;
}
}
</style>
</head>
<body>
<div class="loading">
<div class="loader circle-line" id="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
var spanli = document.getElementById("loader").getElementsByTagName("span");
for(i=0;i<spanli.length;i++){
spanli[i].style.webkitTransform="rotate("+45*(i-1)+"deg)";
spanli[i].style.webkitAnimationDelay= 0.13*i +"s";
}
</script>
</body>
</html>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/01/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读