信封抽纸动画效果

可以用来做用户消息中心的Logo

SVG，信封

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

第三方库
作品简介 2090
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #bdf;
}
.env {
    border-radius: 10px;
}
.env__emails {
    cursor: pointer;
    fill: #eee;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
    transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}
.env__emails:hover {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}
[data-emails="0"] ~ .env .env__emails {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
.env__back {
    cursor: pointer;
    fill: #1c2f41;
}
.env__fold-left {
    fill: #2b4865;
}
.env__fold-right {
    fill: #2b4865;
}
.env__fold-top {
    fill: #357;
}
.env__fold-bottom {
    fill: #357;
}
.badge {
    position: absolute;
    right: -20px;
    top: 45px;
}
.badge::after {
    background-color: #d30;
    border-radius: 50%;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    color: #fff;
    content: attr(data-emails);
    display: block;
    font-size: 30px;
    line-height: 80px;
    height: 80px;
    width: 80px;
    text-align: center;
}
/* extra junk */

html,
body {
    height: 100%;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: sans-serif;
}
main {
    margin: auto;
    position: relative;
}

HTML

可以用来做用户消息中心的Logo

SVG，信封

编辑器支持Emmet

快捷键

可以用来做用户消息中心的Logo

SVG，信封

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：