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

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

让元素的 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 属性产生过渡效果。

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

原文链接:https://www.ek58.com/archives/3787,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?