html+css手风琴效果

最新推荐文章于 2022-07-31 22:18:10 发布
最新推荐文章于 2022-07-31 22:18:10 发布
阅读量2.1k 收藏 5
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wd1073351726/article/details/103641439
版权

纯html+css代码，适合新手学习

<!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>
wikn116
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html+css手风琴
01-29
【html+css】手风琴，实现手风琴效果展示图片
HTML+css+js制作的手风琴效果网页
06-15
使用手风琴效果网页设计来美化自己网页内容； 整个网页是将CSS内联在了html的代码中；js中用到了for循环遍历，获取所有的li标签，添加点击事件，修改body的背景图片等一系列的操作。 希望本资源能给大家提供所需的帮助！！！！！！！！！！！！！！！！！！！！！！
HTML+CSS实现手风琴菜单（菜单横向，鼠标悬停可显示）
weixin_44520259的博客
05-17 4077
一、效果预览 二、代码实现 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>手风琴菜单</title> <link rel="stylesheet" href="css/style.css"...
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记
ProgramNovice的博客
07-31 1251
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记 这是我参与「第四届青训营」笔记创作活动的的第7天，利用HTML+CSS实现按钮手风琴效果。
水晶图片案例
weixin_33695450的博客
05-14 363
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
html+jq+css手风琴（折叠效果）
04-04
html+jq+css手风琴（折叠效果）
Html 实现手风琴效果
nihaio25的博客
09-10 5520
html简单实现手风琴效果 这是加载页面的效果 这是鼠标悬停的效果 鼠标悬停哪一张图片也会相对应的展开（下面是代码，图片自己找几张放上去，路劲修改成自己的就可以了） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
JQuery实现手风琴。还有纯html+css写的手风琴。
m0_53881313的博客
05-25 1091
手风琴效果 编写网页，设置CSS完成手风琴的结构和样式设置。 为所有图片添加鼠标移入与移出事件。 鼠标移入时，将当前元素的width设为图片的原宽，其他图片的width= (<div>的宽度 - 图片的原宽) / 剩余图片元素个数。 鼠标移出时，所有图片的width=<div>的宽度 / 所有图片的个数。
在html中，如何实现手风琴的效果？
weixin_44571808的博客
02-10 2405
开发工具与关键技术：DW transition-delay 作者：黎凤焕 撰写时间：2019年2月4日 在html中，手风琴的出现顺序是不同的，我们可以运用transition-delay，transition-delay有延迟的作用，添加延迟的时间，出现的效果就会随着间隔时间大小出现。 设置transform: translateX(110px)和transition: all 0.2...
手风琴页面html,滑动手风琴的制作（只涉及HTML+css）
weixin_36212732的博客
06-05 916
这次作业是通过HTML和css制作滑动手风琴，使鼠标指在图标时让内容通过滑动的方式显示出来。滑动手风琴展示图标可以通过阿里巴巴矢量图标库寻找，也可以通过链接bootcdn中的图标库，如下图BootCDN在中进行链接链接本次学习的重点内容为以下几点：1.制作出滑动效果，运用的是transition标签,transition为过渡动画效果，可用来设置滑动效果代码如下图transition2.使用消除浮...
html垂直手风琴.zip
06-02
适用于pc端！！！不适用于移动端！！！ 默认内容页面隐藏，需点击标签，内容页面方可从标签下展开，
Html5 js实现手风琴效果
11-28
使用H5实现横向的手风琴功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { width: 522px; height: 222px; margin: 50px auto; border: 1px solid red; box-sizing: border-box; box-sizing: border-box; } ul
html+css+js手风琴效果，或焦点图代码
05-18
摘要:脚本资源,Ajax/JavaScript,手风琴菜单　手风琴效果。主要用到了html+css+js，其实也可以看作是一款焦点图效果，制作时候要注意：首先要把布局弄好，然后，让所有的图片都变小，让当前的这个图片变大。就OK了。...
纯js+html和纯css+html制作手风琴效果
11-23
一、纯css+html的手风琴效果 这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。 代码如下： <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') ...
如何用HTML和css实现简单的手风琴菜单效果，附带详细注释
Dasy_R的博客
12-04 3214
超完整的代码+详细注释，适合给小白做的简单的手风琴菜单实例 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s
CSS & HTML 手风琴菜单
mengs
12-27 3051
CSS & HTML 手风琴菜单 教程地址：原文地址（YouTube） B站教程：原文转载（bilibili） 两个视频的内容相同，第二个为转载 效果图 代码区 以下代码为本人填写，转载请注明教程地址和本贴地址 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
DAY004-CSS基础
qq_45579661的博客
08-03 307
1.思维导图 2.作业+练习 可参考 a.导航栏+hover b.侧边栏+hover 例： <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"conten...
纯CSS实现手风琴效果（附演示）
weixin_41700993的博客
05-30 3822
手风琴效果html部分CSS部分 效果 html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>纯HTML和CSS实现垂直手风琴菜单列表</title> <link rel="stylesheet" href="style.css" /> </head> <body> &l
css3手风琴效果
最新发布
05-25
CSS3手风琴效果可以通过使用CSS3的transition属性和伪类来实现。下面是一个简单的示例： HTML代码： ``` <div class="accordion"> <div class="item"> <h2>标题1</h2> <div class="content"> <p>内容1</p> </div> </div> <div class="item"> <h2>标题2</h2> <div class="content"> <p>内容2</p> </div> </div> <div class="item"> <h2>标题3</h2> <<div class="content"> <p>内容3</p> </div> </div> </div> ``` CSS代码： ``` .accordion { display: flex; flex-direction: column; margin: 20px 0; } .item { border: 1px solid #ccc; margin-bottom: 10px; overflow: hidden; transition: height 0.3s ease-out; } .item h2 { background-color: #ccc; color: #fff; margin: 0; padding: 10px 20px; cursor: pointer; } .item.active { height: 200px; } .item.active h2 { background-color: #555; } .content { padding: 20px; } ``` 在这个例子中，我们使用了flex布局将所有的内容垂直排列。每个手风琴项由一个标题和一个内容组成。当用户点击标题时，我们使用JavaScript将.active类添加到项中。这个类将触发CSS过渡，从而平滑地展开手风琴项。 要实现手风琴效果，我们使用overflow:hidden隐藏内容，并将高度设置为0。在.active类中，我们将高度设置为一个固定值，这样就可以展开手风琴项。我们还添加了一些过渡效果，使过渡更平滑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wikn116

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值