悬停时卡片折叠展开显示详情信息

Card fold down effect with dynamic height

css3, card

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    width: 30%;
    min-width: 300px;
    height: 80vh;
    margin: 20vh auto 0;
    background: -webkit-linear-gradient(right, #FF512F, #DD2476);
    background: linear-gradient(to left, #FF512F, #DD2476);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
    color: #282828;
}
h1 {
    color: white;
}
.task {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-perspective: 800px;
    perspective: 800px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.abstract,
.details {
    width: 100%;
    padding: 15px 30px;
    position: relative;
    background: white;
}
.task:hover .abstract,
.task:hover .details {
    background: #fafafa;
}
.abstract {
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
}
.details {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .3s transform ease;
    transition: .3s transform ease;
}
.details:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: grey;
}
.task:hover .details {
    max-height: none;
    overflow: visible;
    visibility: visible;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.details__inner {
    padding: 15px 30px;
}

HTML

Card fold down effect with dynamic height

css3, card

编辑器支持Emmet

快捷键

Card fold down effect with dynamic height

css3, card

GSAP 原质化设计样本卡片展开和折叠动画

CSS3 带悬停信息提示框的水平时间线（紫红色调渐变背景）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：