HTML百叶窗特效 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百叶窗</title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		#box{
			width: 800px;
			height: 320px;
			margin: 100px auto;
			overflow: hidden;
		}
		#box div{
			float:left;
			width:160px;
			transition: all 2s linear;/*cubic-bezier(0,0,1,1)linear贝塞尔曲线应用与UI交互界面设计*/
		}
		#box:hover div{
			width:40px;
		}
		#box div:hover{
			width:640px;
		}
	</style>
	<body>
		<div id="box">
			<!--打开页面，box居中，显示五张图片，当鼠标滑上box对应所选中的图片宽度  增加，其余宽度减少，当鼠标移开，宽度减少，要使用css3过度属性，使效果平滑，，边框具有阴影模糊，使用css3：box-shadow；-->
		<div id="">
		<img src="img1.jpg"/>
		</div>
		<div id="">
		<img src="img2.jpg"/>
		</div>
		<div id="">
		<img src="img3.jpg"/>
		</div>
		<div id="">
		<img src="img4.jpg"/>
		</div>
		<div id="">
		<img src="img5.jpg"/>
		</div>
		
		</div>
	</body>
</html>

posted @ 2019-10-16 10:53  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源