CSS3简单动画效果与使用列表制作菜单

CSS3简单动画

在CSS3中能够实现一些简单的动画效果，所以接下来介绍的是几种基础的动画效果制作方式。

首先要认识的是@keyframes规则，@keyframes是用于定义动画过程的规则，因为所谓的动画其实就是从一套样式渐变到另一套样式的过程，声明@keyframes需要定义它的名称，需要要样式里通过名称引用这个规则。

在@keyframes里有两个属性：form和to，form属性用于定义动画的开始，在form里需要定义好样式的初始状态。to属性则用于定义动画的结束，在to里需要定义好样式的最终状态，动画就是这样一个从初始状态渐变到最终状态的过程。

之后在样式描述里需要使用animation属性来引用规则并且定义一个动画完成的时间，单位可以是秒或毫秒。

代码示例：

运行结果：

使用form和to只能定义开始和结束，如果想要更加细致的去定义的话，可以使用百分比的方式。0%相当于form，100%相当于to，还可以设置25%、50%等等。使用百分比的方式能够更细化的方式去定义动画渐变过程的样式，例如从0%到25%背景颜色就会从红色渐变到蓝色，然后再从25%到50%背景颜色就会从蓝色渐变到灰色，50%到75%背景颜色就会从灰色渐变到黑色，50%到75%背景颜色就会从黑色渐变回红色，所以每定义一个%就相当于一个节点，一个渐变的节点。

animation-iteration-count属性是用来定义动画的循环播放次数的。

下面使用一个实际案例来说明，代码示例：

运行结果：

margin属性：

稍微介绍一下margin属性，这个属性是用于调节元素的外边距的，也被称之为区块属性，这个属性有四种写法，可以控制四个外边距：上、下、左、右。

示例1：margin: 10px 5px 15px 20px;

意义：

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

示例2：margin:10px 5px 15px;

意义：

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

示例3：margin:10px 5px;

意义：

上外边距和下外边距是 10px

右外边距和左外边距是 5px

示例4：margin:10px;

意义：所有 4 个外边距都是 10px

另外还有介绍一个属性：line-height，这个属性是用于设置行高的，一般配合text-align使用，能够让元素内的文字居中。

代码示例：

运行结果：

有时候我们会发现元素无法紧贴浏览器的边框：

在这是因为body的margin属性的默认值为10px，将body的margin属性的值改为0px就不会有这样的现象了。

代码示例：

运行结果：

使用列表制作菜单

我们可以随便打开一个网页，查看一下网页源代码，可以发现页面上的菜单、导航栏之类的基本都是使用ul无序列表来制作的，因为ul这种无序列表包含着的数据结构比较好，每一个li标签都包含一个数据，想要增加数据就增加一个li标签就好了，删除数据也是直接删除那个li标签就可以了。而且实际上使用列表来做菜单、导航栏什么的，其实很简单：首先使用list-style属性把无序列表自带的黑点样式给去掉，然后使用float-left属性让列表漂浮起。剩下的就是调一下字体颜色、宽高度、背景颜色、布局等等。

代码示例：

运行结果：