手风琴效果(作品思路出自老师)

                          手风琴效果

在这里插入图片描述
(1.)给他div,然后为他类名(类名随意),
2
在这里插入图片描述
(2.)给他设置标签,然后a标签里面设置em标签,a标签要被上面的div包裹住(em标签里面设置的是手风琴的头部,后面的001是内部内容)
3.
在这里插入图片描述
(3.)可以设置多个a标签,(按个人喜好)

在这里插入图片描述
(4.)创建css,引入css样式,给他导入到源代码中

在这里插入图片描述
(5.)然后可以在刚才创建的css里面设置手风琴的内容,宽为140像素,高为448像素,固定定位,最后个是鼠标移入是小手状态,
6.
在这里插入图片描述
(6.)给他标签设置:行内元素转换为块级元素,宽高各位140像素和30像素,颜色为白色,外下边距为2像素,字体大小为12像素,字体颜色,还有行高,设置动画坐标为x轴,移动距离为110像素,移动效果:0.2秒,速度中等。
7.
在这里插入图片描述
(7.)em标签也要设置,先让他行内变快级,宽高都是30像素,颜色,字体大小为16像素,字体颜色为白色,文字居中。
8.在这里插入图片描述
(8.)给它a标签设置尾类,x轴移动为0像素(移动上去就会变成0像素)
9.
在这里插入图片描述
(9.)然后就可以给他的a标签设置移动速度了,上面的1是选到第一个a标签,下面是移动的时间为0.05秒。
10.
在这里插入图片描述
(10.)总共有5个,就设置5个(之前在源代码中设置的a标签数量,时间是0.05的加,可以按自己的时间速度来)
11.
在这里插入图片描述
(11.)出来后是这种效果就可以了(快的话可以把速度调少一点,他是在右边向左移动)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现手风琴效果可以借助于CSS3的transition和transform属性,以及JavaScript的事件绑定和DOM操作。 HTML结构可以按照以下方式来组织: ```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样式可以按照以下方式来设定: ```css .accordion { display: flex; flex-direction: column; } .item { border: 1px solid #ccc; margin-bottom: 10px; overflow: hidden; transition: height 0.3s ease-in-out; } .item.active { height: auto; } .item h2 { margin: 0; padding: 10px; cursor: pointer; } .item .content { padding: 10px; } ``` JavaScript代码可以按照以下方式来实现: ```javascript var accordion = document.querySelector('.accordion'); var items = accordion.querySelectorAll('.item'); for (var i = 0; i < items.length; i++) { var item = items[i]; var heading = item.querySelector('h2'); heading.addEventListener('click', function() { if (item.classList.contains('active')) { item.classList.remove('active'); } else { for (var j = 0; j < items.length; j++) { items[j].classList.remove('active'); } item.classList.add('active'); } }); } ``` 这段JavaScript代码首先获取到手风琴容器和所有手风琴项,然后遍历每个手风琴项,为每个标题元素绑定点击事件。点击标题时,如果当前手风琴项已经处于展开状态,则关闭它;否则,关闭其他所有手风琴项并展开当前手风琴项。展开和关闭的效果通过CSS样式中的`.item.active`类来控制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值