新竹網頁設計

2023-07-04 00:46:26troyea2

網頁設計 利用CSS完成 游標移至圖片殊效

留言 0 收藏 0 推薦 0

2.png

網頁設計
在利用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"
複製代碼

效果以下圖

 

網頁設計

本文引用自:

上一篇：網頁設計 用 jQuery 來做圖片偽浮水印

你可能感興趣的文章

◎洪雅純_017

■潘文良著作集＞勵益品＞魚雁千里共今緣＞洪雅純_017 ▼給阿文‥017　　(89)2000.05.22.一 △給雅純－017　　(89)2000.06.01.四　

2024-05-20

秒飛印度吃！台北印度料理，印度主廚印式香料炒飯、奶油咖哩雞，清真認證餐廳│菜單

台北印度料理_亞瑟蘭印度餐廳─清真認證餐廳，秒飛印度吃咖哩！印度主廚自製印度香料超道地，老饕推薦必點噴香「印式蝦仁香料炒飯」

17 小時前

2024/05/20

  傍晚收到乾姐的訊息 第一個反應是 我是跟天蠍座的小孩有仇是嗎？ 在家看個影片也莫名被坑   /   你們親阿

2024-05-20

【台東。成功鎮】成功花海/賞花聽海/台11線最美花海/新地點面積2公頃更繽紛的花卉

每回到花東，在台11線上，一定都會看到美麗的成功花海! 不過，2024年的成功花海換位置囉!! 原先位在台東縣成功鎮農會展售中心前方

11 小時前

【立院大混戰】誰才有理？

【立院大混戰】誰才有理？   一、【同理心看立院】    只要是民主國家，執政黨與在野黨的這類攻防，都會強調對自

2024-05-20