整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
下是一個(gè)簡(jiǎn)單的示例代碼，用于實(shí)現(xiàn)鼠標(biāo)停留時(shí)圖片放大的效果：
/* 圖片樣式 */
.image {
width: 420px;
height: 280px;
transition: transform 0.2s;
}
/* 鼠標(biāo)停留時(shí)的樣式 */
.image:hover {
transform: scale(2.5);
}
在上述代碼中，定義了一個(gè) .image 類，用于設(shè)置圖片的初始樣式，包括寬度和高度。通過(guò) transition 屬性設(shè)置了圖片在變形時(shí)的過(guò)渡效果，時(shí)長(zhǎng)為 0.2 秒。
然后，當(dāng)鼠標(biāo)懸停在圖片上時(shí)， .image:hover 類會(huì)將圖片進(jìn)行放大，通過(guò) transform: scale(2.5); 實(shí)現(xiàn)。其中， scale(2.5) 表示將圖片放大 2.5 倍。你可以根據(jù)實(shí)際需求調(diào)整放大的比例和過(guò)渡效果的時(shí)間。
圖1
圖2
圖2
前一篇文章Axure：PC端常見(jiàn)圖片展位懸停效果（一）介紹過(guò)鼠標(biāo)懸停時(shí)圖片放大的效果。本篇我們繼續(xù)嘗試使用用axure，實(shí)現(xiàn)以下效果：懸停時(shí)邊框突出（或增加陰影）
再重新看一下我們要實(shí)現(xiàn)的效果：
優(yōu)酷視頻列表 – 懸停時(shí)有陰影
當(dāng)當(dāng)網(wǎng)商品列表 – 懸停時(shí)連線變化
所需要元件：圖片元件 * 1；
涉及交互事件（用例）：無(wú)；
涉及動(dòng)作：無(wú)；
涉及動(dòng)畫(huà)：無(wú)；
關(guān)鍵設(shè)置：（元件的）交互樣式。
我們?cè)谖恼?Axure：巧用交互樣式實(shí)現(xiàn)多tab切換效果中使用過(guò)元件的“交互樣式”。
目前，axure支持大部分的基本元件的“交互樣式”設(shè)置。
右鍵元件，即可在菜單中找到“交互樣式”入口。
目前，可以設(shè)置元件常見(jiàn)的4個(gè)狀態(tài)的交互樣式：
以下進(jìn)入制作過(guò)程 —— 其實(shí)非常簡(jiǎn)單！
a、（勾選）線段顏色 —— 樣例中使用的是0099FFF；
b、（勾選）線寬 —— 樣例中使用的是3號(hào)線。
實(shí)際練習(xí)中應(yīng)該根據(jù)實(shí)際情況自行設(shè)置相應(yīng)屬性及值。設(shè)置好之后效果就出來(lái)了，如下圖：
（勾選）外部陰影 —— 樣例中的設(shè)置是，x、y軸偏移值都為0，模糊值為10，顏色為默認(rèn)值。
如下圖所示：
實(shí)際練習(xí)中應(yīng)該根據(jù)想要的效果自行設(shè)置相應(yīng)屬性及值。
設(shè)置好之后效果就出來(lái)了，如下圖：
注意：該效果在預(yù)覽時(shí)，會(huì)有一個(gè)小情況 —— 第一次圖片懸停時(shí)可能會(huì)閃動(dòng)縮放一下。仔細(xì)查找著相應(yīng)設(shè)置，并未發(fā)現(xiàn)出錯(cuò)的地方，可能是axure生機(jī)的html文件，或者瀏覽器渲染的問(wèn)題，知道即可，不必過(guò)于糾結(jié)。（當(dāng)然，若哪位大俠知道這個(gè)原因，也請(qǐng)告之一下，不甚感謝）
日常練習(xí)時(shí)，一些相對(duì)常見(jiàn)簡(jiǎn)單的交互，基本都可以在“交互設(shè)置”中體現(xiàn)。
我們本次只了嘗試了兩個(gè)效果，通過(guò)“交互設(shè)置”的設(shè)置界面，我們可以看到有很多的設(shè)置（效果），可以依次都嘗試一下，等到實(shí)際需要時(shí)選擇最合適的設(shè)置。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
