CSS3 简单的响应式无超文本卡片设计

Simple responsive hypertext-free card design 纯CSS实现的空元素响应式卡片，无HTML无JS。卡片标题和内容都使用伪类的content属性实现，没有使用HTML代码。

css3, card

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=PT+Serif);
html,
body {
    margin: 0;
}
html {
    height: 100vh;
    width: 100vw;
    background-color: #00bcd4;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: rgba(0, 0, 0, 0.8);
    font-size: 1em;
}
body {
    margin: auto;
    width: 60%;
    background-color: #fafafa;
    border: 2px solid white;
    border-radius: 2px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.1), 0 0 30px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-animation: bounceInDown 1s;
    animation: bounceInDown 1s;
}
body:before {
    display: block;
    content: 'simple responsive hypertext-free card design';
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 1em 0.75em 0.5em;
    border-bottom: 1px solid #f5f5f5;
    font-size: 1.2em;
    text-transform: uppercase;
}
body:after {
    display: block;
    font-family: 'PT Serif', sans-serif;
    content: 'Maecenas sed lorem diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare tusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. \A\A Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem ipsum lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. \A\A Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.';
    padding: 1em;
    font-size: 0.9rem;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
    -webkit-column-rule: 1px solid #f5f5f5;
    -moz-column-rule: 1px solid #f5f5f5;
    column-rule: 1px solid #f5f5f5;
    white-space: pre-wrap;
}
@media (max-width: 850px) {
    body:after {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
@media (max-width: 550px) {
    body {
        width: 95%;
    }
}
@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}

HTML

Simple responsive hypertext-free card design 纯CSS实现的空元素响应式卡片，无HTML无JS。卡片标题和内容都使用伪类的content属性实现，没有使用HTML代码。

css3, card

编辑器支持Emmet

快捷键

Simple responsive hypertext-free card design 纯CSS实现的空元素响应式卡片，无HTML无JS。卡片标题和内容都使用伪类的content属性实现，没有使用HTML代码。

css3, card

CSS3 简易的响应式表格模板

CSS3 响应式网格布局设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：