以下是如何用HTML和CSS3实现页面加载(loading)动画效果实例详解：

 

　　HTML部分

 

　　创建一个div用于显示加载动画，并给div一个class类名，便于对其进行样式设置，(如果样式不多也可以在标签内设置样式)具体代码如下：

 

　　CSS加载样式

 

　　CSS部分

 

　　页面的基本框架已经有了，现在还需要用CSS对其进行样式设置，设置div的长和高为120px，设置border-radius属性值为50%，将其变为圆形，用 border-top和border-bottom设置上下两个弧形，便于后面的动画设置。

 

　　最后，为了使其旋转起来，需要用animation和@keyframes属性，具体代码如下：

 

　　注意：使用animation和@keyframes动画时，注意浏览器的兼容性。(比如加前缀 -webkit- 和 -ms- ).load {

 

　　border: 16px solid #f3f3f3;

 

　　border-radius: 50%;

 

　　border-top: 16px solid blue;

 

　　border-bottom: 16px solid blue;

 

　　width: 120px;

 

　　height: 120px;

 

　　-webkit-animation: spin 2s linear infinite;

 

　　animation: spin 2s linear infinite;

 

　　}

 

　　@-webkit-keyframes spin {

 

　　0% {-webkit-transform: rotate(0deg);}

 

　　100% {-webkit-transform: rotate(360deg);}

 

　　}

 

　　@keyframes spin {

 

　　0% {transform: rotate(0deg);}

 

　　100% {transform: rotate(360deg);}

 

　　}

 

　　loading效果效果图：

 

　　以上给大家分享了如何用HTML和CSS3实现页面加载(loading)动画效果，详细讲解了HTML和CSS部分，比较容易理解，之前没有接触过页面加载动画的小伙伴一定要自己动手尝试，看看你的代码能不能实现页面加载的效果，希望这篇文章对你有所帮助！