利用CSS完成 游標移至圖片特效

woff

在使用CSS的時候，用某些特效能讓網站更有活力，如果運用JQUERY又太過複雜

不過今天作者看到某網站的運用不錯，於是就利用CSS也做了

可以看到下圖，滑鼠未移置圖片範例





用CSS寫下列代碼

1. .chimga{
   
2.     margin:10px;
   
3.     width:100%;
   
4.     height:100%;
   
5.     box-sizing:border-box;
   
6.     overflow:hidden;
   
7.     display:block;
   
8. }
   
9. .chimga:hover img{
   
10.     -moz-transform:scale(1.3) rotate(2deg);
    
11.     -webkit-transform:scale(1.3) rotate(2deg);
    
12.     -o-transform:scale(1.3) rotate(2deg);
    
13.     -ms-transform:scale(1.3) rotate(2deg);
    
14.     transform:scale(1.3) rotate(2deg);
    
15. }

複製代碼

在到圖片連結加入class

1. class="chimga"

複製代碼

結果如下圖


文章出處: NETYEA 新竹網頁設計,新竹網頁,RWD網頁設計,竹北網頁設計