首頁  >  文章  >  web前端  >  基於jquery和svg實現超酷的動畫特效_jquery

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

WBOY
WBOY原創
2016-05-16 16:28:021700瀏覽

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

實作的程式碼。

html代碼:

複製程式碼 程式碼如下:

 

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"
            啟用背景=「新0 0 308.8 152.1」>
   
        .tomatoLeft, .tomatoRight
        {
            填入:#D74022;
        }
        .bracketLeft, .bracketRight
        {
            填入:#4D4D4F;
        }
        .s2
        {
            填入:無;
            筆畫線帽:圓形;
            行程斜接限制:10;
            筆畫寬度:10;
            中風:#FFF;
        }
        .番茄葉
        {
            填入:#95D600;
        }
    款式> 
   
   
     

>
   

 
" 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 =「新0 0 148.2 23」
            xml:space="保留">






   
   
   
   
 
       
   

   
   
   
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;
        }
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:jQuery on方法傳遞參數範例_jquery下一篇:jQuery on方法傳遞參數範例_jquery

相關文章

看更多