网站制作公司武汉合肥全网推广
【css酷炫效果】纯CSS实现手风琴折叠效果
- 缘
- 创作背景
- html结构
- css样式
- 完整代码
- 效果图
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492015
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
<div class="accordion"><div class="accordion-item"><input type="checkbox" id="item1" class="accordion-checkbox"><label for="item1" class="accordion-header">手风琴卡，点击展开</label><div class="accordion-content"><p>哇唔，你好棒，点击收起</p></div></div> </div>css样式
body {font-family: Arial, sans-serif;margin: 0;padding: 0;box-sizing: border-box;
}.accordion {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f9f9f9;
}.accordion-item {margin-bottom: 10px;
}.accordion-checkbox {display: none;
}.accordion-header {display: block;padding: 10px;background-color: #007BFF;color: white;cursor: pointer;border-radius: 5px;user-select: none;
}.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;background-color: #fff;padding: 0 10px;border-radius: 5px;
}
/* styles.css - continued */
.accordion-checkbox:checked + .accordion-header + .accordion-content {max-height: 200px; /* 可以根据需要调整 */padding: 10px;
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head><title>页面特效</title>
<style type="text/css">
body {font-family: Arial, sans-serif;margin: 0;padding: 0;box-sizing: border-box;
}.accordion {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: #f9f9f9;
}.accordion-item {margin-bottom: 10px;
}.accordion-checkbox {display: none;
}.accordion-header {display: block;padding: 10px;background-color: #007BFF;color: white;cursor: pointer;border-radius: 5px;user-select: none;
}.accordion-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;background-color: #fff;padding: 0 10px;border-radius: 5px;
}
/* styles.css - continued */
.accordion-checkbox:checked + .accordion-header + .accordion-content {max-height: 200px; /* 可以根据需要调整 */padding: 10px;
}
</style></head>
<body><div class="accordion"><div class="accordion-item"><input type="checkbox" id="item1" class="accordion-checkbox"><label for="item1" class="accordion-header">手风琴卡，点击展开</label><div class="accordion-content"><p>哇唔，你好棒，点击收起</p></div></div> </div></body>
</html>效果图
