CSS3：手把手带你写一个Loading动画

是用纯粹的css做的Loading小动画，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，下面是效果图：

第一步：

首先写body部分，我们分成上下两个盒子，一个用于弹动的矩形，另一个是缩放的阴影。（当然，你用伪元素也是可以的）

然后写基础样式

效果如图：

第二步

添加矩形动画，矩形是上下跳动并旋转的，所以用到CSS3中的@keyframes，并通过margin-top去做跳动效果、rotate去做旋转效果。

跳动没啥说的，旋转这里有个小技巧：就是落下的时候是0度转到45度，弹上去的时候从45旋转到90度，然后在这一瞬间从90度变成0度（100%到0%），如此一来我们就会产生错觉，感觉好像一直在旋转了。

为了有那种弹跳、重力挤压的感觉，我在50%给每次和地面触碰的角加了圆角加大，然后20%和80%紧接着变小。

然后就是在50%的地方我加了内阴影效果，看起来像聚光的一个效果。

动画写好了后，绑定到对应元素

效果如图：

第三步

添加阴影动画，这个比较简单，直接添加放大缩小的效果就可以了。

然后绑定动画

有一个点要注意的是，矩形和阴影动画时间要设置成一样，不然落地的时候和影子匹配不上。

最终效果：

好玩、简单的小动画就制作完成了！

希望对正在学CSS的朋友有所帮助！

面制作技术详解

演示视频在文章底部

1.页面内容居中显示方法

将这段代码<div style="width:50%;margin:auto;">放置在<body>标签之下。

将</div>放置在</body>之上。

将全部内容包裹在这个div中，就可以实现整个页面居中。

内容显示宽度为浏览器视窗宽度的50%。

margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。使用“auto”值，可以实现居中。

2.导航栏悬停顶端方法

把四个a标签装到一个div中。

将<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>之上。

将</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>之下。

position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。

默认下，该div距离视窗顶端有10px左右的距离，因此为了让它与视窗顶部对齐，添加top：0px。

3.鼠标滑过导航标题或链接时改变背景色提示

这就要介绍关于css的写法了。

简单来说，就是在<head></head>标签中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

学过HTML页面中head标签有啥用？——零基础自学网页制作的小伙伴应该知道，CSS脚本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>标签。

hover指的是：当鼠标悬停在a上面时的状态。

使用：连接。

这个状态下要执行的内容在{}中。

background-color:#ffff00;即背景色为黄色。

3.隐藏滚动条方法

首先，我们要明确一点，就是，滚动条是在内容长度超过视窗高度时产生的。

如果要取消视窗最右侧滚动条，就要控制内容高度。

把<p></p>和<img/><map></map>全部装进<div></div>中，控制该div的高度可以实现。

在<p>标签色上面添加<div>。

在</map>标签下面添加</div>。

下面，为div规定尺寸，添加style="width:610px; height:530px;"。

这样，就不会超出视窗。但是代码写完后发现并不是，如图：

多出的文字内容超出div范围，右侧滚动条依然存在。

这就要在div的style中再增加一条语句"overflow-y:scroll;"

这句话的意思是“overflow-y”（超出最大高度）就显示滚动条（scroll）。而不是让内容超出div的边框。

如图：

因为图片宽度的问题，下方的x轴的scroll也出现了，我们不想看到它，影响美观。

添加“overflow-x：hidden”即可，hidden（隐藏）。

如图：hidden之后，将无法滚动或拖动画面。

最后，我们要把右侧的scroll也隐藏掉，因为点击鼠标，滚动滚轮就够了，滚动条实在碍眼。

从前面的例子可知，hidden是不行的，有没有别的办法？

那就是在盖div的外部再添加一个div，让这个div的宽度略小于里面div的宽度，小到刚刚挡住滚动条既可以。如图：

这个div这样写即可

</div>

同时还要给里面的div添加margin来让它们对齐

</div>

完整代码：用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作

果冻公开课，开讲啦

修真院倾情奉献的动画课堂：

每堂几分钟，用趣味生动又逻辑清晰的方式，为你分享编程学习中的知识点及趣味小故事

本节课为大家带来第一课：什么是HTML

”

动画视频：

文字解析：

45年前，北京时间10月29日上午10点，计算机向世界发出了它的第一句话“LOL”，标志着互联网时代的诞生。

