脸书风格基于照片的卡式菜单

Facebook Card Menu 卡片右下角有一个醒目的浮动菜单。

menu, card

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
}
body {
    background: #F3F3F3;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
}
.container {
    position: relative;
    margin-top: 40px;
}
.card {
    position: absolute;
    top: 0;
    left: 50%;
    background: #FFF;
    width: 450px;
    height: 550px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    overflow: hidden;
}
.card:nth-child(2) {
    z-index: -2;
    top: 32px;
    width: 418px;
}
.card:nth-child(1) {
    z-index: -1;
    top: 16px;
    width: 434px;
}
.card:nth-child(0) {
    z-index: 0;
    top: 0px;
    width: 450px;
}
.menu {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.menu.active ul li {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.menu.active ul li:nth-child(5) {
    -webkit-transition: opacity 0.3s 0.5s ease, color 0.3s ease, -webkit-transform 0.3s 0.5s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.5s ease, color 0.3s ease, -webkit-transform 0.3s 0.5s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.5s ease, transform 0.3s 0.5s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease;
    transition: opacity 0.3s 0.5s ease, transform 0.3s 0.5s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease, -webkit-transform 0.3s 0.5s cubic-bezier(0.28, 0.55, 0.385, 1.65);
}
.menu.active ul li:nth-child(4) {
    -webkit-transition: opacity 0.3s 0.6s ease, color 0.3s ease, -webkit-transform 0.3s 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.6s ease, color 0.3s ease, -webkit-transform 0.3s 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.6s ease, transform 0.3s 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease;
    transition: opacity 0.3s 0.6s ease, transform 0.3s 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease, -webkit-transform 0.3s 0.6s cubic-bezier(0.28, 0.55, 0.385, 1.65);
}
.menu.active ul li:nth-child(3) {
    -webkit-transition: opacity 0.3s 0.7s ease, color 0.3s ease, -webkit-transform 0.3s 0.7s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.7s ease, color 0.3s ease, -webkit-transform 0.3s 0.7s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.7s ease, transform 0.3s 0.7s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease;
    transition: opacity 0.3s 0.7s ease, transform 0.3s 0.7s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease, -webkit-transform 0.3s 0.7s cubic-bezier(0.28, 0.55, 0.385, 1.65);
}
.menu.active ul li:nth-child(2) {
    -webkit-transition: opacity 0.3s 0.8s ease, color 0.3s ease, -webkit-transform 0.3s 0.8s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.8s ease, color 0.3s ease, -webkit-transform 0.3s 0.8s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.8s ease, transform 0.3s 0.8s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease;
    transition: opacity 0.3s 0.8s ease, transform 0.3s 0.8s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease, -webkit-transform 0.3s 0.8s cubic-bezier(0.28, 0.55, 0.385, 1.65);
}
.menu.active ul li:nth-child(1) {
    -webkit-transition: opacity 0.3s 0.9s ease, color 0.3s ease, -webkit-transform 0.3s 0.9s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.9s ease, color 0.3s ease, -webkit-transform 0.3s 0.9s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: opacity 0.3s 0.9s ease, transform 0.3s 0.9s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease;
    transition: opacity 0.3s 0.9s ease, transform 0.3s 0.9s cubic-bezier(0.28, 0.55, 0.385, 1.65), color 0.3s ease, -webkit-transform 0.3s 0.9s cubic-bezier(0.28, 0.55, 0.385, 1.65);
}
.menu.active .overlay {
    -webkit-transform: scale(30, 30);
    transform: scale(30, 30);
}
.menu.active .fab {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2);
}
.menu.active .fab:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.menu.active .fab:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}
.menu.active .fa-facebook {
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.menu ul {
    position: absolute;
    right: 30px;
    bottom: 86px;
    text-align: right;
}
.menu ul li {
    margin: 30px 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1.2px;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    cursor: pointer;
}
.menu ul li:hover {
    color: rgba(255, 255, 255, 0.8);
}
.menu ul li .fa {
    width: 20px;
    margin: 0 0 0 20px;
    text-align: center;
}
.menu .overlay {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background: rgba(72, 98, 163, 0.9);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.menu .fab {
    position: absolute;
    right: 30px;
    bottom: 30px;
    background: #042F4E;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
    cursor: pointer;
}
.menu .fab:before,
.menu .fab:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #516F83;
    width: 20px;
    height: 2px;
    border-radius: 4px;
    -webkit-transform: translate(-50%, 5px);
    transform: translate(-50%, 5px);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.menu .fab:after {
    -webkit-transform: translate(-50%, -5px);
    transform: translate(-50%, -5px);
}
.menu .fa-facebook {
    position: absolute;
    top: 30px;
    left: 30px;
    color: #FFF;
    font-size: 24px;
    opacity: 0;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.post {
    position: relative;
    display: block;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}
.post .meta {
    z-index: 1;
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: rgba(255, 255, 255, 0.8);
}
.post .meta a {
    color: inherit;
    font-size: 12px;
    font-weight: 300;
    text-decoration: none;
}

HTML

<div class="container">
    <div class="card">
        <artcle style="background-image: url('https://helloandytran.files.wordpress.com/2016/01/dsc02343.jpg?w=583&amp;h=388&amp;crop=1')" class="post">
            <div class="meta"><a href="https://helloandytran.wordpress.com/2016/01/26/the-minimalist/">Image Source</a>
            </div>
        </artcle>
    </div>
    <div class="card">
        <artcle style="background-image: url('https://helloandytran.files.wordpress.com/2016/01/dsc02346.jpg?w=289&amp;h=192&amp;crop=1')" class="post">
            <div class="meta"><a href="https://helloandytran.wordpress.com/2016/01/26/the-minimalist/">Image Source</a>
            </div>
        </artcle>
    </div>
    <div class="card">
        <div class="menu">
            <div class="overlay"></div>
            <div class="fab"></div>
            <ul>
                <li><span>Check-Ins</span><span class="fa fa-map-marker"></span>
                </li>
                <li><span>Videos</span><span class="fa fa-film"></span>
                </li>
                <li><span>Music</span><span class="fa fa-music"></span>
                </li>
                <li><span>Photos</span><span class="fa fa-camera"></span>
                </li>
                <li><span>Messages</span><span class="fa fa-comment"></span>
                </li>
            </ul>
            <div class="fa fa-facebook"></div>
        </div>
        <artcle style="background-image: url('https://helloandytran.files.wordpress.com/2016/01/dsc02334.jpg?w=1760')" class="post">
            <div class="meta"><a href="https://helloandytran.wordpress.com/2016/01/26/the-minimalist/">Image Source</a>
            </div>
        </artcle>
    </div>
</div>

Facebook Card Menu 卡片右下角有一个醒目的浮动菜单。

menu, card

编辑器支持Emmet

快捷键

Facebook Card Menu 卡片右下角有一个醒目的浮动菜单。

menu, card

基于React.js实现的响应式文章卡片列表

一款HTML5小清新风格的购物卡片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：