折叠展开效果是很常见的用户交互体验，而它的实现方法就是通过CSS来实现。在下面的代码示例中，我们将展示如何使用纯CSS来实现折叠展开效果。

.accordion {
border: 1px solid #ddd;
overflow: hidden;
}
.accordion-item {
border-top: 1px solid #ddd;
position: relative;
}
.accordion-item .toggle {
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
transform: rotate(-45deg);
}
.accordion-item .toggle:before,
.accordion-item .toggle:after {
content: "";
display: block;
width: 20px;
height: 2px;
background-color: #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.accordion-item .toggle:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.accordion-item .panel {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.accordion-item.active .toggle {
transform: rotate(135deg);
}
.accordion-item.active .panel {
max-height: 1000px;
transition: all 0.3s ease-in-out;
}

在这段代码中，我们定义了一个基本的accordion样式，然后为每个accordion-item添加了一个可点击的toggle元素。当用户点击toggle元素时，我们通过max-height属性和transition动画将panel展开或收起。最后，我们使用transform属性来实现toggle元素的旋转效果。

使用以上CSS代码，我们可以轻松地实现一个漂亮的折叠展开效果。