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

今天给大家分享一款基于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">
   
        .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;
        }
     
   
   
   
     
     
     
   
 
                    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

       

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;
        }