css：animate.css@4.1.1和wow.js实现网页动画效果

原创

彭世瑜 2022-01-12 13:54:47 ©著作权

文章标签 css css3 前端 ajax .net 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

需要注意的是animate.css 3.x版本和4.x版本的使用方法稍有不同
4.x版本增加了一个前缀animate__减少样式冲突

文档

wow.js: https://wowjs.uk/docs.html
animate.css: https://animate.style/

CDN

通过以下代码就能很容易实现一个加载动画

<!-- 引入样式 animate.css -->
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"
        rel="stylesheet">

<style>
.box {
  width: 300px;
  height: 300px;
  background-color: #eeeeee;
}
</style>


<!-- 必须加类名：animate__animated -->
<!-- 动画效果：animate__swing -->
<div class="box animate__animated animate__swing"></div>

如果元素不在第一屏幕，就不能看到动画效果，可以通过wow.js解决


<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"
        rel="stylesheet">
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #eeeeee;
      /* 让元素在下一屏幕显示 */
      margin-top: 1000px;
    }
  </style>

  <!-- 增加一个类名：wow -->
  <div class="box wow animate__animated animate__swing"></div>

  <!-- 引入并初始化 wow -->
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script>
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animate__animated',
      offset: 0,
      mobile: true,
      live: true
    });
    wow.init();
  </script>