<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. JeeSite功能模块解读，功能介绍，功能实现

    做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 首先说下他的一个流程 Jeesite流程 流程 主要是jsp,entity,dao,dao.xml,service,controller ...

  2. maven 打包 源代码

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-sourc ...

  3. 进阶篇：4）面向装配的设计DFA总章

    本章目的:理解装配的重要性,明确结构工程师也要对装配进行设计. 1.基础阅读 ①进阶篇:1)DFMA方法的运用: ②需要一台FDM3d打印机:请查看 基础篇:8)结构设计装备必备: 2.为什么要学习D ...

  4. vue打包后出现的.map文件

    run dev build 打包项目后出现的list中的".map"文件最大. “.map”文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得 ...

  5. MySQL数据库 InnoDB引擎 事务及行锁总结

    一.事务 1.事务的四大特性 (1)原子性:事务开始后所有的操作要么一起成功,要么一起失败,整个事务是一个不可分割的整体. (2)一致性:是物开始前到结束后,数据库的完整性约束没有被破坏. (3)隔离 ...

  6. oracle--块信息深入解析

    一,创建 Data Block是数据库中最小的I/O单元 01,建立一个新的表空间 查看默认表空间位置 select TABLESPACE_NAME,FILE_NAME from dba_data_f ...

  7. 安装APK时报 Installation failed with message Failed to finalize session : INSTALL_FAILED_USER_RESTRICTED: Invalid apk.

    Installation failed with message Failed to finalize session : INSTALL_FAILED_USER_RESTRICTED: Invali ...

  8. 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

    https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

  9. IBM Worklight OutOfMemoryError: Java heap space 错误

    在启动  IBM Worklight 6.0 server 的时候,报了一个  OutOfMemory 的错误: [INFO    ] FWLSE4006I: Worklight Studio is ...

  10. 在W3C SCHOOL网站上发现一个关于Schema的错误

    原地址是http://www.w3school.com.cn/schema/schema_complex_empty.asp 下面这个例子是不正确的 xmlspy报错. 因为<xs:restri ...