手风琴案例

最新推荐文章于 2020-02-18 21:55:24 发布

原创最新推荐文章于 2020-02-18 21:55:24 发布 · 301 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

3 篇文章

订阅专栏

博客围绕手风琴案例展开，但具体内容缺失。手风琴案例通常在前端开发中用于页面布局展示，能以折叠展开的形式呈现信息，具有良好的交互性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴特效</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background: #ccc;
	}
	.show{
		height: 320px;
		width: 805px;
		overflow: hidden;
		margin:50px auto;
		box-shadow: 5px 5px 5px yellow;
	}
	.box{
		overflow: hidden;
		width: 4000px;
	}
    .divbox{
    	float: left;
    	width: 160px;
    	height: 320px;
    	border-left:1px solid #fff;
    	/*transition-property:width;
    	transition-duration: 1s;*/
    	transition:all 1s;
    	position: relative;
    }
    .show .box .divbox:hover{
       width: 640px;
    }
    .box:hover .divbox{
    	width: 40px;
    }
    .divbox div{
    	width: 640px;
    	height: 40px;
    	background: rgba(0,0,0,0.5);
    	position: absolute;
        color: #fff;
        bottom: 0;
        left: 0;
        padding-left:40px;
        line-height: 40px;
    }
    .divbox div:hover{
    	height: 320px;
    }
	</style>
</head>
<body>
	<div class="show">
		<div class="box">
	        <div class="divbox">
	        	<img src="img/img1.jpg" alt="">
	        	<div>功夫熊猫<br>
                   或多或少放哈哈擦擦ad哈查处嚓嚓查收阿查查查 Caucasian
	        	</div>
	        </div>
	        <div class="divbox">
	        	<img src="img/img2.jpg" alt="">
	        	<div>飞屋环游</div>
	        </div>
	        <div class="divbox">
	        	<img src="img/img3.jpg" alt="">
	        	<div>汽车人</div>
	        </div>
	        <div class="divbox">
	        	<img src="img/img4.jpg" alt="">
	        	<div>玩具总动员</div>
	        </div>
	        <div class="divbox">
	        	<img src="img/img5.jpg" alt="">
	        	<div>机器狗</div>
	        </div>
	   </div>
	</div>
	
</body>
</html>