wickedCSS动画库演示24种炫酷CSS3动画效果免费下载

wickedCSS动画库演示24种炫酷CSS3动画效果,有旋转翻转、淡出淡进、变大变小等动画特效,结合WOW.JS使用可以实现更佳的动画效果。

JS代码

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> 
<script src="js/materialize.js" type="text/javascript"></script> 
 <script src="js/wow.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     new WOW().init(); 
    </script> 
 
    <script type="text/javascript"> 
    /* 
    BUTTON FUNCTIONS 
    */ 
    $('#rotationButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("rotation"); 
        }); 
    }); 
 
    $('#sideToSideButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("sideToSide"); 
        }); 
    }); 
 
    $('#zoomerButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("zoomer"); 
        }); 
    }); 
 
     $('#zoomerOutButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("zoomerOut"); 
        }); 
    }); 
 
    $('#spinnerButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("spinner"); 
        }); 
    }); 
 
     $('#pulseButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("pulse"); 
        }); 
    }); 
 
     $('#shakeButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("shake"); 
        }); 
    }); 
 
     $('#barrelRollButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("barrelRoll"); 
        }); 
    }); 
 
      $('#floaterButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("floater"); 
        }); 
    }); 
 
      $('#wiggleButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("wiggle"); 
        }); 
    }); 
 
      $('#poundButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("pound"); 
        }); 
    }); 
 
    $('#rollerRightButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("rollerRight"); 
        }); 
    }); 
 
    $('#rollerLeftButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("rollerLeft"); 
        }); 
    }); 
 
    $('#heartbeatButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("heartbeat"); 
        }); 
    }); 
 
    $('#fadeInButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("fadeIn"); 
        }); 
    }); 
 
    $('#fadeOutButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("fadeOut"); 
        }); 
    }); 
    
    $('#slideUpButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();  
          $('#animationelement').addClass("slideUp"); 
        }); 
    }); 
 
    $('#slideDownButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();        
          $('#animationelement').addClass("slideDown"); 
        }); 
    });  
 
    $('#slideLeftButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();        
          $('#animationelement').addClass("slideLeft"); 
        }); 
    });    
 
    $('#slideRightButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();        
          $('#animationelement').addClass("slideRight"); 
        }); 
    });  
 
    $('#rotateInRightButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();        
          $('#animationelement').addClass("rotateInRight"); 
        }); 
    }); 
 
    $('#rotateInLeftButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();        
          $('#animationelement').addClass("rotateInLeft"); 
        }); 
    }); 
 
     $('#rotateInButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();        
          $('#animationelement').addClass("rotateIn"); 
        }); 
    }); 
 
     $('#bounceInButton').click(function() { 
      $(this).each(function(){ 
          $('#animationelement').removeClass();        
          $('#animationelement').addClass("bounceIn"); 
        }); 
    });       
 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录