CSS懸停效果

SS懸停效果,鼠標移上去的時候，中間出現(xiàn)一條切線，然后消失。將內(nèi)容區(qū)分成左右兩邊，效果如下：

代碼：

html：

css：

前一篇文章Axure：PC端常見圖片展位懸停效果（一）介紹過鼠標懸停時圖片放大的效果。本篇我們繼續(xù)嘗試使用用axure，實現(xiàn)以下效果：懸停時邊框突出（或增加陰影）

再重新看一下我們要實現(xiàn)的效果：

優(yōu)酷視頻列表 – 懸停時有陰影

當當網(wǎng)商品列表 – 懸停時連線變化

所需要元件：圖片元件 * 1；

涉及交互事件（用例）：無；

涉及動作：無；

涉及動畫：無；

關(guān)鍵設(shè)置：（元件的）交互樣式。

寫在前面 – 元件的“交互樣式”

我們在文章 Axure：巧用交互樣式實現(xiàn)多tab切換效果中使用過元件的“交互樣式”。

目前，axure支持大部分的基本元件的“交互樣式”設(shè)置。

右鍵元件，即可在菜單中找到“交互樣式”入口。

目前，可以設(shè)置元件常見的4個狀態(tài)的交互樣式：

鼠標懸停；
鼠標按下；
選中；
禁用。

以下進入制作過程 —— 其實非常簡單！

懸停時突出邊框

拖入一個圖片（元件）；
右鍵圖片菜單選擇“交互樣式”，進入交互樣式設(shè)置；
（默認的）在“鼠標懸停”tab下做以下設(shè)置。

a、（勾選）線段顏色 —— 樣例中使用的是0099FFF；

b、（勾選）線寬 —— 樣例中使用的是3號線。

實際練習中應(yīng)該根據(jù)實際情況自行設(shè)置相應(yīng)屬性及值。設(shè)置好之后效果就出來了，如下圖：

懸停時增加陰影

（勾選）外部陰影 —— 樣例中的設(shè)置是，x、y軸偏移值都為0，模糊值為10，顏色為默認值。

如下圖所示：

實際練習中應(yīng)該根據(jù)想要的效果自行設(shè)置相應(yīng)屬性及值。

設(shè)置好之后效果就出來了，如下圖：

注意：該效果在預(yù)覽時，會有一個小情況 —— 第一次圖片懸停時可能會閃動縮放一下。仔細查找著相應(yīng)設(shè)置，并未發(fā)現(xiàn)出錯的地方，可能是axure生機的html文件，或者瀏覽器渲染的問題，知道即可，不必過于糾結(jié)。（當然，若哪位大俠知道這個原因，也請告之一下，不甚感謝）

寫在最后

日常練習時，一些相對常見簡單的交互，基本都可以在“交互設(shè)置”中體現(xiàn)。

我們本次只了嘗試了兩個效果，通過“交互設(shè)置”的設(shè)置界面，我們可以看到有很多的設(shè)置（效果），可以依次都嘗試一下，等到實際需要時選擇最合適的設(shè)置。

家好，今天給大家介紹一款， css3實現(xiàn)的鼠標懸停圖片響應(yīng)特效html頁面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

一共實現(xiàn)了6種特效（圖2-圖7）

圖2

圖3

圖4

圖5

圖6

圖7

源碼完整，需要的朋友可以下載學(xué)習（圖8）

圖8

本源碼編碼：10174，需要的朋友，點擊下面的鏈接后，搜索10174，即可獲取。

就愛UI - 分享UI設(shè)計的點點滴滴

在線咨詢

上一篇：網(wǎng)站頁面之動態(tài)，偽靜態(tài)，靜態(tài)
下一篇：一篇文章帶你了解CSS3圓角知識

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商