特效描述：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>
