TShopping
標題:
利用CSS完成 游標移至圖片特效
[打印本頁]
作者:
woff
時間:
2016-5-20 00:57
標題:
利用CSS完成 游標移至圖片特效
在使用CSS的時候,用某些特效能讓網站更有活力,如果運用JQUERY又太過複雜
不過今天作者看到某網站的運用不錯,於是就利用CSS也做了
可以看到下圖,滑鼠未移置圖片範例
css1.png
(62.69 KB, 下載次數: 9)
下載附件
保存到相冊
2016-5-20 00:56 上傳
用CSS寫下列代碼
.chimga{
margin:10px;
width:100%;
height:100%;
box-sizing:border-box;
overflow:hidden;
display:block;
}
.chimga:hover img{
-moz-transform:scale(1.3) rotate(2deg);
-webkit-transform:scale(1.3) rotate(2deg);
-o-transform:scale(1.3) rotate(2deg);
-ms-transform:scale(1.3) rotate(2deg);
transform:scale(1.3) rotate(2deg);
}
複製代碼
在到圖片連結加入class
class="chimga"
複製代碼
結果如下圖
css2.png
(99.6 KB, 下載次數: 6)
下載附件
保存到相冊
2016-5-20 00:56 上傳
文章出處:
NETYEA
新竹網頁設計,新竹網頁,RWD網頁設計,竹北網頁設計
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2