基于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;
}
相关推荐
-
svg动画之动态描边效果
1.首先先做一个简单的线一点一点画出来的效果,主要使用svg中的"strokeDasharray"."strokeDashoffset"属性,通过css3中的transtion改变strokeDashoffset来实现动画. 注:path中的数据通过在ai中划线后存储为svg格式就可以拿到: 效果图: 代码如下: <svg class="move_line1" xmlns="http://www.w3.org/2000/svg&q
-
推荐10 款 SVG 动画的 JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级. Vivus Vivus 是一个能动画js类库,它能够给SVG图像显示出被画出来的过程.Vivus是没有其他类库依赖的(比如jQuery).你仅仅需要在页面中加入这个.js文件,然后传入需要被用来动画的SVG部分就行.同时通过指定一些配置,它能够在页面加载后直接显
-
SVG动画vivus.js库使用小结(实例代码)
SVG动画vivus.js库使用整理,具体实例代码如下所示: 使用方法如图: HTML例子代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta
-
SVG描边动画
效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nubia</title> <style> .nubia_logo{ position: absolute; opacity: 0; animation:fadeIn 2s ease-in forwards; -webki
-
基于jquery和svg实现超炫酷的动画特效
今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 实现的代码. html代码: 复制代码 代码如下: <div id="intro"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示 源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<
-
基于canvas实现超炫酷的流水灯效果
本文实例为大家分享了基于canvas实现超炫酷的流水灯效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于canvas超炫酷的流水灯效果</title> <style> *{ margin: 0; padding: 0; } canvas{ border: 1px solid red; wi
-
自己用python做的一款超炫酷音乐播放器
目录 前言 一.核心功能设计 UI设计排版布局 关键字音乐列表爬虫 音乐播放 附加功能 二.实现步骤 1. UI设计排版布局 2. 关键字音乐列表爬虫 3. 音乐播放 4. 附加功能 三.结束语 前言 晚上坐在电脑面前,想着一边撸代码,一边听音乐.搜了搜自己想听的歌,奈何好多歌曲都提示需要版权,无法播放! 没办法,想听歌还是得靠自己解决!今天就一起用python自制一款炫酷的音乐播放器吧~ 首先一起来看看最终实现的音乐播放器效果: 下面,我们开始介绍这个音乐播放器的制作过程. 一.核心功能设计
-
pyhthon绘制超炫酷的心形线星形线摆线
目录 摆线 外摆线和心脏线 内摆线与星形线 摆线 最简单的旋轮线就是摆线,指圆在直线上滚动时,圆周上某定点的轨迹. 设圆的半径为 r ,在x轴上滚动 x距离则意味着旋转了 x \ r 弧度,则其滚动所产生的摆线如下 r = 1 theta = np.arange(0,6.4,0.1) xCircle0 = np.cos(theta) yCircle0 = 1+np.sin(theta) fig = plt.figure(figsize=(15,4)) ax = fig.add_subplot
-
python绘制超炫酷动态Julia集示例
目录 前言 Mandelbrot集 无限缩放 Julia集 前言 此Julia非彼Julia,指的是对于某复数 c c c,使得迭代式 f ( z ) = z 2 + c f(z)=z^2+c f(z)=z2+c收敛的复数 z z z的集合.例如,当 c = 0 c=0 c=0时,那么其收敛区间为 z 2 < 1 z^2<1 z2<1的单位圆,对应的 c c c的Julia集便是 cos θ + i sin θ \cos\theta+i\sin\theta cosθ+isinθ.
-
JS实现页面炫酷的时钟特效示例
目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面. 特点就是炫酷,特效好,个人以心情愉快的感觉. 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉. 而且要获取到本地的时间的数据来实时更新它的变化. 二.想法设计/实现过程 秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,
-
JS实现超炫网页烟花动画效果的方法
本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <
-
jQuery实现分章节锚点“回到顶部”动画特效代码
本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js