基於jquery和svg實現超酷的動畫特效_jquery

今天跟大家分享一款以jquery和svg超炫的網頁動畫為基礎。這款動畫效果非常炫。下面還有重播、慢速、和反向動畫按鈕。效果非常漂亮。一起看下效果圖：

實作的程式碼。

html代碼：

複製程式碼 程式碼如下:

 

            version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="preserve"
            啟用背景=「新0 0 308.8 152.1」>
   
        .tomatoLeft, .tomatoRight
        {
            填入：#D74022；
        }
        .bracketLeft, .bracketRight
        {
            填入：#4D4D4F；
        }
        .s2
        {
            填入：無；
            筆畫線帽：圓形；
            行程斜接限制：10；
            筆畫寬度：10；
            中風：#FFF；
        }
        .番茄葉
        {
            填入：#95D600;
        }
    款式> 
   
   
     

>
   
 

            xml:space="保留">






   
   
   
   
 
       

           
• replay

           
• slow motion

           
• reverse

       

   

   
   
   
var tomato = $('#tomato'),bracketRight = $('.bracketRight'),bracketLeft = $('.bracketLeft'),tomatoLeft = $('.tomatoLeft'),tomatoRight = $('.tomatoRight') 、 tomatoLeaves = $('.tomatoLeaves')、字母= $('#ihtText 路徑')、$btnPlay = $('#btnPlay')、$btnSlowMo = $('#btnSlowMo')、$btnReverse = $(' #btnReverse'), tl;
        tl = new TimelineMax();
        tl.set([tomatoLeft], { xPercent: 23.6 });
        tl.set([tomatoLeaves], { xPercent: 41 });
        tl.set([番茄], {
            x百分比：2，
            旋轉：13，
            變換原點：'中心中心'
        });
        tl.set(番茄, { yPercent: -200 });
        tl.set(bracketRight, { xPercent: 200 });
        tl.set(bracketLeft, { xPercent: -200 });
        tl.to([
    括號右，
    括號左
], 0.3, {
    x百分比：0，
    緩和：Power4.easeOut
}, 0.5).to(番茄, 0.5, {
    y百分比：0，
    緩和：Bounce.easeOut
}).to(番茄, 0.2, {
    旋轉：0，
    x百分比：-4
}).to([
    番茄左，
    番茄葉
], 0.2, { xPercent: 0 }, '分割').to(番茄, 0.2, {
    旋轉：0，
    x百分比：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
    腳本>

css代碼：

複製程式碼程式碼如下：

 #簡介
        {
            高度：100vh；
            寬度：50%；
            邊距：0 自動；
            溢位：隱藏；
        }
        #intro #ihtLogo
        {
            位置：絕對；
            上方：50%；
            左：50%；
            高度：100%；
            寬度：50%；
            轉換：翻譯(-50%, -70%);
        }
        #簡介#ihtText
        {
            寬度：100%；
            位置：絕對；
            上方：50%；
            寬度：40%；
            左：50%；
            轉換：翻譯(-50%, 80%);
        }
        .按鈕
        {
            位置：絕對；
            底部：20px；
            左：20px；
            清單樣式：無；
            邊距：0；
            填入：0；
            右：20px；
        }
        .按鈕
        {
            浮動：左；
            右距：10px；
            內邊距：10px 15px；
            邊框：1px #ebebebsolid;
            文字裝飾：無；
            顏色：#2222222；
        }