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中建立<form>数组?_PHP教程
-
网页源代码中加什么实现该页面播放电视剧_html/css_WEB-ITnose
-
HTML XML XHTML DHTML区别与联系_html/css_WEB-ITnose
-
CSS重复定义的问题请教_html/css_WEB-ITnose
-
css中position:fixed实现div居中_html/css_WEB-ITnose
-
为什么说overflow: hidden;能清除浮动呢_html/css_WEB-ITnose
-
jQuery网页定位导航特效实现方法
-
-moz- -webkit- -ms- 为神马要写全_html/css_WEB-ITnose
-
PHP 动态生成静态HTML页面示例代码_php实例
-
submit后,html中的select 怎么还是原来的值_html/css_WEB-ITnose