CSS实现动态loading效果
warning:
这篇文章距离上次修改已过1305天,其中的内容可能已经有所变动。
CSS实现动态loading效果
摘要分割线前
摘要分割线后
- 列表项目1
- 列表项目22
- 列表项目333
普通分割线前
普通分割线后
A =bigl(begin{matrix} N n end{matrix} bigr)
<div class="loading">
<span></span>
</div>
<style>
.loading{
width: 150px;
height: 4px;
border-radius: 2px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightgreen;
-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
margin-top: -7px;
margin-left:-8px;
-webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes changePosition{
0%{
background: lightgreen;
}
100%{
margin-left: 142px;
background: lightblue;
}
}
</style>