<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. tomcat 搭建以及发布配置

    身为开发人员, 一直干着开发的事情, 只干开发的事情, 却缺少了对于环境部署方面的必备技能的培养, 所以在公司安排的手头任务解决完的情况下, 自己抽空了解并且实践了一下tomcat的配置.写下通过网络 ...

  2. python函数超时情况应对总结

    最近处理一个线程中的函数超时问题. 函数里面有一个地方可能会卡死,我们需要去判断这个是不是卡死了,并做出相应的应对方案. 最开始想的是在函数上增加一个装饰器,使其在超时时抛出异常,然后在其他地方捕获这 ...

  3. c# 水晶报表使用说明

    水晶报表介绍 水晶报表是 vs 早期版本自带的一款报表控件.vs2017不自带水晶报表,需要自行安装.虽然水晶报表是收费控件,但是微软已经付过钱了,所以vs自带的水晶报表可以直接使用. 如果项目是 . ...

  4. python入门练习之如何连接数据库

    !/usr/bin/python -- coding: UTF-8 -- author = 'luke' from sqlalchemy import create_engine from sqlal ...

  5. ionic3打包打包安卓apk详细过程以及遇到的问题

    1.jdk和sdk的安装以及环境变量配置参考打包详解 上述连接已经从下载安装jdk以及sdk的环境变量配置到打包的流程以及很详细了.但是在我自己安装打包的过程中遇到了这篇文章中没有遇到的问题,下面图文 ...

  6. goLang冒泡

    // test project main.gopackage main import (    "fmt") func main() {    var a = [10]int{1, ...

  7. 如何使标签a处于不可用状态

    今天做项目的时候突然发现a标签下用disabled无法使它的点击事件失效(貌似ie下可以,没有测试过), 首先说一下项目要求,点击a标签(点击之后以防多次快速点击,这里需要点击后使标签a实现),触发a ...

  8. unity远程修改游戏配置

    关于修改游戏配置这点,如果pc还好 但是在移动端,比较麻烦,比如游戏换ip地址了,可能需要重新打包了 那能不能动态修改,这里有个思路 以udp举例 在客户端里面写一个udp服务,在游戏第一界面打开,比 ...

  9. 快速掌握用python写并行程序

    目录 一.大数据时代的现状 二.面对挑战的方法 2.1 并行计算 2.2 改用GPU处理计算密集型程序 3.3 分布式计算 三.用python写并行程序 3.1 进程与线程 3.2 全局解释器锁GIL ...

  10. MySql的索引操作

    索引是一种特殊的数据库结构,可以用来快速查询数据库表中的特定记录.索引是提高数据库性能的重要方式.MySQL中,所有的数据类型都可以被索引.MySQL的索引包括普通索引.唯一性索引.全文索引.单列索引 ...