div css專(zhuān)業(yè)服務(wù)列表卡片懸停特效

使用方法：

1、head引入css文件

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

2、body引入HTML代碼

<div class="specialty">
	<div class="wrapper">
		<div class="support-title">
			<h1>專(zhuān)業(yè)服務(wù)</h1>
		</div>
		<div class="support-body">
			<ul class="specialty-slide">

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon0.svg') no-repeat"></i>
						<h1>上云遷移服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>上云遷移服務(wù)</h1>
							<p>提供專(zhuān)業(yè)的遷移方案和專(zhuān)屬遷移工具支持，保證客戶(hù)云業(yè)務(wù)平滑遷移，縮短整體業(yè)務(wù)云化周期，解除客戶(hù)顧慮，聚焦于業(yè)務(wù)發(fā)展。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon1.svg') no-repeat"></i>
						<h1>云上保障護(hù)航服務(wù)</h1>

					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云上保障護(hù)航服務(wù)</h1>
							<p>為您云上業(yè)務(wù)提供專(zhuān)屬保障護(hù)航服務(wù)。遵循“事前重預(yù)防，事中重保障，事后重總結(jié)”原則，協(xié)助客戶(hù)從容應(yīng)對(duì)業(yè)務(wù)高峰。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon2.svg') no-repeat"></i>
						<h1>可用性?xún)?yōu)化服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>可用性?xún)?yōu)化服務(wù)</h1>
							<p>基于您業(yè)務(wù)特點(diǎn)和對(duì)成本、性能和數(shù)據(jù)一致性的考慮，通過(guò)云服務(wù)資源來(lái)構(gòu)建云上業(yè)務(wù)系統(tǒng)的可靠性，以免出現(xiàn)單點(diǎn)中斷，降低故障幾率，構(gòu)建快速恢復(fù)能力。預(yù)防和面對(duì)突發(fā)問(wèn)題，保障業(yè)務(wù)應(yīng)用在復(fù)雜的環(huán)境下高效穩(wěn)定運(yùn)行。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon3.svg') no-repeat"></i>
						<h1>數(shù)據(jù)庫(kù)咨詢(xún)服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>數(shù)據(jù)庫(kù)咨詢(xún)服務(wù)</h1>
							<p>華為云數(shù)據(jù)庫(kù)專(zhuān)家團(tuán)隊(duì)為您數(shù)據(jù)庫(kù)業(yè)務(wù)的上云遷移、系統(tǒng)容量規(guī)劃、數(shù)據(jù)庫(kù)架構(gòu)設(shè)計(jì)與改造、系統(tǒng)性能調(diào)優(yōu)等提供專(zhuān)業(yè)的在線咨詢(xún)服務(wù)，數(shù)據(jù)庫(kù)疑難雜癥解決和數(shù)據(jù)庫(kù)系統(tǒng)保駕護(hù)航服務(wù)。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon4.svg') no-repeat"></i>
						<h1>安全專(zhuān)家服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>安全專(zhuān)家服務(wù)</h1>
							<p>華為云與第三方權(quán)威機(jī)構(gòu)一起為您提供的“專(zhuān)家式”安全服務(wù)，來(lái)預(yù)防、監(jiān)測(cè)、發(fā)現(xiàn)主機(jī)、站點(diǎn)及云上系統(tǒng)的安全風(fēng)險(xiǎn)，給出解決方案、整改建議及權(quán)威報(bào)告，并及時(shí)修復(fù)被攻擊系統(tǒng)，降低損失等。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon5.svg') no-repeat"></i>
						<h1>云化服務(wù)化架構(gòu)咨詢(xún)服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云化服務(wù)化架構(gòu)咨詢(xún)服務(wù)</h1>
							<p>提供最專(zhuān)業(yè)的指導(dǎo)、支持和協(xié)助和企業(yè)架構(gòu)咨詢(xún)、微服務(wù)設(shè)計(jì)咨詢(xún)，幫助您從業(yè)務(wù)、應(yīng)用、信息（數(shù)據(jù)）、技術(shù)架構(gòu)層面統(tǒng)一規(guī)劃設(shè)計(jì)業(yè)務(wù)系統(tǒng)，實(shí)現(xiàn)數(shù)字化轉(zhuǎn)型。</p>
						</a>
					</div>
				</li>

				<li>
					<a href="#" class="list">
						<i style="background:url('statics/images/support-service-icon6.svg') no-repeat"></i>
						<h1>云容災(zāi)咨詢(xún)服務(wù)</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云容災(zāi)咨詢(xún)服務(wù)</h1>
							<p>設(shè)計(jì)規(guī)劃您基于云業(yè)務(wù)的容災(zāi)，防患于未然。</p>
						</a>
					</div>
				</li>

				<li>
					<a class="list">
						<i style="background:url('statics/images/support-service-icon7.svg') no-repeat"></i>
						<h1>敬請(qǐng)期待</h1>
					</a>
					<div class="specialty-content">
						<a href="#">
							<h1>云上保障護(hù)航服務(wù)8</h1>
							<p>設(shè)計(jì)規(guī)劃您基于云業(yè)務(wù)的容災(zāi)，防患于未然。</p>
						</a>
					</div>
				</li>

			</ul>
		</div>
	</div>
</div>