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.引用动画，其中一个个一定的延迟时间效果全部代码如下所示：