效果炫酷 CSS3手风琴的制作过程大公开
效果核心原理
利用表单的radio相同name只能选中一个作为效果开关
利用伪类checked的检测选中状态并改变样式
我们来写代码吧~~~
首先写html的基本结构：
接下来写CSS样式：
接下来设置ul盒子的样式：
然后是里面li的样式：
我们去给每一个li插入图片吧：
我们紧接着设置每个raido按钮的样式：
最后我们利用checked伪类监测变化，
当用户点击不同的按钮出现不同的样式。
此时一个简单的手风琴就制作完成了。
如果我们还想通过checked去控制背景怎么实现呢?
首先得在每个radio下面加一个div,类名为bg.
然后去设置每个div的样式:
然后给每个div添加图片:
当我们raido被选中的时候让背景显示:
至此，我们的手风琴实现的天空之境就完全实现了。
附上视频，详解全部制作过程：