需要注意的是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>