基于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"
            enable-background="new 0 0 308.8 152.1">
     
   
   
   
     
     
     
   
 
       
            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">
   
   
   
   
   
   
   
   
   
   
   
   
   
 
       

           
• replay

           
• slow motion

           
• reverse

       

   

   
   
    <script><br /> var tomato = $('#tomato'), bracketRight = $('.bracketRight'), bracketLeft = $('.bracketLeft'), tomatoLeft = $('.tomatoLeft'), tomatoRight = $('.tomatoRight'), tomatoLeaves = $('.tomatoLeaves'), letters = $('#ihtText path'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $('#btnReverse'), tl;<br /> tl = new TimelineMax();<br /> tl.set([tomatoLeft], { xPercent: 23.6 });<br /> tl.set([tomatoLeaves], { xPercent: 41 });<br /> tl.set([tomato], {<br /> xPercent: 2,<br /> rotation: 13,<br /> transformOrigin: 'center center'<br /> });<br /> tl.set(tomato, { yPercent: -200 });<br /> tl.set(bracketRight, { xPercent: 200 });<br /> tl.set(bracketLeft, { xPercent: -200 });<br /> tl.to([<br /> bracketRight,<br /> bracketLeft<br /> ], 0.3, {<br /> xPercent: 0,<br /> ease: Power4.easeOut<br /> }, 0.5).to(tomato, 0.5, {<br /> yPercent: 0,<br /> ease: Bounce.easeOut<br /> }).to(tomato, 0.2, {<br /> rotation: 0,<br /> xPercent: -4<br /> }).to([<br /> tomatoLeft,<br /> tomatoLeaves<br /> ], 0.2, { xPercent: 0 }, 'split').to(tomato, 0.2, {<br /> rotation: 0,<br /> xPercent: 0<br /> }, 'split').to(tomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');<br /> $btnPlay.click(function () {<br /> tl.timeScale(1).seek(0);<br /> });<br /> $btnSlowMo.click(function () {<br /> tl.timeScale(0.2).seek(0.5);<br /> });<br /> $btnReverse.click(function () {<br /> tl.timeScale(1).seek('end').reverse();<br /> });<br /> //@ sourceURL=pen.js<br /> </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;
        }