css3手风琴效果diy

最新推荐文章于 2024-08-13 14:51:58 发布

啊哈前端

最新推荐文章于 2024-08-13 14:51:58 发布

阅读量397

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/wuzhe128520/article/details/49759039

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	*{margin: 0;padding:0;box-sizing: border-box;-moz-box-sizing: border-box;}
	body {
		border: 0;
	}
	 .clear:before,.clear:after{ /*清除浮动*/
		content: "";
		display: table;
		clear: both;
		height: 0;
		overflow: hidden;
	} 
	ul {
		list-style-type: none;
		overflow: hidden;
		width: 100%
	}
	.all {
		width: 800px; /*总宽度为800=100*4+400*/
		margin: 200px auto;
		text-align: center;
	}
	ul li {
	    position: relative;
	    float: left;
	    cursor: pointer;
	    width: 100px;	/*初始化的li宽度为100*/
	    height: 320px;
	    overflow: hidden; /*图片超过li宽度时候隐藏*/
	    transition: width 0.5s;  /*给li增加过渡效果*/
	    opacity: 0.5;
	    filter: alpha(opacity=50);
	}
	ul li:last-child {   /**/
		width: 400px;
		opacity: 1;
	    	filter: alpha(opacity=100);
	}
	ul li img {                  /*图片的宽度一定要固定*/
		 width: 400px; 
		 height: 320px;
	}
	/*以下两个hover顺序很重要,不能颠倒*/
	ul:hover li {          /*鼠标移动到ul时，将所有的li宽度设置为100px*/
		width: 100px;
		opacity: 0.5; /*设置透明度*/
		filter: alpha(opacity=50);
	}
	
	 ul li:hover {       /*鼠标移动到ul或者li时，将当前li的宽度设置为400px*/
		width:400px;
		opacity: 1;   /*设置透明度*/
		filter: alpha(opacity=100);
	} 
	.all:before{
		content:"css3手风琴效果";
		display: block;
		padding: 5px;
	}
</style>
</head>
<body>
    <div class="all">
    	<ul class="clear">
    		<li><img src="http://img0.bdstatic.com/img/image/26171547af11b48f5a89bc279d9548811426747517.jpg"></li>
    		<li><img src="http://img0.bdstatic.com/img/image/545c12e45b4e4909599b05b07242902f1418016471.jpg"></li>
    		<li><img src="http://img0.bdstatic.com/img/image/43efdbdfc71d1d129a14c9023ed1e5ca1418016656.jpg"></li>
    		<li><img src="http://img0.bdstatic.com/img/image/2043d07892fc42f2350bebb36c4b72ce1409212020.jpg"></li>
    		<li><img src="http://img0.bdstatic.com/img/image/6446027056db8afa73b23eaf953dadde1410240902.jpg"></li>
    	</ul>
    </div>
</body>
</html>