<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. eclipse项目目录展示结构设置

    我因为前后端都搞过, 解除过很多的开发IDE,说真的,很多的项目目录结构都是一级一级分开,然后我可以通过展开等操作来查看文件等资源信息,结果呢?java的开发IDE eclipse默认的项目目录展示简 ...

  2. 「框架」菜鸟简单模仿一下spring的ioc和aop思想，欢迎大家进来阅读指教

    *博客搬家:初版发布于 2015/12/04 16:41    原博客地址:https://my.oschina.net/sunqinwen/blog/539397 spring最核心的部分莫过于io ...

  3. Angular material mat-icon 资源参考_Av

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  4. Q791 自定义字符串排序

    字符串S和 T 只包含小写字符.在S中,所有字符只会出现一次. S 已经根据某种规则进行了排序.我们要根据S中的字符顺序对T进行排序.更具体地说,如果S中x在y之前出现,那么返回的字符串中x也应出现在 ...

  5. 【Python】子域名查询脚本

    脚本学习,多写写就会啦,来一发个人编写的超级无敌low的子域名查询脚本 #coding:utf-8 import re import requests import urllib import url ...

  6. 用servlet校验密码

    一.结果图 package Login; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connect ...

  7. 基于两阶段提交的分布式事务实现(UP-2PC)

    引言:分布式事务是分布式数据库的基础性功能,在2017年上海MySQL嘉年华(IMG)和中国数据库大会(DTCC2018)中作者都对银联UPSQL Proxy的分布式事务做了简要介绍,受限于交流形式难 ...

  8. Python——模块以及导入注意事项

    在Python中,每一个文件都应该是可以被导入的. 每一个独立的python文件都是一个模块 在导入文件时,文件中所有没有任何缩进的代码都会被执行一遍. 而在实际应用时,每个模块都是有专人负责独立开发 ...

  9. V1-bug Alpha阶段发布说明

    V1-bug Alpha阶段发布说明 欢迎使用WEDO创意社区(部署IP为:60.205.230.0) WHAT'S WEDO 这是一个致力于创意发布.合作开发的网站. 模块 功能 注册 添加新账号 ...

  10. git设置core.autocrlf

    背景: 使用虚拟机共享windows文件夹,文件夹中用git clone 一个仓库.在linux下编辑文件,用git status发现几乎所有的文件都为修改状态.   原因: windows下和lin ...