鼠標懸停圖片動態旋轉擴大或縮小
鼠標懸停觸發結果，學過一些網頁根本的讀者應該知道，今天小編分享一個可以在鼠標懸停時動態扭轉圖片而且圖片還可以擴年夜或者縮小的事例；
東西/原料
- Sublime text 2
- 電腦
方式/步調
- 1
既然是在網頁上實現的結果，那么網頁的架構必然是要先完當作的，小編的架構就是兩個div，里面包含著五個圖片（引用圖片時記得路徑準確），頁面結果如圖二；
- 2
添加一下根基的 css 樣式，width 和 height 節制寬度和高度，margin 這個屬性節制 div 移動到頁面中心；
- 3
然后我們看一下 transform:scale()的結果，如圖二，可以看到施加這個屬性的圖片變年夜，變年夜的比例是 scale（） 括號中的數值節制的；
- 4
然后我們看一下 transform：rotate（）這個結果，施加這個屬性的可以扭轉，正值是順時針扭轉，負值是逆時針扭轉；
- 5
我們看一下兩個屬性一路用節制縮小的結果（ scale（0.1）有點小看不清，圖二不是0.1倍的結果）
- 6
之后就是動態的關頭屬性 transition 這個屬性，需要提前設置在選擇此中；然后結果就實現了（圖二無法做出動圖，所以大師遷就看看，樣式源碼是圖三）
注重事項
- 僅作分享；
- transition 和 transform 屬性是 H5的屬性
- 發表于 2018-04-20 00:00
- 閱讀 ( 1061 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章