HTML5各种svg元素炫酷弹性动画特效

PetitQ 导航菜单 2022-1-29 1.25K 0 0

这是一款极具创意的 html5 各种 svg 元素炫酷弹性动画特效。该 svg 特效共集成了 9 种效果，每种效果都是以弹性动画为基础，将各种 svg 元素制作为像弹簧一样具有弹性，效果非常震撼。

section

下面是侧边栏弹性动画的 demo 的 html 结构：

也想出现在这里？联系我们吧

```
<nav id="menu" class="menu">
```

    <button class="menu__handle"><span>Menu</span></button>

```
    <div class="menu__inner">
```
```
        <ul>
```

            <li><a href="#"><i class="fa fa-fw fa-home"></i><span>Home<span></a></li>

            <li><a href="#"><i class="fa fa-fw fa-heart"></i><span>Favs<span></a></li>

            <li><a href="#"><i class="fa fa-fw fa-folder"></i><span>Files<span></a></li>

            <li><a href="#"><i class="fa fa-fw fa-tachometer"></i><span>Stats<span></a></li>

```
        </ul>
```
```
    </div>
```

    <div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">

        <svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">

            <path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>

```
        </svg>
```
```
    </div>
```
```
</nav>
```

SVG 被插入到内部菜单中，我们使用两个 data attributes 来存储路径信息。

SVG 应该被放到菜单里面，并且保证在移动菜单两条边时有足够的空间使线条不被切断。注意：SVG 通过设置宽和高 100%来使其具有响应性。

```
.morph-shape {
```
```
    position: absolute;
```
```
    width: 240px;
```
```
    height: 100%;
```
```
    top: 0;
```
```
    right: 0;
```
```
}
```
```
 
```
```
.morph-shape svg path {
```
```
    stroke: #5f656f;
```
```
    stroke-width: 5px;
```
```
}
```

section

通过 Snap.svg 我们可以讲 svg 从一种形状变为另一种形状：

```
(function() {
```
```
 
```
```
    function SVGMenu( el, options ) {
```
```
        this.el = el;
```
```
        this.init();
```
```
    }
```
```
 
```

    SVGMenu.prototype.init = function() {

        this.trigger = this.el.querySelector( 'button.menu__handle' );

        this.shapeEl = this.el.querySelector( 'div.morph-shape' );

```
 
```

        var s = Snap( this.shapeEl.querySelector( 'svg' ) );

        this.pathEl = s.select( 'path' );

```
        this.paths = {
```

            reset : this.pathEl.attr( 'd' ),

            open : this.shapeEl.getAttribute( 'data-morph-open' ),

            close : this.shapeEl.getAttribute( 'data-morph-close' )

```
        };
```
```
 
```
```
        this.isOpen = false;
```
```
 
```
```
        this.initEvents();
```
```
    };
```
```
 
```

    SVGMenu.prototype.initEvents = function() {

        this.trigger.addEventListener( 'click', this.toggle.bind(this) );

```
    };
```
```
 
```

    SVGMenu.prototype.toggle = function() {

```
        var self = this;
```
```
 
```
```
        if( this.isOpen ) {
```

            classie.remove( self.el, 'menu--anim' );

            setTimeout( function() { classie.remove( self.el, 'menu--open' );   }, 250 );

```
        }
```
```
        else {
```

            classie.add( self.el, 'menu--anim' );

            setTimeout( function() { classie.add( self.el, 'menu--open' );  }, 250 );

```
        }
```

        this.pathEl.stop().animate( { 'path' : this.isOpen ? this.paths.close : this.paths.open }, 350, mina.easeout, function() {

            self.pathEl.stop().animate( { 'path' : self.paths.reset }, 800, mina.elastic );

```
        } );
```
```
 
```
```
        this.isOpen = !this.isOpen;
```
```
    };
```
```
 
```

    new SVGMenu( document.getElementById( 'menu' ) );

```
 
```
```
})();
```

HTML5 各种 svg 元素炫酷弹性动画特效

已有 312 人购买

永久更新：
演示数据：
提取码：lwfr

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

HTML5各种svg元素炫酷弹性动画特效

HTML5 各种 svg 元素炫酷弹性动画特效

相关文章

Bootstrap4 响应式多级导航菜单插件

CSS3 自定义汉堡菜单折叠下拉框菜单

滑动展开菜单按钮插件

发表回复取消回复

热销模板

导航菜单

HTML5 各种 svg 元素炫酷弹性动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复