css3做简单的加载效果
步骤：
1.首先创建一个500*500的矩形，并将其进行居中。
2.通过阴影扩展半径给这个矩形的四周加上白色内阴影。效果如下：
3.给这个元素加上伪元素before和after代码如下
.box:before,.box:after{
content: "";
display: block;
position: absolute;
width: 250px;
height: 500px;
top: 0;
left: 0;
background-color: #999;
border-radius: 250px 0 0 250px;
transform-origin:right center;
animation:load 2s infinite;
}
.box:after{
left: 250px;
background-color: #999;
border-radius: 0 250px 250px 0;
transform-origin:left center;
animation:load 2s 0.5s infinite;
}
其中after和before的宽度是父元素的2/1（250px）高度和父元素一样（500px）
当只给父元素加上before和after不加其他效果时是这样的，给before加上红背景，给after加上绿背景
4.给after和before加上相应的border-radius和基准点
（1）before的border-radius和基准点
border-radius: 250px 0 0 250px;
transform-origin:right center;
（2）before的border-radius和基准点
border-radius: 0 250px 250px 0;
transform-origin:left center;
5.定义一个旋转的动画load，代码如下：
@keyframes load{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
6.改变after和before的基准点
7.引用动画，其中一个个一定的延迟时间
效果
全部代码如下所示：
}��ΐ��
网友评论