24h購物| | PChome| 登入
2023-05-05 03:30:45| 人氣10| 回應0 | 上一篇 | 下一篇

行使CSS完成 游標移至圖片特效

推薦 0 收藏 0 轉貼0 訂閱站台

在利用CSS的時刻，用某些特效能讓網站更有活力，若是運用JQUERY又太過複雜

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

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

1.png



用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"
複製代碼
網站架設
成績以下圖

 

2.png

網站架設

本文引用自:

我要檢舉
台長： joanata3

您可能對以下文章有興趣

人氣(10) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 美食情報(食記、食譜、飲品) | 個人分類: NetYea |
此分類下一篇:解鎖右鍵 Chrome 免任何外掛，用書籤一秒消除，破解右鍵
此分類上一篇:網站架設 CSS 3佈景新屬性：background-siz

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文