在利用CSS的時候,用某些殊效能讓網站更有活力,若是應用JQUERY又過分複雜
不外今天作者看到某網站的應用不錯,於是就操縱CSS也做了
可以看到下圖,滑鼠未移置圖片規範
![網頁設計 利用CSS完成 游標移至圖片殊效 網頁設計 利用CSS完成 游標移至圖片殊效](http://www.tshopping.com.tw/data/attachment/forum/201605/20/005636wi200m00jedr8r0e.png) ![網頁設計 利用CSS完成 游標移至圖片殊效 網頁設計 利用CSS完成 游標移至圖片殊效](https://pic.pimg.tw/netyea/1675482550-2265382069-g_n.png)
用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
後果如下圖 |
網頁設計![網頁設計 利用CSS完成 游標移至圖片殊效 網頁設計 利用CSS完成 游標移至圖片殊效](https://pic.pimg.tw/netyea/1675482550-2647452098-g_n.png)
網頁設計以下文章來自:
victorjod6q 發表在 痞客邦 留言(0) 人氣()