HTML网页前端开发加载动画案例-觅稀奇MeXiQi.COM

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

目录前言一、网页加载动画是什么？二、案例教学1.HTML当我们将css基础操作先做好之后，发现网页并不能完美对应大小，那么我们可以在基础代码定义块内做如下操作进行修改，即可实现页面大小完美无缺今天我们真正全场的主角在下图出现三、案例动图

前言

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

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

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

二、案例教学

1.HTML

代码如下（示例）：

<html>

<head>

<metacharset="utf-8">

<title>Loading动画</title>//中间文字内容自拟

<linkrel="stylesheet"href="style.css">//链接样式表

</head>

<body>

//注释

<divclass="loader">//定义一个父盒子并给一个类名方便后面修改样式

<divclass="circle"></div>//定义一个子盒子做修改动画使用

<divclass="circle"></div>//同上

</div>

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

//lader

constloader=document.querySelector('.loader');

constmain=document.querySelector('.main');//main

functioninit(){

alert(加载动画);

}

init();//执行

</script>

</body>

</html>

2.CSS(*样式代码块)

代码如下（示例）：

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

margin:0;

padding:0;

}

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

margin:0;

padding:0;

box-sizing:border-box;/*修复padding*/

}

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

.loader{

height:50px;//高度

/*旋转位置：竖直底部对齐，水平居中*/

transform-origin:bottomcenter;

/*动画名称时间均速重复*/

animation:rotate3slinearinfinite;

}

.circle{

width:40px;//宽度

height:40px;

background:purple;//背景色

border-radius:50%;//圆角

transform:scale(0);/*缩到最小*/

/*动画名称时间均速重复*/

animation:grow1.5slinearinfinite;

}

.circle:nth-child(2){

background:palevioletred;//背景

animation-delay:0.75s;/*动画延迟0.75s*/

}

三、案例动图

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

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