CSS3制作loading动画是一种常用的网页设计技巧，它可以使网页更加生动、吸引人们的眼球。下面将介绍如何使用CSS3来实现loading效果。

.loading {
position: relative;
margin: 0 auto;
width: 64px;
height: 64px;
}
.loading:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
width: 24px;
height: 24px;
animation: loading 1s linear infinite;
}
@keyframes loading {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0;
}
}

以上代码中，我们首先创建了一个class名为loading的容器，设置了容器的相对定位、居中、宽高等属性。

然后通过:before伪类来添加一个白色的圆形，同时设置了它的绝对定位、圆角、边框等属性，并给它添加了loading动画，这个动画由三个关键帧组成，分别是开始时刻(0%)、中间时刻(50%)、结束时刻(100%)，每个关键帧中通过transform属性改变了元素的位置和大小，通过opacity属性改变了元素的透明度。

最后，我们通过animation属性将loading动画绑定到了:before伪类上，并设置了动画的时长、速度和无限循环。至此，我们的loading动画就完成了。