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.引用动画,其中一个个一定的延迟时间效果全部代码如下所示:
css3做一个简单的加载效果
最新推荐文章于 2020-12-21 20:34:15 发布