今天给大家分享一款基于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”/>
