基于jquery和svg实现超炫酷的动画特效

148 阅读 0 评论 98 点赞

我是靠谱客的博主知性奇异果，最近开发中收集的这篇文章主要介绍基于jquery和svg实现超炫酷的动画特效，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图：

实现的代码。

html代码：

复制代码代码如下:

 <div id="intro">

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

            version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="preserve"

            enable-background="new 0 0 308.8 152.1">

    <style>

        .tomatoLeft, .tomatoRight

        {

            fill: #D74022;

        }

        .bracketLeft, .bracketRight

        {

            fill: #4D4D4F;

        }

        .s2

        {

            fill: none;

            stroke-linecap: round;

            stroke-miterlimit: 10;

            stroke-width: 10;

            stroke: #FFF;

        }

        .tomatoLeaves

        {

            fill: #95D600;

        }

    </style>  

    <polygon points="238.3 152.1 225.6 139.3 283.4 81.5 225.6 23.8 238.3 11 308.8 81.5 " class="bracketRight"/>

    <polygon points="70.5 152.1 0 81.5 70.5 11 83.2 23.8 25.5 81.5 83.2 139.3 " class="bracketLeft"/>

    <g id="tomato">

      <path d="M139.7 17.2C106 18.3 78.6 45.7 77.5 79.4 76.9 98 84.2 114.9 96.3 127l91-91C175.2 23.9 158.3 16.6 139.7 17.2z" class="tomatoLeft"/>

      <path d="M122.3 127c12.1 12.1 29 19.4 47.6 18.8 33.7-1.1 61.1-28.5 62.2-62.2 0.6-18.6-6.7-35.5-18.8-47.6L122.3 127z" class="tomatoRight"/>

      <path d="M128.6 10.9c0-1.5 0-3 0.1-4.5 0.1-1.4 0.8-3.1 0.3-4.5 -0.8-2.5-4.3-2.6-5.5-0.3 -1.8 4.5-2.5 9.2-2.4 14 -6.7 3.2-17 2-24-0.2 5.1 4 11.2 6.7 18 7.5 -6.5 3-12.5 7-17.6 11.9 13.7-9.2 32.4-7.6 44.4 3.7 -1.3-4.6-3.5-8.7-6.4-12.3 7.3-5.2 16.3-7.4 25.1-6.3 -7-2.1-14.2-3-21.5-2.8 3.2-2.1 6-4.7 8.3-7.7 -6.3 3.5-11.4 4.1-18.5 4.4C128.8 13.2 128.7 11.6 128.6 10.9" class="tomatoLeaves"/>

    </g>

  </svg>

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

            version="1.1" id="ihtText" x="0" y="0" viewbox="0 0 148.2 23" enable-background="new 0 0 148.2 23"

            xml:space="preserve">

    <path fill="#D74022" d="M5.3 18.5V19H3.7h-1H1.1v-0.4c0-0.2 0.1-0.4 0.4-0.4 0 0 0.1 0 0.1 0 0.1 0 0.2 0 0.4 0 0.2 0 0.4 0 0.7 0V8.9c-0.2 0-0.4 0-0.5 0 -0.2 0-0.3 0-0.3 0 -0.1 0-0.1 0-0.2 0 0 0-0.1 0-0.1 0 -0.3 0-0.4-0.1-0.4-0.4V8h1.6 1v10.1c0.2 0 0.4 0 0.5 0 0.2 0 0.3 0 0.3 0 0.1 0 0.1 0 0.2 0 0 0 0.1 0 0.1 0C5.2 18.1 5.3 18.3 5.3 18.5zM2.3 4.6C2.3 4.5 2.2 4.4 2.2 4.2c0-0.1 0-0.3 0.1-0.4 0.1-0.1 0.1-0.2 0.2-0.3 0.1-0.1 0.2-0.2 0.3-0.2s0.2-0.1 0.4-0.1c0.1 0 0.3 0 0.4 0.1 0.1 0.1 0.2 0.1 0.3 0.2C4 3.6 4.1 3.7 4.1 3.9 4.2 4 4.2 4.1 4.2 4.2c0 0.1 0 0.3-0.1 0.4C4.1 4.7 4 4.8 3.9 4.9 3.8 5 3.7 5.1 3.6 5.1 3.5 5.2 3.3 5.2 3.2 5.2c-0.1 0-0.3 0-0.4-0.1S2.6 5 2.5 4.9 2.4 4.7 2.3 4.6z"/>

    <path fill="#D74022" d="M14.9 7.6c1.2 0 2.1 0.4 2.8 1.2 0.6 0.8 1 1.8 1 3.1v5.5c0.7 0.1 1.1 0.2 1.3 0.3 0.2 0 0.3 0.2 0.3 0.4V19h-3.5v-7.1c0-1.8-0.8-2.7-2.3-2.7 -1.1 0-2.1 0.5-3 1.6v6.6l0.3 0.1c0.6 0.1 0.9 0.2 1 0.2 0.2 0 0.3 0.2 0.3 0.4V19H7.8V18c0-0.2 0.1-0.4 0.3-0.4l1.3-0.3v-13C8.5 4.2 8 4.1 7.9 4.1c-0.2 0-0.3-0.2-0.3-0.4V2.7h3.8v6.6C12.4 8.2 13.6 7.6 14.9 7.6z"/>

    <path fill="#D74022" d="M32.2 18v0.9h-1.4 -0.2 -0.7c-0.2 0-0.3 0-0.5-0.1 -0.1-0.1-0.2-0.2-0.2-0.4l-0.2-1c-0.3 0.3-0.6 0.5-0.9 0.7 -0.3 0.2-0.6 0.4-0.9 0.5 -0.3 0.1-0.6 0.3-1 0.3 -0.3 0.1-0.7 0.1-1.2 0.1 -0.4 0-0.8-0.1-1.2-0.2s-0.7-0.3-1-0.5c-0.3-0.2-0.5-0.5-0.7-0.9C22 17.1 22 16.6 22 16.1c0-0.4 0.1-0.9 0.4-1.3 0.2-0.4 0.6-0.8 1.2-1.1s1.2-0.6 2.1-0.8c0.9-0.2 1.9-0.3 3.2-0.3v-0.9c0-0.9-0.2-1.5-0.6-2 -0.4-0.4-0.9-0.7-1.6-0.7 -0.5 0-0.9 0.1-1.2 0.2s-0.6 0.3-0.8 0.4c-0.2 0.2-0.4 0.3-0.6 0.4 -0.2 0.1-0.3 0.2-0.5 0.2 -0.1 0-0.2 0-0.3-0.1 -0.1-0.1-0.2-0.2-0.2-0.3l-0.4-0.6c0.6-0.6 1.3-1 2-1.3 0.7-0.3 1.5-0.4 2.4-0.4 0.6 0 1.2 0.1 1.7 0.3 0.5 0.2 0.9 0.5 1.2 0.9 0.3 0.4 0.6 0.8 0.7 1.3 0.2 0.5 0.3 1.1 0.3 1.7v5.6c0.3 0.1 0.9 0.2 1.1 0.2C32 17.6 32.2 17.8 32.2 18zM28.8 13.9c-0.9 0-1.7 0.1-2.3 0.2 -0.6 0.1-1.1 0.3-1.5 0.4 -0.4 0.2-0.7 0.4-0.9 0.7s-0.3 0.5-0.3 0.8c0 0.3 0 0.5 0.1 0.8s0.2 0.4 0.4 0.5c0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.5 0.1 0.7 0.1 0.3 0 0.7 0 0.9-0.1 0.3-0.1 0.6-0.2 0.8-0.3 0.3-0.1 0.5-0.3 0.7-0.5 0.2-0.2 0.5-0.4 0.7-0.6V13.9z"/>

    <path fill="#D74022" d="M35.5 18.4c-0.5-0.5-0.7-1.2-0.7-2.1V9.4h-1.3c-0.1 0-0.2 0-0.3-0.1S33 9.2 33 9V8.2L34.8 8l0.5-3.4c0-0.1 0.1-0.2 0.1-0.3s0.2-0.1 0.3-0.1h1V8h3.2v1.4h-3.2v6.7c0 0.5 0.1 0.8 0.3 1 0.2 0.2 0.5 0.3 0.9 0.3 0.2 0 0.4 0 0.5-0.1 0.2-0.1 0.3-0.1 0.4-0.2 0.1-0.1 0.2-0.1 0.3-0.2s0.1-0.1 0.2-0.1c0.1 0 0.2 0.1 0.3 0.2l0.6 0.9c-0.3 0.3-0.7 0.6-1.2 0.7 -0.5 0.2-1 0.3-1.5 0.3C36.6 19.1 35.9 18.9 35.5 18.4z"/>

    <path fill="#D74022" d="M48.4 8c0.6 0.2 1.1 0.5 1.5 1s0.7 0.9 1 1.6c0.2 0.6 0.3 1.3 0.3 2.1 0 0.3 0 0.5-0.1 0.6 -0.1 0.1-0.2 0.2-0.4 0.2h-7.4c0 0.7 0.1 1.3 0.3 1.8 0.2 0.5 0.4 1 0.7 1.3 0.3 0.3 0.7 0.6 1.1 0.8 0.4 0.2 0.9 0.3 1.4 0.3 0.5 0 0.9-0.1 1.3-0.2 0.4-0.1 0.7-0.2 0.9-0.4 0.3-0.1 0.5-0.3 0.6-0.4 0.2-0.1 0.3-0.2 0.4-0.2 0.2 0 0.3 0.1 0.4 0.2l0.5 0.7c-0.2 0.3-0.5 0.5-0.9 0.8 -0.3 0.2-0.7 0.4-1.1 0.5 -0.4 0.1-0.8 0.2-1.2 0.3 -0.4 0.1-0.8 0.1-1.2 0.1 -0.8 0-1.5-0.1-2.1-0.4 -0.6-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1.1-1.1-1.9 -0.3-0.7-0.4-1.6-0.4-2.6 0-0.8 0.1-1.5 0.4-2.2s0.6-1.3 1-1.8 1-0.9 1.6-1.2c0.6-0.3 1.4-0.4 2.2-0.4C47.2 7.6 47.8 7.7 48.4 8zM44.4 9.9c-0.5 0.5-0.9 1.3-1 2.3h6.1c0-0.5-0.1-0.9-0.2-1.2 -0.1-0.4-0.3-0.7-0.6-1 -0.2-0.3-0.5-0.5-0.9-0.6s-0.7-0.2-1.2-0.2C45.7 9.1 44.9 9.3 44.4 9.9z"/>

    <path fill="#D74022" d="M55 18.3c-0.5-0.6-0.8-1.3-0.8-2.3V9.7h-1.1c-0.1 0-0.3 0-0.4-0.1s-0.2-0.2-0.2-0.4V8.1l1.8-0.3 0.6-3.1c0-0.1 0.1-0.3 0.2-0.3 0.1-0.1 0.2-0.1 0.4-0.1H57v3.6h3v1.9h-3v6.1c0 0.4 0.1 0.6 0.3 0.8 0.2 0.2 0.4 0.3 0.7 0.3 0.2 0 0.3 0 0.4-0.1s0.2-0.1 0.3-0.1c0.1 0 0.2-0.1 0.2-0.1 0.1 0 0.1-0.1 0.2-0.1 0.1 0 0.1 0 0.2 0.1 0.1 0 0.1 0.1 0.2 0.2l0.8 1.3c-0.4 0.3-0.9 0.6-1.4 0.7 -0.5 0.2-1 0.3-1.6 0.3C56.3 19.1 55.6 18.9 55 18.3z"/>

    <path fill="#D74022" d="M69 7.9c0.7 0.3 1.3 0.7 1.8 1.2 0.5 0.5 0.9 1.1 1.1 1.8s0.4 1.5 0.4 2.4c0 0.9-0.1 1.7-0.4 2.4s-0.6 1.3-1.1 1.8 -1.1 0.9-1.8 1.2 -1.5 0.4-2.3 0.4 -1.6-0.1-2.3-0.4 -1.3-0.7-1.8-1.2c-0.5-0.5-0.9-1.1-1.1-1.8s-0.4-1.5-0.4-2.4c0-0.9 0.1-1.7 0.4-2.4s0.6-1.3 1.1-1.8c0.5-0.5 1.1-0.9 1.8-1.2s1.5-0.4 2.3-0.4C67.6 7.5 68.3 7.6 69 7.9zM68.8 16.1c0.5-0.6 0.7-1.6 0.7-2.8 0-1.2-0.2-2.1-0.7-2.8s-1.1-1-2.1-1c-1 0-1.7 0.3-2.1 1 -0.5 0.6-0.7 1.6-0.7 2.8 0 1.2 0.2 2.1 0.7 2.8 0.5 0.6 1.2 1 2.1 1C67.7 17 68.3 16.7 68.8 16.1z"/>

    <path fill="#D74022" d="M92.7 17.7V19H91h-2.7v-7.2c0-0.7-0.2-1.3-0.5-1.6 -0.3-0.4-0.8-0.5-1.4-0.5 -0.3 0-0.5 0-0.8 0.1 -0.2 0.1-0.4 0.2-0.6 0.4s-0.3 0.4-0.4 0.7c-0.1 0.3-0.2 0.6-0.2 0.9v5c0.3 0 0.5 0.1 0.6 0.1 0.2 0 0.3 0 0.3 0.1 0.1 0 0.1 0 0.1 0 0.4 0.1 0.6 0.3 0.6 0.7V19h-1.7 -2.7v-7.2c0-0.8-0.2-1.3-0.5-1.6s-0.8-0.5-1.3-0.5c-0.4 0-0.8 0.1-1.1 0.3 -0.3 0.2-0.7 0.5-1 0.8v6.1c0.3 0 0.5 0.1 0.6 0.1s0.3 0 0.3 0.1c0.1 0 0.1 0 0.1 0 0.4 0.1 0.5 0.3 0.5 0.7V19h-1.7 -2.7 -1.7v-1.3c0-0.4 0.2-0.6 0.6-0.7 0 0 0.1 0 0.1 0 0.1 0 0.2 0 0.3-0.1 0.2 0 0.4-0.1 0.7-0.1V9.8c-0.3 0-0.5-0.1-0.7-0.1 -0.2 0-0.3 0-0.3-0.1 -0.1 0-0.1 0-0.1 0 -0.4-0.1-0.6-0.3-0.6-0.7V7.7h1.7l1.7 0c0.4 0 0.6 0.2 0.7 0.5L77.7 9c0.2-0.2 0.4-0.4 0.6-0.6s0.4-0.3 0.7-0.5c0.2-0.1 0.5-0.2 0.8-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.7 0 1.3 0.2 1.8 0.6s0.8 0.9 1 1.5c0.2-0.4 0.4-0.7 0.7-1C84.4 8.4 84.7 8.2 85 8c0.3-0.2 0.7-0.3 1-0.4 0.4-0.1 0.7-0.1 1.1-0.1 0.6 0 1.2 0.1 1.7 0.3C89.3 8 89.7 8.2 90 8.6c0.3 0.4 0.6 0.8 0.8 1.3 0.2 0.5 0.3 1.1 0.3 1.8v5c0.3 0 0.5 0.1 0.7 0.1 0.2 0 0.3 0 0.3 0.1s0.1 0 0.1 0C92.5 17 92.7 17.3 92.7 17.7z"/>

    <path fill="#D74022" d="M104.9 17.6v1.3h-1.4 -0.3 -0.9c-0.3 0-0.5 0-0.6-0.1 -0.1-0.1-0.3-0.2-0.3-0.5l-0.2-0.8c-0.3 0.3-0.6 0.5-0.8 0.7 -0.3 0.2-0.6 0.4-0.9 0.5 -0.3 0.1-0.6 0.2-0.9 0.3 -0.3 0.1-0.7 0.1-1.1 0.1 -0.5 0-0.9-0.1-1.3-0.2 -0.4-0.1-0.8-0.3-1-0.6 -0.3-0.3-0.5-0.6-0.7-1 -0.2-0.4-0.2-0.8-0.2-1.3 0-0.4 0.1-0.8 0.3-1.3 0.2-0.4 0.6-0.8 1.1-1.1s1.2-0.6 2.1-0.8 1.9-0.3 3.2-0.3v-0.7c0-0.8-0.2-1.3-0.5-1.7 -0.3-0.4-0.8-0.5-1.4-0.5 -0.4 0-0.8 0.1-1.1 0.2 -0.3 0.1-0.5 0.2-0.8 0.3 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.4 0.2-0.6 0.2 -0.2 0-0.3 0-0.5-0.1 -0.1-0.1-0.2-0.2-0.3-0.4l-0.5-0.9C96 8 97.5 7.4 99.4 7.4c0.7 0 1.2 0.1 1.8 0.3 0.5 0.2 1 0.5 1.3 0.9 0.4 0.4 0.6 0.8 0.8 1.4 0.2 0.5 0.3 1.1 0.3 1.8v5c0.2 0 0.4 0.1 0.6 0.1s0.2 0 0.2 0C104.7 17 104.9 17.3 104.9 17.6zM100.9 14.1c-0.8 0-1.5 0-2 0.2 -0.5 0.1-1 0.2-1.3 0.4S97.1 15 97 15.2s-0.2 0.4-0.2 0.7c0 0.5 0.1 0.8 0.4 1 0.3 0.2 0.7 0.3 1.1 0.3 0.3 0 0.5 0 0.8-0.1 0.2-0.1 0.5-0.1 0.7-0.2 0.2-0.1 0.4-0.2 0.6-0.4s0.4-0.3 0.6-0.5V14.1z"/>

    <path fill="#D74022" d="M108.1 18.3c-0.5-0.6-0.8-1.3-0.8-2.3V9.7h-1.1c-0.1 0-0.3 0-0.4-0.1s-0.2-0.2-0.2-0.4V8.1l1.8-0.3 0.6-3.1c0-0.1 0.1-0.3 0.2-0.3 0.1-0.1 0.2-0.1 0.4-0.1h1.4v3.6h3v1.9h-3v6.1c0 0.4 0.1 0.6 0.3 0.8 0.2 0.2 0.4 0.3 0.7 0.3 0.2 0 0.3 0 0.4-0.1s0.2-0.1 0.3-0.1c0.1 0 0.2-0.1 0.2-0.1 0.1 0 0.1-0.1 0.2-0.1 0.1 0 0.1 0 0.2 0.1 0.1 0 0.1 0.1 0.2 0.2l0.8 1.3c-0.4 0.3-0.9 0.6-1.4 0.7 -0.5 0.2-1 0.3-1.6 0.3C109.4 19.1 108.7 18.9 108.1 18.3z"/>

    <path fill="#D74022" d="M122.1 7.9c0.7 0.3 1.3 0.7 1.8 1.2 0.5 0.5 0.9 1.1 1.1 1.8s0.4 1.5 0.4 2.4c0 0.9-0.1 1.7-0.4 2.4s-0.6 1.3-1.1 1.8 -1.1 0.9-1.8 1.2 -1.5 0.4-2.3 0.4 -1.6-0.1-2.3-0.4 -1.3-0.7-1.8-1.2c-0.5-0.5-0.9-1.1-1.1-1.8s-0.4-1.5-0.4-2.4c0-0.9 0.1-1.7 0.4-2.4s0.6-1.3 1.1-1.8c0.5-0.5 1.1-0.9 1.8-1.2s1.5-0.4 2.3-0.4C120.7 7.5 121.4 7.6 122.1 7.9zM121.9 16.1c0.5-0.6 0.7-1.6 0.7-2.8 0-1.2-0.2-2.1-0.7-2.8s-1.1-1-2.1-1c-1 0-1.7 0.3-2.1 1 -0.5 0.6-0.7 1.6-0.7 2.8 0 1.2 0.2 2.1 0.7 2.8 0.5 0.6 1.2 1 2.1 1C120.8 17 121.5 16.7 121.9 16.1z"/>

    <path fill="#D74022" d="M134.3 7.8c0.6 0.2 1.1 0.6 1.5 1s0.8 1 1 1.6c0.2 0.6 0.4 1.4 0.4 2.2 0 0.2 0 0.4 0 0.5s-0.1 0.2-0.1 0.3 -0.1 0.1-0.2 0.2c-0.1 0-0.2 0-0.3 0h-7c0.1 1.2 0.4 2 0.9 2.6 0.5 0.5 1.3 0.8 2.2 0.8 0.4 0 0.8-0.1 1.1-0.2s0.6-0.2 0.8-0.3 0.4-0.2 0.6-0.3 0.4-0.2 0.5-0.2c0.1 0 0.2 0 0.3 0.1 0.1 0 0.2 0.1 0.2 0.2l0.8 1c-0.3 0.4-0.6 0.6-1 0.9s-0.8 0.4-1.2 0.6c-0.4 0.1-0.8 0.2-1.2 0.3 -0.4 0.1-0.8 0.1-1.2 0.1 -0.8 0-1.5-0.1-2.2-0.4 -0.7-0.3-1.3-0.6-1.8-1.2 -0.5-0.5-0.9-1.1-1.2-1.9s-0.4-1.6-0.4-2.6c0-0.8 0.1-1.5 0.4-2.2 0.2-0.7 0.6-1.3 1.1-1.8s1-0.9 1.7-1.2c0.7-0.3 1.4-0.4 2.3-0.4C133 7.5 133.7 7.6 134.3 7.8zM130.5 10.1c-0.4 0.4-0.7 1.1-0.9 1.9h5.1c0-0.4 0-0.7-0.1-1 -0.1-0.3-0.2-0.6-0.4-0.8s-0.4-0.4-0.7-0.6 -0.7-0.2-1.1-0.2C131.6 9.4 131 9.7 130.5 10.1z"/>

    <path fill="#D74022" d="M147 15.4c0 0.5-0.1 1-0.3 1.5 -0.2 0.5-0.5 0.9-0.9 1.2 -0.4 0.3-0.9 0.6-1.4 0.8 -0.6 0.2-1.2 0.3-1.9 0.3 -1.4 0-2.8-0.3-3.6-0.6v0 -1.1 -2.1h0.1 0.3 0.9c0.3 0 0.5 0.1 0.5 0.4 0 0.1 0.1 0.4 0.1 1.3 0.6 0.2 1.3 0.2 1.8 0.2 0.3 0 0.6 0 0.8-0.1 0.2-0.1 0.4-0.2 0.6-0.3 0.2-0.1 0.3-0.3 0.3-0.4 0.1-0.2 0.1-0.3 0.1-0.5 0-0.3-0.1-0.5-0.2-0.6 -0.2-0.2-0.4-0.3-0.6-0.4 -0.3-0.1-0.6-0.2-0.9-0.3 -0.3-0.1-0.7-0.2-1-0.3 -0.3-0.1-0.7-0.3-1-0.4 -0.3-0.2-0.6-0.4-0.9-0.6 -0.3-0.2-0.5-0.5-0.6-0.9 -0.2-0.4-0.2-0.8-0.2-1.3 0-0.5 0.1-0.9 0.3-1.3s0.5-0.8 0.8-1.1c0.4-0.3 0.8-0.6 1.3-0.7s1.1-0.3 1.8-0.3c1.1 0 1.7 0.1 3.3 0.6v0 3.2h-0.1 -0.3 -0.9c-0.3 0-0.5-0.1-0.5-0.4 0-0.1-0.1-0.4-0.1-1.2 -0.3-0.1-0.8-0.1-1.3-0.1 -0.5 0-1 0.1-1.3 0.3 -0.3 0.2-0.5 0.5-0.5 0.9 0 0.2 0.1 0.4 0.2 0.6 0.2 0.2 0.4 0.3 0.6 0.4 0.3 0.1 0.6 0.2 0.9 0.3 0.3 0.1 0.7 0.2 1 0.3 0.3 0.1 0.7 0.3 1 0.4s0.6 0.3 0.9 0.6c0.3 0.2 0.5 0.5 0.6 0.8C146.9 14.5 147 14.9 147 15.4z"/>

  </svg>

        <ul class="buttons">

            <li><a id="btnPlay" class="button" href="#">replay</a></li>

            <li><a id="btnSlowMo" class="button" href="#">slow motion</a></li>

            <li><a id="btnReverse" class="button" href="#">reverse</a></li>

        </ul>

    </div>

    <script src='jquery.js'></script>

    <script src='TweenMax.min.js'></script>

    <script>

        var tomato = $('#tomato'), bracketRight = $('.bracketRight'), bracketLeft = $('.bracketLeft'), tomatoLeft = $('.tomatoLeft'), tomatoRight = $('.tomatoRight'), tomatoLeaves = $('.tomatoLeaves'), letters = $('#ihtText path'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $('#btnReverse'), tl;

        tl = new TimelineMax();

        tl.set([tomatoLeft], { xPercent: 23.6 });

        tl.set([tomatoLeaves], { xPercent: 41 });

        tl.set([tomato], {

            xPercent: 2,

            rotation: 13,

            transformOrigin: 'center center'

        });

        tl.set(tomato, { yPercent: -200 });

        tl.set(bracketRight, { xPercent: 200 });

        tl.set(bracketLeft, { xPercent: -200 });

        tl.to([

    bracketRight,

    bracketLeft

], 0.3, {

    xPercent: 0,

    ease: Power4.easeOut

}, 0.5).to(tomato, 0.5, {

    yPercent: 0,

    ease: Bounce.easeOut

}).to(tomato, 0.2, {

    rotation: 0,

    xPercent: -4

}).to([

    tomatoLeft,

    tomatoLeaves

], 0.2, { xPercent: 0 }, 'split').to(tomato, 0.2, {

    rotation: 0,

    xPercent: 0

}, 'split').to(tomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');

        $btnPlay.click(function () {

            tl.timeScale(1).seek(0);

        });

        $btnSlowMo.click(function () {

            tl.timeScale(0.2).seek(0.5);

        });

        $btnReverse.click(function () {

            tl.timeScale(1).seek('end').reverse();

        });

        //@ sourceURL=pen.js

    </script>

css代码：

复制代码代码如下:

 #intro

        {

            height: 100vh;

            width: 50%;

            margin: 0 auto;

            overflow: hidden;

        }

        #intro #ihtLogo

        {

            position: absolute;

            top: 50%;

            left: 50%;

            height: 100%;

            width: 50%;

            transform: translate(-50%, -70%);

        }

        #intro #ihtText

        {

            width: 100%;

            position: absolute;

            top: 50%;

            width: 40%;

            left: 50%;

            transform: translate(-50%, 80%);

        }

        .buttons

        {

            position: absolute;

            bottom: 20px;

            left: 20px;

            list-style: none;

            margin: 0;

            padding: 0;

            right: 20px;

        }

        .button

        {

            float: left;

            margin-right: 10px;

            padding: 10px 15px;

            border: 1px #ebebeb solid;

            text-decoration: none;

            color: #222222;

        }