SVG 菜单展开时的变形动画

SVG Menu Morph animation 点击右下角的“更多”按钮，弹出抖动变形的菜单栏。

SVG,变形

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

(function() {

function init() {
            var speed = 250,
                easing = mina.backout;

[].slice.call(document.querySelectorAll('.screen > a')).forEach(function(el) {
                var s = Snap(el.querySelector('svg')),
                    path = s.select('path'),
                    pathConfig = {
                        from: path.attr('d'),
                        to: el.getAttribute('data-path-hover'),
                        to2: el.getAttribute('data-path-hover2')
                    };

$('#more, #open').click(function() {
                    path.animate({
                        'path': pathConfig.to
                    }, 150, mina.easeIn);
                    $('#more').fadeOut("fast");
                    setTimeout(function() {
                        $('#menu-items').addClass('animate');
                    }, 100);
                    setTimeout(function() {
                        path.animate({
                            'path': pathConfig.to2
                        }, 230, mina.elastic);
                        $('#close').show();
                        $('.cx, .cy').addClass('s1');
                        setTimeout(function() {
                            $('.cx, .cy').addClass('s2');
                        }, 100);
                        setTimeout(function() {
                            $('.cx, .cy').addClass('s3');
                        }, 200);
                    }, 150);
                });
                $("#close").click(function() {
                    path.animate({
                        'path': pathConfig.from
                    }, speed, mina.easeout);
                    $('#menu-items').removeClass('animate').addClass('animate-back');
                    $('.cx, .cy').removeClass('s1 s2 s3');
                    $('#more').fadeIn(400);
                    setTimeout(function() {
                        $('#menu-items').removeClass('animate-back');
                        $('#close').hide();
                    }, 400);
                });

});
        }

init();

})();

});

编译

CSS

/*	Reset & General
---------------------------------------------------------------------- */

* {
    margin: 0px;
    padding: 0px;
}
body {
    background: #26272c;
    font-family: "Open Sans", sans-serif;
}
.screen {
    margin: 50px auto 120px;
    width: 480px;
    height: 8526px;
    position: relative;
    background: url("/uploads/160301/timeline.png") 0 0 no-repeat;
}
.screen a {
    width: 480px;
    height: 852px;
}
figure {
    position: relative;
    overflow: hidden;
    width: 480px;
    height: 852px;
}
svg {
    position: absolute;
    top: -1px;
    /* fixes rendering issue in FF */
    
    top: 0;
    left: 0;
}
path {
    fill: #fff;
}
#more {
    position: absolute;
    top: 796px;
    left: 417px;
    z-index: 2;
    cursor: pointer;
}
#menu-items {
    position: absolute;
    top: 506px;
    left: 51px;
    z-index: 2;
    width: 219px;
    opacity: 0;
}
#menu-items.animate {
    position: absolute;
    top: 529px;
    left: 57px;
    z-index: 2;
    width: 187px;
    opacity: 1;
    -webkit-transition: all 200ms elastic;
    -moz-transition: all 200ms elastic;
    -o-transition: all 200ms elastic;
    transition: all 200ms elastic;
}
#menu-items.animate-back {
    position: absolute;
    top: 545px;
    left: 96px;
    z-index: 2;
    width: 166px;
    opacity: 0;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out1;
}
#close {
    position: absolute;
    display: none;
    top: 786px;
    right: 28px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.cx,
.cy {
    background: #596b72;
    position: absolute;
    width: 0px;
    top: 15px;
    right: 15px;
    height: 2px;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
.cx.s1,
.cy.s1 {
    right: 0;
    width: 35px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cy.s2 {
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cy.s3 {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cx.s1 {
    right: 0;
    width: 35px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cx.s2 {
    -ms-transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.cx.s3 {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: all 100ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

HTML

</figure>
    </a>

SVG Menu Morph animation 点击右下角的“更多”按钮，弹出抖动变形的菜单栏。

SVG,变形

编辑器支持Emmet

快捷键

SVG Menu Morph animation 点击右下角的“更多”按钮，弹出抖动变形的菜单栏。

SVG,变形

CSS3 SVG带变形过渡动画的开关按钮

SVG 很棒的箭头变形下载按钮动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：