而今天的我们，在享受着互联网便利的同时，是否产生过这样的思考：

互联网中我们最直接接触的网页，又是如何诞生的呢？

这个问题，可以追溯到更近的时间，25年前，HTML这门语言第一次诞生的时候。这是因为，网页的基本构成可以简单概括为由HTML、CSS和JS三部分构成。

当然，这三部分的出现时间也是有着先后关系的，从仅仅只有HTML，慢慢发展到有了CSS，最后到出现了JS。而我们今天也将简单向大家介绍一下HTML、CSS和JS这三种网页支柱语言。

HTML诞生于1993年，经过六年时间，从HTML1.0发展到了HTML4.0这个版本。之后，HTML经过了一个较为争议的过程，出现了一个分支，XHTML和HTML5。

由于XHTML的不兼容性，造成众多浏览器厂家和开发者的反对：W3C关闭了XHTML项目，合并了HTML5，历经八年正式诞生了HTML 5这个版本——要知道哪吒也只是怀了3年而已。

HTML这门语言，主要是通过一个个被尖括号<>包裹的标签对内容进行标记，来告诉浏览器如何显示其中的内容。

例如文字如何处理，画面如何安排，图片如何显示等。其中作为结束的标签在<>中有一个反斜杠/

HTML中的标签按照类别主要分为12大类，共119种，其中有30个是HTML 5中新推出的标签。

我们来看看我们最常用的标签都有哪些吧~

①基础类

<title></title> 定义文档的标题

我们平时看到的浏览器上面这个网页标题就是用这个标签实现的。

大多数的纯文字内容都是用<p>标签包住的，作用就是很简单的告诉浏览器这一大段都是文字

②格式类

<b>可以将文字加粗

<big>可以将文本变为大号文本

<i>可以将文字倾斜

③表单类

<input>是我们常用的输入控件，通常在网页中我们可以进行输入的地方都是用它进行标注的

<select>我们常见的下拉列表就是用它标注的，可以将所有选项折叠收缩，很方便对吧

<button>就是我们可以点击的各种按钮，不管是登录还是取消，都是这个标签

④图像类

<img>用来定义图像，大多数我们看到的图片都是用这个标签定义的

⑤音频视频类

<audio>用来定义我们的音频内容，如果在网页上看到这个音频播放的东西，准是这个标签的功劳

<video>用来定义视频，网页中你想放视频的话，可以用这个标签

⑥链接类

<a href="http://www.jnshu.com.cn">IT修真院</a>

我们经常看到的这个蓝色有下划线的文字就是<a>的作用，点击它我们可以去到新的页面

⑦样式类

<div></div>是用来标记一块区域，用来告诉浏览器，这一块是一个整体

<header></header>主要用来放页面头部的内容

<footer></footer>主要用来放页面尾部的内容

⑧列表类

<ol>列表标签，我们能看到的这种列表都是用它来实现

⑨表格类

<table>我们看到的这种表格就是用这个来实现的

大家发现了吗？

HTML的标签基本都是它标注内容的英文单词或者是缩写，十分的语义化

基本上这个标签是干嘛的，只要看这个标签是什么意思你就知道的八九不离十了，是不是很简单~

本节课的内容就是这些啦，我们来复习一下：

1、网页由HTML、CSS、JS三部分构成

2、历经8年，从HTML1.0发展到现行的HTML5

3、HTML语言作为标记语言用标签来告诉浏览器如何显示内容

4、常用的九类标签

是不是觉得HTML一下变得简单明了起来了呢，下节课，我们将向大家分享CSS的相关内容，敬请期待~

这里是果冻公开课，一个用趣味的动画来分享IT知识的课堂

我们将原本复杂、不易理解的编程知识，转化为一个个有趣的动画短视频，为更多人提供生动有趣的IT内容/服务

无论是大咖还是小白，都可以快速学会并深度了解每一个知识点，让IT，Q弹可口。

想了解更多就到我们官网看看吧

在线咨询

上一篇：APP登录界面设计精彩实例，赞不绝口！
下一篇：10分钟内浏览器中，手把手教你构建一个手势识别模型 - 代码开源

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS3：手把手带你写一个Loading动画

第一步：

第二步

第三步

面制作技术详解

您的项目需求