欢迎光临!欢迎来到小司的个人网站

关键词搜索:

当前位置: 首页>前端开发>CSS知识>

CSS-简单的手风琴效果 查看代码演示

日期:2018-05-16 编辑:admin 阅读次数:

    今天就更新一个简单的手风琴效果,先上GIF动画效果图:

    可以用这个简单的手风琴效果来装扮自己的首页,下面来看看是怎么实现的吧。

    Step 1:先写好基本的结构:

    Step 2:原理

  1.             利用float浮动效果,将div浮动到一行,再给div设置一个宽度(20%,5张图片平均分配),使图片显示出一部分效果出来。

  2.             鼠标经过.box下面的div使,让经过的那一个div宽度设置大一点(60%),剩余40%的宽度让其他的4张图片平均分配10%。

  3.             完成。

    这里有一个cursor: pointer;属性,意思是光标呈现为指示链接的指针(一只手)(转自:http://www.w3school.com.cn/cssref/pr_class_cursor.asp)。

简单的两步,就把一个手风琴的效果做出来了,赶快试试吧!

返回列表

相关文章

×