[分享]css3手风琴菜单下拉展开带弹性动画

CSS3 手风琴菜单是一种在网页开发中广为使用的特效，它可以将一组内容呈现得美观又有层次感。而下拉菜单是另一项网页开发方面常用的特效，通过下拉展开的方式，可以为用户提供更多的功能选项。这篇文章将介绍一...

CSS3 手风琴菜单是一种在网页开发中广为使用的特效，它可以将一组内容呈现得美观又有层次感。而下拉菜单是另一项网页开发方面常用的特效，通过下拉展开的方式，可以为用户提供更多的功能选项。这篇文章将介绍一种同时具备手风琴菜单和下拉展开效果的 CSS3 特效，并添加了弹性动画，让用户的操作更具有流畅感。

/* 定义容器样式 */
.container {
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
}

/* 定义手风琴菜单样式 */
.accordion {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 定义子元素样式 */
.accordion-item {
    width: calc(33.33% - 10px);
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* 定义展开的内容样式 */
.accordion-item .content {
    height: 0;
    padding: 0 15px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* 定义展开后的样式 */
.accordion-item.active {
    border-color: #333;
}

.accordion-item.active .content {
    height: auto;
    padding: 15px;
}

/* 定义弹性动画 */
@keyframes bounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    75% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* 定义激活时的弹性动画 */
.accordion-item.active {
    animation: bounce 0.5s ease-in-out;
} 

代码中，我们首先定义了一个容器 .container，为我们的手风琴菜单提供了更好的布局和居中的效果。接着定义了 .accordion 类，它将子元素按照一定的规则排列。子元素的样式定义在 .accordion-item 中，包含了边框、圆角等样式，并添加了鼠标点击时触发展开的事件。.content 类则定义了子元素展开后的内部内容样式。当子元素激活时，我们给它添加了 .active 标识，同时给它添加了弹性动画效果，让用户使用更加流畅舒适。