HTML5 可配置原质化设计菜单按钮

汉堡菜单到指示箭头转换动画。 Configurable animated Material Design Menu Button。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.material--burger {
    cursor: pointer;
    padding: 12.5px;
    position: relative;
    width: 50px;
    height: 50px;
}
.material--burger:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #456;
    -webkit-animation: material-menu-background 300ms ease-in-out forwards;
    animation: material-menu-background 300ms ease-in-out forwards;
}
.material--burger span {
    top: 50%;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-name: material-menu;
    animation-name: material-menu;
}
.material--burger span,
.material--burger span:before,
.material--burger span:after {
    width: 25px;
    background-color: #fff;
    height: 3px;
    position: absolute;
    z-index: 525;
    -webkit-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}
.material--burger span:before,
.material--burger span:after {
    content: '';
    display: block;
}
.material--burger span:before {
    top: 300%;
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-animation-name: material-menu-before;
    animation-name: material-menu-before;
}
.material--burger span:after {
    bottom: 300%;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-animation-name: material-menu-after;
    animation-name: material-menu-after;
}
.material--burger.material--arrow:after {
    -webkit-animation: material-arrow-background 300ms ease-in-out forwards;
    animation: material-arrow-background 300ms ease-in-out forwards;
}
.material--burger.material--arrow span,
.material--burger.material--arrow span:before,
.material--burger.material--arrow span:after {
    -webkit-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    background-color: #456;
}
.material--burger.material--arrow span {
    -webkit-animation-name: material-arrow;
    animation-name: material-arrow;
}
.material--burger.material--arrow span:before {
    -webkit-animation-name: material-arrow-before;
    animation-name: material-arrow-before;
}
.material--burger.material--arrow span:after {
    -webkit-animation-name: material-arrow-after;
    animation-name: material-arrow-after;
}
@-webkit-keyframes material-arrow-background {
    100% {
        -webkit-transform: rotate(180deg) scale(0);
        transform: rotate(180deg) scale(0);
    }
}
@keyframes material-arrow-background {
    100% {
        -webkit-transform: rotate(180deg) scale(0);
        transform: rotate(180deg) scale(0);
    }
}
@-webkit-keyframes material-menu-background {
    0% {
        -webkit-transform: rotate(180deg) scale(0);
        transform: rotate(180deg) scale(0);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
@keyframes material-menu-background {
    0% {
        -webkit-transform: rotate(180deg) scale(0);
        transform: rotate(180deg) scale(0);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
@-webkit-keyframes material-arrow {
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes material-arrow {
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@-webkit-keyframes material-arrow-before {
    100% {
        top: 0;
        -webkit-transform: rotate(-40deg) scaleX(0.7);
        transform: rotate(-40deg) scaleX(0.7);
    }
}
@keyframes material-arrow-before {
    100% {
        top: 0;
        -webkit-transform: rotate(-40deg) scaleX(0.7);
        transform: rotate(-40deg) scaleX(0.7);
    }
}
@-webkit-keyframes material-arrow-after {
    100% {
        bottom: 0;
        -webkit-transform: rotate(40deg) scaleX(0.7);
        transform: rotate(40deg) scaleX(0.7);
    }
}
@keyframes material-arrow-after {
    100% {
        bottom: 0;
        -webkit-transform: rotate(40deg) scaleX(0.7);
        transform: rotate(40deg) scaleX(0.7);
    }
}
@-webkit-keyframes material-menu {
    0% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes material-menu {
    0% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes material-menu-before {
    0% {
        top: 0;
        -webkit-transform: rotate(-40deg) scaleX(0.7);
        transform: rotate(-40deg) scaleX(0.7);
    }
    100% {
        top: 300%;
        -webkit-transform: rotate(0) scaleX(1);
        transform: rotate(0) scaleX(1);
    }
}
@keyframes material-menu-before {
    0% {
        top: 0;
        -webkit-transform: rotate(-40deg) scaleX(0.7);
        transform: rotate(-40deg) scaleX(0.7);
    }
    100% {
        top: 300%;
        -webkit-transform: rotate(0) scaleX(1);
        transform: rotate(0) scaleX(1);
    }
}
@-webkit-keyframes material-menu-after {
    0% {
        bottom: 0;
        -webkit-transform: rotate(40deg) scaleX(0.7);
        transform: rotate(40deg) scaleX(0.7);
    }
    100% {
        bottom: 300%;
        -webkit-transform: rotate(0) scaleX(1);
        transform: rotate(0) scaleX(1);
    }
}
@keyframes material-menu-after {
    0% {
        bottom: 0;
        -webkit-transform: rotate(40deg) scaleX(0.7);
        transform: rotate(40deg) scaleX(0.7);
    }
    100% {
        bottom: 300%;
        -webkit-transform: rotate(0) scaleX(1);
        transform: rotate(0) scaleX(1);
    }
}
.material--burger {
    margin: 90px auto;
}
h1 {
    text-align: center;
    color: #456;
    font-family: "Lato", sans-serif;
    font-size: 118px;
}
h1 span {
    display: block;
    font-weight: normal;
    font-size: 28px;
}

HTML

汉堡菜单到指示箭头转换动画。 Configurable animated Material Design Menu Button。

编辑器支持Emmet

快捷键

汉堡菜单到指示箭头转换动画。 Configurable animated Material Design Menu Button。

Katex.js HTML5 数学公式可视化

HTML5 粒子随音乐而律动的乐曲可视化动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：