[分享]css3折叠手机效果

CSS3的折叠效果在移动端显示非常流行。这种效果可以让手机上的菜单或者内容以更为简洁的方式展示，让用户更加便捷的查看信息。接下来，我们就来学习一下如何使用CSS3折叠手机效果。html { heigh...

CSS3的折叠效果在移动端显示非常流行。这种效果可以让手机上的菜单或者内容以更为简洁的方式展示，让用户更加便捷的查看信息。接下来，我们就来学习一下如何使用CSS3折叠手机效果。

html {
    height: 100%;
}

body {
    height: 100%;
}

a {
    text-decoration: none;
}

.collapsible {
    background-color: #777;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.content {
    padding: 0 10px;
    overflow: hidden;
    background-color: #f1f1f1;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.active + .content {
    max-height: 500px;
}

@media screen and (max-width: 500px) {
    .content {
        padding: 0 5px;
    }
} 

在上面的代码段中，我们定义了一个`.collapsible`的类作为可折叠的元素，然后定义了一个`.content`的类作为内容的容器。当用户点击`.collapsible`元素时，通过js来添加和移除`.active`类，来展开或者收起`.content`元素。

通过上面的代码片段，我们可以看到CSS3折叠手机效果的实现还是非常简单的。我们只需要定义好相应的类，然后通过CSS来控制元素的显示和隐藏即可。如果你还没有尝试过这种效果，不妨在你的网站或应用上尝试一下，就可以提供更好的用户体验了。