【HTML网页前端开发加载动画案例】

提示：如需转载请联系作者授权才可使用。

目录

前言

一、网页加载动画是什么？

二、案例教学

1.HTML

当我们将css基础操作先做好之后，发现网页并不能完美对应大小，那么我们可以在基础代码定义块内做如下操作进行修改，即可实现页面大小完美无缺

今天我们真正全场的主角在下图出现

三、案例动图

---

前言

这篇案例教我们如何制作一个网页加载动画，前端萌新某高校教学内容。

---

一、网页加载动画是什么？

         简单理解就是当打开一个网页时，首先出现的是一个加载动画能让使用者感觉到网站的使用心灵美以及意境美，例如：当我们打开任何一款游戏时，首先映入眼帘的就是万恶的进度条，还有一个白花花的屏幕，进度条上显示游戏进程进行到百分之X了；还有我的们QQ空间（电脑版）等进入空间时自己设置的加载动画

二、案例教学

1.HTML

代码如下（示例）：

	
		
		    //中间文字内容自拟
	  //链接样式表
	
	
	   //注释
	
             //定义一个父盒子并给一个类名方便后面修改样式
	  
    //定义一个子盒子做修改动画使用
	  
    //同上
	
	

这里我们需要用到JAVAscript语言引入库文件

2.CSS(*样式代码块)

代码如下（示例）：

首先我们每次打开一个项目就要操作以下步骤

    *{
    margin:0;
    padding:0;
    }

当我们将css基础操作先做好之后，发现网页并不能完美对应大小，那么我们可以在基础代码定义块内做如下操作进行修改，即可实现页面大小完美无缺

    *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;/*修复padding*/
    }

今天我们真正全场的主角在下图出现

.loader{
	height: 50px;    //高度
	/*旋转位置：竖直底部对齐，水平居中*/
	transform-origin: bottom center;
	/*动画    名称   时间 均速   重复*/
	animation:rotate 3s linear infinite;	
}
.circle{
	width: 40px;    //宽度
	height: 40px;
	background:purple;    //背景色
	border-radius:50%;    //圆角
	transform: scale(0);/*缩到最小*/
	/*动画    名称   时间 均速   重复*/
	animation: grow 1.5s linear infinite;
}
.circle:nth-child(2){
	background: palevioletred;    //背景
	animation-delay: 0.75s;/*动画延迟0.75s*/
}

三、案例动图

http://127.0.0.1:8848/Loading10-31/index.html

---

总结
以上就是今天要讲的内容，本文仅仅简单介绍了网页加载动画实现代码的使用，而案例提供了大量能使我们快速便捷地处理，大家不会的话勤加练习。