炫酷CSS3动画库wickedCSS

当前位置:主页 > CSS3库 > CSS3动画 > 炫酷CSS3动画库wickedCSS
炫酷CSS3动画库wickedCSS
分享:

    插件介绍

    wickedCSS是一款效果非常炫酷的CSS3动画库。该CSS3动画库包含24种不同效果的CSS3动画,并且它可以和WOW.JS结合使用,在元素计入视口时产生炫酷动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2018-04-13
    阅读:
简要教程

wickedCSS是一款效果非常炫酷的CSS3动画库。该CSS3动画库包含24种不同效果的CSS3动画,并且它可以和WOW.JS结合使用,在元素计入视口时产生炫酷动画效果。

使用方法

在页面中引入wickedcss.css文件。

<link rel="stylesheet" href="path/to/wickedcss.css">
                
HTML结构

使用一个<div>作为容器,里面可以放置任何内容。然后在<div>上添加执行CSS3动画需要的class类即可。

<div class="barrelRoll"> 这里放置你的内容 </div>
                

class类可以放置在任何元素上,包括图片,例如:

<img src="images/mushroom.png" class="spinner"/>
                

wickedCSS CSS3动画库的内置class类有:

  • floater
  • barrelRoll
  • rollerRight
  • rollerLeft
  • heartbeat
  • pulse
  • rotation
  • sideToSide
  • zoomer
  • zoomerOut
  • spinner
  • wiggle
  • shake
  • pound
  • slideUp
  • slideDown
  • slideRight
  • slideLeft
  • fadeIn
  • fadeOut
  • rotateInRight
  • rotateInLeft
  • rotateIn
  • bounceIn
在页面滚动时执行动画

wickedCSS动画库可以和wow.js结合使用,用于在页面滚动元素进入视口时制作动画效果。

你需要引入jquery和wow.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/wow.min.js"></script>
                

HTML结构如下:

<div class="wow barrelRoll"> 放置你的内容 </div>
                

然后初始化wow.js插件。

new WOW().init();
                
在页面滚动到指定位置时执行动画

你也可以在页面滚动到指定位置时执行动画。例如下面的例子在元素滚动到距离页面顶部450像素的距离时执行动画。

<script>
      $(window).scroll(function() {
        $('#animatedElement').each(function(){
        var imagePos = $(this).offset().top;
    
        var topOfWindow = $(window).scrollTop();
          if (imagePos < topOfWindow+450) {
            $(this).addClass("barrelRoll");
          }
        });
      });
</script>
                

wickedCSS CSS3动画库的github地址地址为:https://github.com/kristofferandreasen/wickedCSS

网友评论