版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012987546/article/details/79813652
css3实现点的加载进度
使用的的css3的属性：
border-radius：
rgba(255,255,255,1)：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
animation：执行的效果：
1.编写布局
<!--背景布局-->
<div id="box">
<!-- 点的加载进度 -->
<div class="dots"></div>
</div>2.添加样式
<style>
#box {
width: 300px;
height: 300px;
background: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
padding: 50px;
}
.dots{
width: 20px;
height: 20px;
border-radius: 100%;
background: rgba(255,255,255,1); /*第一个点*/
}
</style>效果：
3.添加多个点
.dots{
width: 20px;
height: 20px;
border-radius: 100%;
background: rgba(255,255,255,1); /*第一个点*/
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.6),/*第二个点*/
80px 0px 0px 0px rgba(255,255,255,0.2);/*第三个点*/
}
效果：
4.添加动画
.dots{
width: 20px;
height: 20px;
border-radius: 100%;
background: rgba(255,255,255,1); /*第一个点*/
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.6),/*第二个点*/
80px 0px 0px 0px rgba(255,255,255,0.2);/*第三个点*/
-webkit-animation: fadeDots 1.5s infinite linear;/*Chrome 16+, Safari 4+*/
-moz-animation: fadeDots 1.5s infinite linear;/*FF 5+*/
-o-keyframes: fadeDots 1.5s infinite linear;/* Opera */
-ms-keyframes: fadeDots 1.5s infinite linear;/*IE 10+*/
animation: fadeDots 1.5s infinite linear;
}
/*Chrome 16+, Safari 4+*/
@-webkit-keyframes fadeDots{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,1);
}
}
/*FF 5+*/
@-moz-keyframes fadeDots{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,1);
}
}
/* Opera */
@-o-keyframes fadeDots{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,1);
}
}
/*IE 10+*/
@-ms-keyframes fadeDots{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,1);
}
}
/*IE*/
@keyframes fadeDots{
0%{
background-color: rgba(255,255,255, 1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
25%{
background-color: rgba(255,255,255, 0.4);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,2),
80px 0px 0px 0px rgba(255,255,255,0.2);
}
75%{ background-color: rgba(255,255,255, 0.1);
box-shadow: 40px 0px 0px 0px rgba(255,255,255,0.2),
80px 0px 0px 0px rgba(255,255,255,1);
}
}执行的效果：
