jQuery創(chuàng)意的步驟服務(wù)列表懸停動畫特效

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/animate.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="items items-steps">
	<div class="center">
		<p class="main-title animated hidden" ani-name="fadeInRight" ani-delay="0s">8大標(biāo)準(zhǔn)環(huán)節(jié) 確保品質(zhì)服務(wù)</p>
		<div class="items-block">
			<div class="transition item animated hidden" ani-name="rollInLeft" ani-delay=".15s">
				<div class="img-block"> <img src="statics/images/items-steps-officer.png" alt="img"> </div>
				<p class="item-title">商務(wù)代表</p>
				<p class="item-p">售前咨詢</p>
				<p class="item-p">確認(rèn)需求</p>
				<p class="item-p">簽訂合同</p>
				<p class="item-p">聯(lián)絡(luò)溝通</p>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay=".3s">
				<div class="img-block"> <img src="statics/images/items-steps-designer.png" alt="img"> </div>
				<p class="item-title">視覺設(shè)計師</p>
				<p class="item-p">和您溝通細(xì)節(jié)</p>
				<p class="item-p">向您收集資料</p>
				<p class="item-p">提交設(shè)計樣稿</p>
				<p class="item-p">約5個工作日</p>
			</div>
			<div class="transition item animated hidden" ani-name="rollInLeft" ani-delay=".45s">
				<div class="img-block"> <img src="statics/images/items-steps-manager.png" alt="img"> </div>
				<p class="item-title">設(shè)計經(jīng)理</p>
				<p class="item-p">驗收設(shè)計稿</p>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay=".6s">
				<div class="img-block"> <img src="statics/images/items-steps-front.png" alt="img"> </div>
				<p class="item-title">前端工程師</p>
				<p class="item-p">制作頁面</p>
				<p class="item-p">開發(fā)功能</p>
				<p class="item-p">實現(xiàn)效果</p>
				<p class="item-p">10-15個工作日</p>
			</div>
			<div class="transition item item-col2 animated hidden" ani-name="rollInLeft1" ani-delay=".75s">
				<div class="img-block"> <img src="statics/images/items-steps-engineer.png" alt="img"> </div>
				<p class="item-title">質(zhì)檢工程師</p>
				<div class="flex-row">
					<div class="item-block">
						<p class="item-p">客戶需求核對</p>
						<p class="item-p">功能測試</p>
						<p class="item-p">展示效果驗證</p>
						<p class="item-p">網(wǎng)站性能測試</p>
					</div>
					<div class="item-block">
						<p class="item-p">合規(guī)性檢查</p>
						<p class="item-p">技術(shù)規(guī)范檢查</p>
						<p class="item-p">第三方業(yè)務(wù)驗證</p>
						<p class="item-p">3-5個工作日</p>
					</div>
				</div>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay=".9s">
				<div class="img-block"> <img src="statics/images/items-steps-officer.png" alt="img"> </div>
				<p class="item-title">商務(wù)代表</p>
				<p class="item-p">請您驗收</p>
				<p class="item-p">轉(zhuǎn)運維部門</p>
				<p class="item-p">轉(zhuǎn)客服部門</p>
			</div>
			<div class="transition item animated hidden" ani-name="rollInLeft" ani-delay="1.05s">
				<div class="img-block"> <img src="statics/images/items-steps-engineer.png" alt="img"> </div>
				<p class="item-title">運維工程師</p>
				<p class="item-p">網(wǎng)站上線</p>
				<p class="item-p">網(wǎng)絡(luò)、服務(wù)器保障</p>
				<p class="item-p">平臺升級、故障排除</p>
				<p class="item-p">病毒、黑客防范</p>
			</div>
			<div class="transition item even animated hidden" ani-name="rollInLeft" ani-delay="1.2s">
				<div class="img-block"> <img src="statics/images/items-steps-cc.png" alt="img"> </div>
				<p class="item-title">客服專員</p>
				<p class="item-p">解答疑問</p>
				<p class="item-p">使用指導(dǎo)</p>
				<p class="item-p">友情提示</p>
				<p class="item-p">協(xié)助內(nèi)容維護(hù)</p>
			</div>
			<div class="steps-block">
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
				<div class="step"></div>
			</div>
		</div>
	</div>
</div>