当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(1) 评论(0)

简介

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

```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%来使其具有响应性。

```html
.morph-shape {
    position: absolute;
    width: 240px;
    height: 100%;
    top: 0;
    right: 0;
}
  
.morph-shape svg path {
    stroke: #5f656f;
    stroke-width: 5px;
}
```
##### JAVASCRIPT
通过Snap.svg我们可以讲svg从一种形状变为另一种形状：

```html
(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' ) );
  
})();
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果