Web工程师的情人节卡片

Web coder's Valentines Day Card 你是我的HTML的CSS：），这个爱情表白有技术含量。

css3, card, love

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
body {
    background: url(http://www.howie23.org/pics/seamless-wood-grain-texture.jpg);
    background-size: cover;
    font-family: 'Open Sans';
    font-size: 16px;
}
.bottom,
.paper {
    margin: 2rem auto;
}
.bottom {
    background-color: #A4231F;
    height: 650px;
    max-width: 450px;
    transform: rotate(-7.5deg);
    width: 100%;
}
.paper {
    background-color: #fff;
    box-shadow: -1px 3px 3px 3px #222;
    font-size: 4rem;
    height: 550px;
    max-width: 350px;
    line-height: 1;
    padding: 2.5rem 4rem;
    position: relative;
    text-transform: uppercase;
    transform: rotate(7.5deg);
    width: 100%;
    z-index: 10px;
}
.paper p {
    margin-top: 0;
}
.paper p:after {
    bottom: 50px;
    color: #CB262E;
    content: "\f004";
    font-family: fontAwesome;
    font-size: 2rem;
    position: absolute;
    right: 50px;
}
.highlight {
    color: #CB262E;
}
.highlight:last-child {
    display: block;
}

HTML

Web coder's Valentines Day Card 你是我的HTML的CSS：），这个爱情表白有技术含量。

css3, card, love

编辑器支持Emmet

快捷键

Web coder's Valentines Day Card 你是我的HTML的CSS：），这个爱情表白有技术含量。

css3, card, love

web程序员之间情人节爱心表白

使用-webkit-box-reflect实现的带倒影特效的图文卡片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：