wickedCSS3动画库演示特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

197 784 262



特效描述:wickedCSS3 动画库演示特效。一款基于wickedCSS3动画库制作24种不同的动画效果演示,WOW.JS结合使用效果更佳。

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="dist/wickedcss.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/materialize.css"/>

2. 引入JS

<script src="js/modernizr-2.8.3.min.js"></script>
<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>

3. HTML代码

	<div class="container">
		<!-- Animation image -->
          <!-- <div class="section"></div>
          <div class="section"></div>-->
          <div class="section"></div>
          <div class="section"></div> 
          <div class="container center-align">
            <div class="col s12">
                <div id="animationelement" class="floater"></div>
            </div>
          </div>
          <div class="section"></div>
          <div class="section"></div>
          <div class="container center-align">
             <div class="row">
              <div class="col s12 m3 l2">
                  <a href="#" id="floaterButton" class="waves-effect waves-light btn-large white blue-text" >floater</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="barrelRollButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'barrelRoll', 'clicked'])">barrelRoll</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="rollerRightButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rollerRight', 'clicked'])">rollerRight</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="rollerLeftButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rollerLeft', 'clicked'])">rollerLeft</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="heartbeatButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'heartbeat', 'clicked'])">heartbeat</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="pulseButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'pulse', 'clicked'])">pulse</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="rotationButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotation', 'clicked'])">rotation</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="sideToSideButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'sideToSide', 'clicked'])">sideToSide</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="zoomerButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'zoomer', 'clicked'])">zoomer</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="zoomerOutButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'zoomerOut', 'clicked'])">zoomerOut</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="spinnerButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'spinner', 'clicked'])">spinner</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="wiggleButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'wiggle', 'clicked'])">wiggle</a>
                  <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                  <a href="#" id="shakeButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'shake', 'clicked'])">shake</a>
                  <div class="section"></div>
              </div>
               <div class="col s12 m3 l2">
                  <a href="#" id="poundButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'pound', 'clicked'])">pound</a>
                  <div class="section"></div>
              </div>
               <div class="col s12 m3 l2">
                <a href="#" id="slideUpButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideUp', 'clicked'])">slideUp</a>
                <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                <a href="#" id="slideDownButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideDown', 'clicked'])">slideDown</a>
                <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                <a href="#" id="slideRightButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideRight', 'clicked'])">slideRight</a>
                <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                <a href="#" id="slideLeftButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideLeft', 'clicked'])">slideLeft</a>
                <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                <a href="#" id="fadeInButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'fadeIn', 'clicked'])">fadeIn</a>
                <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                <a href="#" id="fadeOutButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'fadeOut', 'clicked'])">fadeOut</a>
                <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                <a href="#" id="rotateInRightButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotateInRight', 'clicked'])">rotateInRight</a>
                <div class="section"></div>
              </div>
              <div class="col s12 m3 l2">
                <a href="#" id="rotateInLeftButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotateInLeft', 'clicked'])">rotateInLeft</a>
                <div class="section"></div>
              </div>
               <div class="col s12 m3 l2">
                <a href="#" id="rotateInButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotateIn', 'clicked'])">rotateIn</a>
                <div class="section"></div>
              </div>
               <div class="col s12 m3 l2">
                <a href="#" id="bounceInButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'bounceIn', 'clicked'])">bounceIn</a>
                <div class="section"></div>
              </div>
            </div>
          </div>
	</div>
	<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到