第一百三十一章 过渡效果的小应用

上一章已经把我们常用的内容讲的差不多了，但是讲的这么简短，总让人有一种心里不踏实的感觉，于是这一章我们来补充一些小练习。

让元素的 CSS 属性发生变化，我们已经学习了很多方法，很强大，很好用，不过我懒得写……好在我们还有一种更简单的，纯 CSS 就可以的，hover 这个伪类。

于是我们首先有一个元素，然后给它设置一些 CSS 样式：

#miao {width: 100px;height: 100px;background: blue;}

还有 hover 时候的样式：

#miao:hover {width: 200px;height: 200px;background: red;}

然后差了什么？我们去定义哪些属性需要过渡效果，过渡的时长又是多少。根据上一章的内容，如何去写问题不大。那么写在上面哪一段中呢？我觉得大家可以试一试，看一看具体会发生什么。我没做实验，就在这里信口开河，请大家不要学我。我觉得首先要定义这个属性需要有过渡效果，然后它发生改变的时候，才会显示出相应的效果来。于是我愿意把这个属性添加给第一段。那我们写出来看一看实际的效果吧：

<div id="miao"></div>

#miao {width: 100px;height: 100px;background: blue;transition: all 3s;}#miao:hover {width: 200px;height: 200px;background: red;}

事情就是这么简单，然后大家也可以参照这个例子，按照上一章所讲的内容，去修改这个属性：只对某一个样式发生过渡，或者修改过渡的时长，或者增加延时，或者给不同的属性加上不同的时长……

以及使用 jQuery 去控制元素的样式发生变化，然后借助这个 CSS 属性产生过渡效果。

小老鼠都帮大家写了一遍了，希望大家也能够动手去操作一番。