本文介绍了如何使用纯CSS3实现手风琴特效，并提供了详细的步骤和代码示例。利用华为商城素材制作背景图片，通过设置无序列表、输入框样式和背景图片实现交互效果。文章还提及了前端学习进程，即将进入JavaScript的学习阶段。
之前发过一组崩坏三的手风琴特效，有小伙伴需要思路与代码。
这回终于有时间整理了出来。
素材懒得找新的了，就用了做网页用的华为商城的素材。
首先呢，先写出个无序列表。
再去在每个li里添加一个表单标签input，主要为了做效果，外面就不套form标签了。
写完了之后开始增加样式，先把ul大盒子宽高写出来，再去给每个小盒子一个宽高，再浮动，排成一行。
再给每个小盒子添加背景图片，和每个div里添加背景图片。
背景图片添加好了以后，开始设置div盒子，给它一个定位，脱离原来的层级，固定住，让它不管上拉下拉，背景都是不动的。
再给z-index一个负值，让层级沉下去。
写个opacity，让input得那个圆，透明。
接下来就是给input样式，对了，这个input宽度给了以后，li得宽度去掉，让input撑开li。
给input，一个checked，让第一个图片就处于点击的状态，对了，input，都是用的单选状态，才可以达到效果。
接下来的样式就如上图，让被点击的那个图片，连着背景图片一起点击切换。
下面上效果图。
第一张。
第二张。
第三张。
怎么样，如果觉得还不错的话，关注走一波。
同时也期待大神在评论区指点迷津，前端零基础入门，已经学到弹性盒模型。
下个月就开始学JS了，到时候会给大家带来有意思的特效，我们下个头条内容见，拜拜！！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
