<style>

        .box{ width:  1000px; height: 450px; margin:0 auto; overflow: hidden;}

        .box div{ width: 20%;  float: left; transition: all 1s;}

        img{  width: 600px;heigt:100%}

　　　　　.box:hover div{ width: 5%; }

        .box div:hover{ width: 600px;}

    </style>

</head>

<body>

    <div class="box">

        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/1.png" alt=""></div>

        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/2.png" alt=""></div>

        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/3.png" alt=""></div>

        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/4.png" alt=""></div>

        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/5.png" alt=""></div>

    </div>

css手风琴的更多相关文章

  1. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  2. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  3. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  4. javascript效果：手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  5. css技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  6. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  7. 30个优秀的CSS技术和实例 By 彬Go 2008-12-04

    在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...

  8. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  9. 常用Jquery插件整理大全

    做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用文档供大家下载.整理了一晚上才 ...

随机推荐

  1. HTML-基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  2. APP元素的四大类

    一个完整的APP包括四大类:各种“栏”.内容视图.控制元素.临时视图 各种“栏”:状态栏.导航栏.标签栏.工具栏.范围栏 内容视图:列表视图.卡片式图.集合视图.图片视图.文本视图 控制元素:用于控制 ...

  3. 主流服务器虚拟化技术简单使用——Xen（一）

    Tips:因为博客园网页布局的原因,部分图片显示不清晰,可以放大网页查看清晰图片. 如果系统使用物理机,需要在BIOS里面开启Intel VT-x(或AMD-V),如果是VMware workstat ...

  4. Sqlite shell 的使用

    学习python中,涉及SQLite3数据库的操作,其中一种是使用sqlite shell,在园子里找到下面这篇文章,跟着试了下,挺好. 这里要注意,语句是C语言规范的吧,语句末尾需要";& ...

  5. element-ui 使用span-method表格合并后hover样式的处理

    在使用element表格合并后,发现鼠标只有移入第一个合并行时,合并的部分会高亮,移入其他行,不会高亮,这样效果看起来不是很好.查看了文档也没有直接的解决方法,就通过现有的方法处理了一下,解决了hov ...

  6. 3-----Docker实例-安装MySQL

    Docker 安装 MySQL 方法一.docker pull mysql 查找Docker Hub上的mysql镜像 runoob@runoob:/mysql$ docker search mysq ...

  7. Linux 远程登录ssh服务器

    1.安装ssh服务器 sudo apt-get install openssh-server 2.在另一端输入ssh  IP及密码(或ssh 用户名@IP)就可以远程登录到IP所在计算机

  8. openerp学习笔记 模块结构分析

    以OpenERP7.0中的 hr_expense 模块为例: 如图中代码所示: __init__.py :和普通 Python 模块中的__init__.py 作用相同,主要用于引用模块根目录下的.p ...

  9. C语言实现链表

    #include<stdio.h>#include<malloc.h>#include<stdlib.h> typedef struct Node {    int ...

  10. Jquery执行效率提高的方法

    1.选择器性能排行:$("#ID") > $("Tag") > $(".Class") > $("[attrib ...