HTML5 原质化的菜单消隐动效

Material Design Menu Reveal Effect 本例演示如何使用clip-path（裁剪路径）方法来创建独特的菜单渐变动画。试着点击右下角的加号来显示/隐藏菜单项。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
body {
    background: #e3e3e3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    font-family: roboto;
    font-weight: 400;
    line-height: 1.5;
}
.mobile-screen {
    width: 412px;
    height: 642px;
    background-color: #fafafa;
    margin: auto;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
header {
    height: 200px;
    background-color: #3f51b5;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 30px;
    border-top: 30px solid #303f9f;
}
header h1 {
    margin: 0;
    font-weight: 300;
    font-size: 24px;
    color: white;
}
.main-content {
    padding: 30px;
}
.fab {
    width: 48px;
    height: 48px;
    background: #ff4081;
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    color: white;
    position: absolute;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    font-weight: 100;
    line-height: 1.3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.modal {
    position: absolute;
    right: 20px;
    background: white;
    bottom: 20px;
    border-radius: 5px;
    padding: 20px 0;
    opacity: 0.5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    -webkit-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-clip-path: circle(0% at 87% 87%);
    clip-path: circle(0 at 87% 87%);
}
.modal.slow {
    -webkit-transition: 3s ease-out;
    transition: 3s ease-out;
}
.modal.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-clip-path: circle(200% at 87% 87%);
    clip-path: circle(200% at 87% 87%);
}
.modal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.modal ul li {
    padding: 10px 25px;
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.modal ul li:hover {
    background: rgba(0, 0, 0, 0.1);
}

HTML

Material Design Menu Reveal Effect 本例演示如何使用clip-path（裁剪路径）方法来创建独特的菜单渐变动画。试着点击右下角的加号来显示/隐藏菜单项。

编辑器支持Emmet

快捷键

Material Design Menu Reveal Effect 本例演示如何使用clip-path（裁剪路径）方法来创建独特的菜单渐变动画。 试着点击右下角的加号来显示/隐藏菜单项。

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

HTML5 Canvas图片波浪粒子化动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Material Design Menu Reveal Effect 本例演示如何使用clip-path（裁剪路径）方法来创建独特的菜单渐变动画。试着点击右下角的加号来显示/隐藏菜单项。