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

2020-05-24 21:23:19易采站长站整理

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