CSS3 手风琴样式的折叠动画

Animated folding，折叠展开今天的日程安排事项列表。

css3, fold

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 7958
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #4DD0E1;
}
.cards_wrapper {
    font-family: "Roboto", sans-serif;
}
.card {
    width: 400px;
    margin: 0 auto 5px;
    cursor: pointer;
}
.card .card_description {
    border-radius: 5px;
    height: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: border-radius 0.6s ease-in-out;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
.card .card_description .date,
.card .card_description .title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
}
.card .card_description .date {
    margin: 0 80px 0 20px;
}
.card.today .card_description {
    background-color: #ffb300;
}
.card.tomorrow .card_description {
    background-color: #EF6C00;
}
.card.unfolded .top {
    animation: unfold_top 0.6s ease-in-out;
}
.card.unfolded .bottom {
    animation: unfold_bottom 0.6s ease-in-out;
}
.card.unfolded .card_description {
    border-radius: 5px 5px 0 0;
}
.card.folded .top {
    animation: fold_top 0.6s forwards ease-in-out;
}
.card.folded .bottom {
    animation: fold_bottom 0.6s forwards ease-in-out;
}
.top,
.bottom {
    position: relative;
    overflow: hidden;
    height: 80px;
    background-color: #fff;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
.bottom {
    border-radius: 0 0 5px 5px;
}
.alarm_item {
    display: flex;
    align-items: center;
}
.alarm_item .time_block {
    margin-left: 20px;
}
.alarm_item .day_part {
    font-size: 10px;
    margin: 0 25px 0 5px;
    color: #798384;
}
.alarm_item .time {
    padding: 10px;
    border-radius: 3px;
    color: #fff;
    background-color: #03a9f4;
}
.alarm_item .alarm_item_description {
    color: #798384;
}
@keyframes fold_top {
    100% {
        transform-origin: top;
        transform: perspective(100px) rotateX(-10deg);
        height: 0;
    }
}
@keyframes fold_bottom {
    100% {
        transform-origin: bottom;
        transform: perspective(100px) rotateX(10deg);
        height: 0;
    }
}
@keyframes unfold_top {
    0% {
        transform-origin: top;
        height: 0;
        transform: perspective(100px) rotateX(-10deg);
    }
    100% {
        transform: perspective(100px) rotateX(0deg);
        height: 80px;
    }
}
@keyframes unfold_bottom {
    0% {
        transform-origin: bottom;
        height: 0;
        transform: perspective(100px) rotateX(10deg);
    }
    100% {
        transform: perspective(100px) rotateX(0deg);
        height: 80px;
    }
}

HTML

<div class="cards_wrapper">
    <div class="card unfolded today">
        <div class="card_description">
            <div class="date">05</div>
            <div class="title">TODAY</div>
        </div>
        <div class="alarm_item top">
            <div class="time_block">
                <div class="time">09:00</div>
            </div>
            <div class="day_part">AM</div>
            <div class="alarm_item_description">Yoga class</div>
        </div>
        <div class="alarm_item bottom">
            <div class="time_block">
                <div class="time">12:50</div>
            </div>
            <div class="day_part">PM</div>
            <div class="alarm_item_description">Lecture 101</div>
        </div>
    </div>
    <div class="card folded tomorrow">
        <div class="card_description">
            <div class="date">06</div>
            <div class="title">TOMORROW</div>
        </div>
        <div class="alarm_item top">
            <div class="time_block">
                <div class="time">06:00</div>
            </div>
            <div class="day_part">AM</div>
            <div class="alarm_item_description">Morning running</div>
        </div>
        <div class="alarm_item bottom">
            <div class="time_block">
                <div class="time">09:30</div>
            </div>
            <div class="day_part">PM</div>
            <div class="alarm_item_description">Romantic dinner</div>
        </div>
    </div>
</div>

Animated folding，折叠展开今天的日程安排事项列表。

css3, fold

编辑器支持Emmet

快捷键

Animated folding，折叠展开今天的日程安排事项列表。

css3, fold

CSS3折纸展开样式的菜单动画

CSS3 透镜扫描式的猫奔跑动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：