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

今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图：

实现的代码。

html代码：

复制代码 代码如下:

 

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