用css3做一个简单的加载效果

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.引用动画，其中一个个一定的延迟时间

效果

全部代码如下所示：

}��ΐ��