制作页面加载动画需要用到很多CSS3中的属性，比如：animation属性，position定位，border-radius圆角，transform属性等等，如有不清楚的同学可以看看我以前的文章，之前都有介绍过，或者访问 CSS3视频教程，这些都是基础，一定要掌握。

实例：制作一个圆圈加载动画效果，圆圈在加载时大小由小变大，颜色由浅变深，具体代码如下：

HTML部分：

<div class="loader">
 <div class="loading">
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i>
 <i></i> 
 </div>
 </div>

CSS部分：

.loader{
 width: 300px;
 border: 1px solid #ccc;
 height: 200px;
 display: flex;
 box-sizing: border-box;
 align-items: center;
 justify-content: center;
 } 
 @-webkit-keyframes loading{
 50%{
 transform: scale(0.4);
 opacity: 0.3;
 }
 100%{
 transform: scale(1);
 opacity: 1;
 }
 }
 .loading{
 position: relative;
 }
 .loading i{
 display: block;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 position: absolute;
 background: #333;
 }
 .loading i:nth-child(1){
 top: 25px;
 left: 0;
 -webkit-animation: loading 1s ease 0s infinite;
 }
 .loading i:nth-child(2){
 top: 17px;
 left: 17px;
 -webkit-animation: loading 1s ease 0.12s infinite;
 }
 .loading i:nth-child(3){
 top: 0;
 left: 25px;
 -webkit-animation: loading 1s ease 0.24s infinite;
 }
 .loading i:nth-child(4){
 top: -17px;
 left: 17px;
 -webkit-animation: loading 1s ease 0.36s infinite;
 }
 .loading i:nth-child(5){
 top: -25px;
 left: 0;
 -webkit-animation: loading 1s ease 0.48s infinite;
 }
 .loading i:nth-child(6){
 top: -17px;
 left: -17px;
 -webkit-animation: loading 1s ease 0.6s infinite;
 }
 .loading i:nth-child(7){
 top: 0;
 left: -25px;
 -webkit-animation: loading 1s ease 0.72s infinite;
 }
 .loading i:nth-child(8){
 top: 17px;
 left: -17px;
 -webkit-animation: loading 1s ease 0.84s infinite; 
 }

效果图：

以上分享了CSS3实现页面加载动画效果的代码，项目中用的比较多，可以直接拿过去使用，也希望大家可以自己动手尝试，看看自己能不能写出其他的效果，希望这篇文章对你有所帮助！更多相关教程请访问 CSS视频教程