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