<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. JavaWeb学习笔记（十八）—— DBUtils的使用

    一.DBUtils概述 1.1 什么是DBUtils commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbuti ...

  2. 初识express

    初识Express 1.简介: express是基于Nodejs平台的快速,开放,极简的web开发框架 2.安装 npm install express --save 3.Hello world: c ...

  3. Java操作系统剪贴板（Clipboard）复制粘贴

    Java操作系统剪贴板(Clipboard)复制粘贴

  4. C#的datatable使用

    // 构造datatable DataTable dt = new DataTable("test_table"); dt.Columns.AddRange(new DataCol ...

  5. Vue + iview框架，搭建项目遇到的相关问题记录 - 国际化router.js不能实现

    例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...

  6. C# 字符串转枚举类型

    Enum.Parse(typeof(枚举类型), 字符串类型) 如:在Unity中, Enum.Parse(typeof(SystemLanguage), "Chinese")

  7. Python练习 | WebServer

    #-*- coding:utf-8 -*- import sys, os from http.server import BaseHTTPRequestHandler, HTTPServer #--- ...

  8. (转)shell变量及扩展

    1.shell变量 shell变量赋值语句为”name=[value]“,等号两边不能有空格,可以给shell变量追加内容”name+=value“,取消shell变量的设置使用”unset name ...

  9. sencha touch overlay 里使用 list

    1 sencha touch 中 list 如果不设置一个固定高度或 flex : 1,  list 的内容就不会显示出来. 主要是因为 list 是可滚动的,你不设置高度 ,list 的高度默认就是 ...

  10. sencha touch textarea 手机上不显示滚动条，且不能滚动

    最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动. 在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条. 但在手机中是不 ...