纯HTML+CSS实现手风琴效果，直接上代码和文件

xy12 · 发表于 2019-11-22 14:33

本帖最后由 xy12 于 2019-11-22 15:24 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xy</title>
<style>
      * {
         padding: 0;
         margin: 0;
      }
      ul {
         list-style: none;
      }
      img {
         display: block;
      }
      li {
         float: left;
         width: 50px;
         height: 250px;
         transition: width 1s;
      }
      .box {
         width: 600px;
         height: 250px;
         border: 1px solid #ddd;
         overflow: hidden;
      }
      li:hover {
         width: 400px;
      }
      li:not(:hover) {
         width: 50px;
      }
</style>
</head>
<body>
<div class="box">
      <ul>
         <li><img src="images/1.jpg" alt=""></li>
         <li><img src="images/2.jpg" alt=""></li>
         <li><img src="images/3.jpg" alt=""></li>
         <li><img src="images/4.jpg" alt=""></li>
         <li><img src="images/5.jpg" alt=""></li>
      </ul>
</div>
</body>
</html>

链接：https://pan.baidu.com/s/1fwr4aBW-blknPLTDOMdiuQ
提取码：gm8z

kzmkzm069 · 发表于 2019-11-27 14:26

li:hover {
         width: 400px;
      }
      li:not(:hover) {
         width: 50px;
      }

这一段代码是重点啊。不过not那个选择器得去熟悉一下了，平时不怎么用。不错，很开拓思路

xy12 · 发表于 2019-11-22 15:03

掩饰发表于 2019-11-22 14:49
感谢楼主，可以直接放网盘的，这个效果网上也是一大堆了，只适用于新手练习

因为上次说JS，有人让我先试着做手风琴效果和轮播图效果，我想着手风琴只用css就可以实现了，顺便在论坛里搜了下手风琴，只有一个帖子，用500行代码做出来，所以我就分享下，自己当时学css时自己做的。

xy12 · 发表于 2019-11-22 14:36

为什么上传的附件下载需要币

wq0220 · 发表于 2019-11-22 14:38

xy12 发表于 2019-11-22 14:36
为什么上传的附件下载需要币

为了防止站外的下载

xy12 · 发表于 2019-11-22 14:40

wq0220 发表于 2019-11-22 14:38
为了防止站外的下载

好吧，找了半天找不到哪里可以修改需要币的个数，想设置为0

wq0220 · 发表于 2019-11-22 14:42

xy12 发表于 2019-11-22 14:40
好吧，找了半天找不到哪里可以修改需要币的个数，想设置为0

设置不了，最低就是1

掩饰 · 发表于 2019-11-22 14:49

感谢楼主，可以直接放网盘的，这个效果网上也是一大堆了，只适用于新手练习

yc19951005 · 发表于 2019-11-22 15:02

贴一张图瞅一下是啥

XiaoBaizzZ · 发表于 2019-11-22 15:05

贴一张图  瞅一下

xy12 · 发表于 2019-11-22 15:06

XiaoBaizzZ 发表于 2019-11-22 15:05
贴一张图  瞅一下

不会做gif图，我上传到网盘，你可以去下载看看，几十kb

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 纯HTML+CSS实现手风琴效果，直接上代码和文件

免费评分

个人中心