效果炫酷 CSS3手风琴的制作过程大公开

野性酷女 2023-07-11 08:57 38阅读 0赞

![format_png][]

--------------------

![format_png 1][]

效果核心原理

*  利用表单的radio相同name只能选中一个作为效果开关
 *  利用伪类checked的检测选中状态并改变样式

![format_png 2][]我们来写代码吧~~~

首先写html的基本结构：

![format_png 3][]

接下来写CSS样式：

![format_png 4][]

接下来设置ul盒子的样式：

![format_png 5][]

然后是里面li的样式：

![format_png 6][]

我们去给每一个li插入图片吧：

![format_png 7][]

我们紧接着设置每个raido按钮的样式：

![format_png 8][]

最后我们利用checked伪类监测变化，  
当用户点击不同的按钮出现不同的样式。

![format_png 9][]

此时一个简单的手风琴就制作完成了。

如果我们还想通过checked去控制背景怎么实现呢?

首先得在每个radio下面加一个div,类名为bg.

![format_png 10][]

然后去设置每个div的样式:

![format_png 11][]

然后给每个div添加图片:

![format_png 12][]

当我们raido被选中的时候让背景显示:

![format_png 13][]

至此，我们的手风琴实现的天空之境就完全实现了。

附上视频，详解全部制作过程：

--------------------

![format_png 14][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMkdWRFg5amxnUFBqalRSY3VWY1V5NTVuT3Q5WDYybWdLQXVsS3BaeWtlNE0weklFZFc3RFF2QS82NDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMkJpY2YxYU1lS2hjbEtKczNDYjhNM2NOaHB5VkFDbWlia3Q2dDNPbnRJRERCUDZsdTM2aEpjVk13LzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMud3gucXEuY29tL21wcmVzL2h0bWxlZGl0aW9uL2ltYWdlcy9pY29uL2NvbW1vbi9lbW90aW9uX3BhbmVsL2Vtb2ppX3d4L1dhdGVybWVsb24ucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMnE5NVc4dU9DM1o3T2RGNE1Md2lhTWxWVmljR3ZDVDFiZk5CRzV5anJKMjFuMnFja1FGNTlJVmtBLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMm53c1RxZXpjaWJqRGhWcVV2MU1BMEtJTkJoMnptaHVUWTNBUnc0UUdsMXRjNlFQSmlhOHFCVHhBLzY0MA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMmY3Nko5UGVpYmR3ckxPR0RKR3JUVHRMWnpLWkJOTHlaQnZKUmozUGlhNUh2VFA5Z3hZM015U1BBLzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMmRvRXdOeUhpYmtxRmVjaE5zUjhWbUp6ZlNONTlVbEdXWm1oTEZpYnVmMW5JcFRGdnI4a2dLaGliUS82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMnRONTNOZHBNNFh2ZkpQaHNLYmdZS3dZUUVpYzJJUFZlVVh6WWhzSHF2QVlNT241NHFRNTczeWcvNjQw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMnBxUFNIUGFnN2hwemZZU2JmMVNmSm1yNFc5YzdkZk5Mb0xRQmtOM1EyS0psRjlnbGlhUlVETXcvNjQw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMm9BSVp6SkV2YTJnbUh3WVFuQ2xUNmljeGljU2NtZEF4NFJHeUtJN0VIUno3M1ByZlllZ0E0SVpnLzY0MA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMkFlTkRMb09pY3FYSmliRGs5QlBuR2pZaGdJQTFnQTFab3FEdzBRcWliUUcxVUJLanFpY3kzVmdRR2cvNjQw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMlVwWDRUd1h0U1RqYTRwS1VGS3A3ZjFpY0pZdTAzbTFsTnRBU2liaWFrbGFibFBNVmlhRnI1UUg3cXcvNjQw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMnVHSUtZQk1FUk96b2psODVhNFJaRU5tZUV2YzFtZVhCMTQ1Nmo3eDFkVU5BUnp0cVBsQjlCdy82NDA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMjZrNWtpYUtsMDVjbTZLYjdodzI3ejVCeDlKVWtpYnJPM21GcWxlaWFFdjdXNTNVVnFySHh3S2FKdy82NDA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVTFBYQkVjMkl6cmNmanVBY3drSDNyMngxQmRONHFQcFZrYjVhYXdkeGVqaHZLSkhWNFZBRDFWZERpYzN4emNwYkxORUhaQzYxVEJ6Y3cvNjQw?x-oss-process=image/format,png