纯css写的一个手风琴效果

最新推荐文章于 2023-07-29 18:59:36 发布

undefined001

最新推荐文章于 2023-07-29 18:59:36 发布

阅读量546

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/undefined001/article/details/39341479

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

undefined001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css写的一个手风琴效果

纯css写的一个手风琴效果 * { margin: 0; padding: 0; } body{background: #eee} .e-warp { width: 600px; height: 250px; overflow: hidden; margin: 100px auto; border-radius: 5px; box-shadow:
复制链接

扫一扫