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