wickedCSS动画库演示24种炫酷CSS3动画效果

来源:https://www.sucaihuo.com/js/3646.html 2018-04-25 18:38浏览(1508) 收藏

wickedCSS动画库演示24种炫酷CSS3动画效果,有旋转翻转、淡出淡进、变大变小等动画特效,结合WOW.JS使用可以实现更佳的动画效果。
wickedCSS动画库演示24种炫酷CSS3动画效果
分类:css3 > transform 难易:初级
查看演示 下载资源 下载积分: 20 积分

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
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2