上海網(wǎng)站建設(shè)?上海網(wǎng)站設(shè)計(jì)（m.nj33.cn）

目前最受歡迎的課程之一是如何做一個(gè)網(wǎng)站，它走過從構(gòu)建到建立一個(gè)完整產(chǎn)品組合網(wǎng)站的過程。然而，即使完成了課程，學(xué)習(xí)也才剛剛開始。成千上萬(wàn)的學(xué)生自己定制了案例項(xiàng)目，展示家人一切事情和他們喜愛的動(dòng)物的照片。

上海網(wǎng)站建設(shè)教他們?nèi)绾谓⒁粋€(gè)基本的網(wǎng)站，但是有許多加強(qiáng)功能可以被添加。例如，如何添加CSS懸停效果到圖像庫(kù)中的照片。

一個(gè)簡(jiǎn)單的網(wǎng)站

頁(yè)面響應(yīng)，并設(shè)有一個(gè)有五個(gè)組合件的畫廊。畫廊本身有一個(gè)無(wú)序列表，每個(gè)列表項(xiàng)包含有嵌套的圖像內(nèi)部鏈接。就其本身而言，是相當(dāng)不錯(cuò)的，但添加一個(gè)漂亮的懸停效果則更為有趣。請(qǐng)記住，懸停狀態(tài)一般不會(huì)在移動(dòng)設(shè)備上工作，但它不能有害其添加為桌面用戶，只要改進(jìn)，就不是一個(gè)基本網(wǎng)站的功能。

添加懸停效果

上海網(wǎng)站建設(shè)教你這種效果是通過將一些簡(jiǎn)單的CSS創(chuàng)建。如果你已經(jīng)有一個(gè)預(yù)先存在的網(wǎng)站，修改選擇，你自定義標(biāo)記此代碼的工作。以下的代碼，快速分解它是如何工作的：

#gallery li {

perspective: 250px;

}

#gallery a img {

transition: 100ms;

transform: translateZ(0px);

box-shadow: 0px 0px 0px rgba(0,0,0,0);

}

#gallery a img:hover {

transform: translateZ(25px) rotate(3deg);

box-shadow: 0px 0px 10px rgba(0,0,0,0.8);

}

每個(gè)列表項(xiàng)具有視角特性。默認(rèn)情況下，消失點(diǎn)的三維效應(yīng)是在所選擇的元件的中心，所以在這種情況下，每個(gè)列表項(xiàng)將是一個(gè)獨(dú)立的三維環(huán)境。如果立體屬性被代替施加到一些父元素在DOM樹中較高時(shí)，圖像會(huì)代替向外移動(dòng)遠(yuǎn)離頁(yè)的中心。這可能是一個(gè)理想的效果，這取決于你的目標(biāo)。

畫廊圖片都有100毫秒的過渡。這意味著，如果任何有關(guān)的畫廊圖像變化（適用于懸停等造型），他們應(yīng)該制作動(dòng)畫到新的狀態(tài)在指定的時(shí)間段。默認(rèn)情況下，沒有??變換也沒有的box-shadow。

在懸停狀態(tài)的畫廊圖像，一個(gè)翻譯上的Z軸沿有輕微的旋轉(zhuǎn)應(yīng)用。這是一個(gè)工整的作用，對(duì)自身的，但加入的圖像下方的方塊陰影有助于銷售的圖像來(lái)剝離頁(yè)面的效果。在這種情況下，陰影的不透明度將動(dòng)畫與陰影的模糊半徑，給人的陰影變得越來(lái)越模糊的進(jìn)一步遠(yuǎn)離它從頁(yè)面移動(dòng)的效果。