close

哄騙CSS完成 游標移至圖片特效 網頁設計

網頁設計

網頁設計 

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

不外今天作者看到某網站的應用不錯，於是就使用CSS也做了

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

哄騙CSS完成 游標移至圖片特效 網頁設計哄騙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"
複製代碼

結果以下圖


本文引用自:
arrow
arrow
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 nalrenu7oe6l6 的頭像
    nalrenu7oe6l6

    中壢網頁設計

    nalrenu7oe6l6 發表在 痞客邦 留言(0) 人氣()