css手风琴

<style>
        .box{ width:  1000px; height: 450px; margin:0 auto; overflow: hidden;}
        .box div{ width: 20%;  float: left; transition: all 1s;}
        img{  width: 800px;}
　　　　　.box:hover div{ width: 5%; }
        .box div:hover{ width: 70%;}
    </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>

时间： 2024-09-30 20:09:34

css手风琴的相关文章

纯css手风琴效果

1 <!doctype html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯css写的一个手风琴效果供大家学习</title> 6 <style> 7 * { margin: 0; padding: 0; } 8 body{background: #eee} 9 .e-warp { width

今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. 单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面,单击每个实例的图片截图可以直接跳转到相应实例的Demo页面. 1.Hoverbox 图片集一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果. 2.高级CSS菜单一款很有创意且复杂的CSS导航方案. 3.滑动影集手风琴效

精选30个优秀的CSS技术和实例

精选30个优秀的CSS技术和实例投递人墙头草发布于 2008-12-06 20:57 评论(97) 有17487人阅读原文链接 [收藏] ? ? 今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. 单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面,单击每个实例的图片截图可以直接跳转到相应实例的Demo页面. 1.Hoverbox

javascript效果：手风琴、轮播图、图片滑动

最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style:

常用元件及常见bug

一.元件自定义按钮可用button或a display为 inline-block 方便设置格式,通过 padding,height,line-height,font-size设置按钮的大小 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>BUTTON</title> 5 <meta charset="utf-8"> 6 <style type="te

jQuery结合CSS实现手风琴组件(2)----利用seajs实现静态资源模块化引入

1. 目录结构(webStrom) 2. 代码 1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS DIV 1</title> <script type="text/javascript" src="js/jquery-3.0.0.js"&g

纯css手写手风琴

---恢复内容开始--- 在网页中我们经常会遇到手风琴效果,之前经常会用jQuery和JavaScript来写,但今天给大家介绍一种用纯css写的手风琴. 下面是html部分: 1 <div class="togglebox"> 2 <input id="toggle1" type="radio" name="toggle" checked="checked" /> <!--c

纯js和纯css+html制作的手风琴的效果

一:纯css+html的手风琴效果这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;list-style: none;} #div{width: 1180px;height: 405px;bo

jQuery结合CSS实现手风琴组件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS DIV 1</title> <link rel="stylesheet" type="text/css" href="1.css"></link> <script type="text/ja