<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. centOS7虚拟机设置固定IP

      说明:想要达到的如下效果, 1.笔记本主机IP为设置自动获取,不管什么情况下,不受虚拟机影响,只要连接外网就可以正常上网: 2.只要笔记本主机可以正常访问外网,启动虚拟机中的CentOS 7系统就 ...

  2. Ant demo

    <?xml version="1.0" encoding="UTF-8"?> <!-- 定义一个工程,默认任务为warFile. --> ...

  3. 高阶篇：4.1.2.3）产品零件级别的QFDII

    本章目的:介绍产品零件级别的QFDII编写方法. 1.前言 这章接前面部件级别的QFDII. 产品零件级别的QFDII,其实就是将零件QFDII所得到的设计要求,进一步分配零件的特征(Part Cha ...

  4. 高阶篇：4.2.3）DFMEA现有设计：预防控制与探测控制

    本章目的:在现有设计中,明确预防控制与探测控制的定义和手段. 1.现有控制的填写部位: 2.现行设计控制(h)定义: 作为设计过程的一部分,现行设计控制是已经实施或承诺的活动,它将确保设计充分考虑设计 ...

  5. 离线安装eclipse的maven插件包

    离线安装eclipse的maven插件包 1.打开你本地的eclipse根目录,随便新建一个文件夹例如mavenPlugin,把maven离线插件包中两个文件夹复制到这个新建的这个文件夹里边 2.找到 ...

  6. IIS进程池异常崩溃，导致网站 service unavailable，原因排查与记录。

    昨晚十点钟的样子,网站崩溃,开始 service unavailable,最近开始业务高峰,心里一惊,麻痹肯定进程池又异常崩溃了.又碰到什么问题?上次是因为一个异步线程的问题,导致了进程池直接崩溃,后 ...

  7. ruby中的\z与\Z区别

    s = "this is\nthe name\n" puts "--------------" puts s.match(/name\Z/) puts s.ma ...

  8. C语言实现链表

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

  9. 关于发布webservice提示The test form is only available for requests from the local machine

    通过编辑 Web 服务所在的 vroot 的 Web.config 文件,可以启用 HTTP GET 和 HTTP POST.以下配置同时启用了 HTTP GET 和 HTTP POST: <c ...

  10. Struts2拦截器和标签

    一.struts2拦截器 1.struts2是框架,封装了很多的功能,struts2里面封装的功能都是在拦截器里面. 2 struts2里面封装了很多的功能,有很多拦截器,不是每次这些拦截器都执行,每 ...