您的位置：首页 > Web前端 > CSS

纯css写的一个手风琴效果

2014-09-17 13:34 176 查看

<!doctype html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>纯css写的一个手风琴效果</title>

<style>

* { margin: 0; padding: 0; }

body{background: #eee}

.e-warp { width: 600px; height: 250px; overflow: hidden; margin: 100px auto; border-radius: 5px; box-shadow: 0 0 10px #999; }

.e-warp li{ float: left; width: 120px; height: 100%; box-shadow: 0 0 5px rgba(0,0,0,0.5); list-style: none; width: 50px;

-webkit-transition:width 0.5s ease-out;

-moz-transition:width 0.5s ease-out;

transition:width 0.5s ease-out;

}

.e-warp li:first-child { width: 400px; }

.e-warp li:hover { width: 400px; }

.e-warp:hover li:not(:hover) { width: 50px; }

</style>

</head>

<body>

<ul class="e-warp">

<li><a href="#"><img src="http://y.photo.qq.com/img?s=4BsfCJx6G&l=y.jpg" alt="e-"/></a></li>

<li><a href="#"><img src="http://y.photo.qq.com/img?s=MsUFaGd1k&l=y.jpg" alt="e-"/></a></li>

<li><a href="#"><img src="http://y.photo.qq.com/img?s=DvIQnaOOz&l=y.jpg" alt="e-"/></a></li>

<li><a href="#"><img src="http://y.photo.qq.com/img?s=ufFGoHfai&l=y.jpg" alt="e-"/></a></li>

<li><a href="#"><img src="http://y.photo.qq.com/img?s=1AqJ4r5fs&l=y.jpg" alt="e-"/></a></li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航