欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML百叶窗特效

程序员文章站 2022-06-01 16:53:15
...
<!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>

HTML百叶窗特效

上一篇： hpztsb10.exe是什么进程 有什么作用 hpztsb10进程查询

下一篇： springboot 集成swagger流程，弹窗、页面不显示等疑难杂症以及解决办法

推荐阅读