<!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百叶窗特效
原创
©著作权归作者所有:来自51CTO博客作者JackieDYH的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:HTML图片溶解特效
下一篇:HTML立方体分解
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Vue3 实现一个简单的路由切换效果
Vue3 实现一个简单的路由切换效果
vue router -
【Jquery插件集合】轮播、时间处理插件
【Jquery插件集合】轮播、时间处理插件
jquery css JavaScript