animate.css是一個純CSS的動畫庫，目前有近百種的動畫樣式，使用了animate.css之後，你只需指定想要的動畫效果animate.css就會幫你完成，但是animate.css是在頁面載入時就執行，訪客還沒看到動畫就已經執行完畢，所以要搭配wow.js，便可等到頁面捲動到元素出現在可視區域時才執行動畫，就像本站的首頁一樣...

以下是animate.css的動畫效果清單，animate官網也提供了所有可用的動畫演示

	
	

		bounce
	
	

		flash
	
	

		pulse
	
	

		rubberBand
	
	

		shakeX
	
	

		shakeY
	
	

		headShake
	
	

		swing
	
	

		tada
	
	

		wobble
	
	

		jello
	
	

		heartBeat
	
	

		backInDown
	
	

		backInLeft
	
	

		backInRight
	
	

		backInUp
	
	

		backOutDown
	
	

		backOutLeft
	
	

		backOutRight
	
	

		backOutUp
	
	

		bounceIn
	
	

		bounceInDown
	
	

		bounceInLeft
	
	

		bounceInRight
	
	

		bounceInUp
	
	

		bounceOut
	
	

		bounceOutDown
	
	

		bounceOutLeft
	
	

		bounceOutRight
	
	

		bounceOutUp
	
	

		fadeIn
	
	

		fadeInDown
	
	

		fadeInDownBig
	
	

		fadeInLeft
	
	

		fadeInLeftBig
	
	

		fadeInRight
	
	

		fadeInRightBig
	
	

		fadeInUp
	
	

		fadeInUpBig
	
	

		fadeInTopLeft
	
	

		fadeInTopRight
	
	

		fadeInBottomLeft
	
	

		fadeInBottomRight
	
	

		fadeOut
	
	

		fadeOutDown
	
	

		fadeOutDownBig
	
	

		fadeOutLeft
	
	

		fadeOutLeftBig
	
	

		fadeOutRight
	
	

		fadeOutRightBig
	
	

		fadeOutUp
	
	

		fadeOutUpBig
	
	

		fadeOutTopLeft
	
	

		fadeOutTopRight
	
	

		fadeOutBottomRight
	
	

		fadeOutBottomLeft
	
	

		flip
	
	

		flipInX
	
	

		flipInY
	
	

		flipOutX
	
	

		flipOutY
	
	

		lightSpeedInRight
	
	

		lightSpeedInLeft
	
	

		lightSpeedOutRight
	
	

		lightSpeedOutLeft
	
	

		rotateIn
	
	

		rotateInDownLeft
	
	

		rotateInDownRight
	
	

		rotateInUpLeft
	
	

		rotateInUpRight
	
	

		rotateOut
	
	

		rotateOutDownLeft
	
	

		rotateOutDownRight
	
	

		rotateOutUpLeft
	
	

		rotateOutUpRight
	
	

		hinge
	
	

		jackInTheBox
	
	

		rollIn
	
	

		rollOut
	
	

		zoomIn
	
	

		zoomInDown
	
	

		zoomInLeft
	
	

		zoomInRight
	
	

		zoomInUp
	
	

		zoomOut
	
	

		zoomOutDown
	
	

		zoomOutLeft
	
	

		zoomOutRight
	
	

		zoomOutUp
	
	

		slideInDown
	
	

		slideInLeft
	
	

		slideInRight
	
	

		slideInUp
	
	

		slideOutDown
	
	

		slideOutLeft
	
	

		slideOutRight
	
	

		slideOutUp
	

<!-- 首先載入必要檔案(懶人包有附)並初始化 -->
<link href="css/animate.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
	new WOW().init();
</script>
<!-- 在要執行動畫的元素上指定動畫方式，如果要HTML元素出現可是範圍才執行動畫，請務必加上wow類 -->
<div class="col-md-6 wow fadeInRight">
		<div class="new_articles">
			<a href="article-387-1%E3%80%81ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BFDIY%E6%87%B6%E4%BA%BA%E5%8C%85%E5%85%8D%E8%B2%BB%E4%B8%8B%E8%BC%89.html" title="1、ECSHOP響應式模板DIY懶人包免費下載 2020-09-23" class="d-block">
				<div class="img_box fl" style="width:160px;height:100px;background-image: url(/images/upload/image/202009/20200923172515_69334.jpg);background-size: contain;"></div>
			</a>
			<div class="info">
				<div class="title text-truncate">
					<a href="article-387-1%E3%80%81ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BFDIY%E6%87%B6%E4%BA%BA%E5%8C%85%E5%85%8D%E8%B2%BB%E4%B8%8B%E8%BC%89.html" title="1、ECSHOP響應式模板DIY懶人包免費下載 2020-09-23" class="d-block">
						<i class="fas fa-pencil-ruler"></i> <span class="is_new"><em>NEW</em></span> 1、ECSHOP響應式模板DIY懶人包免費下載					</a>
				</div>
				<div class="text-truncate3">
					Bootstrap是一個不錯用的響應式前台CSS框架，加上他的JS可以執行許多Jquery的效果，Bootstrap也已經對不同平台設備做了相容性的處理，因此就算再有此類問題也只是少數了...
說是ECSHOP模板，其實套用到任何網站模板都一樣，只是布局排版因人而異，但基本上沒多大的難度可言，因為ECSHOP的版型檔案比較多，建議只針對需要的檔案做修改，沒用到的檔案先略過，這樣可以節省不少時間。...				</div>
			</div>
		</div>
	</div>

相關文章