css控制圖片沿Y軸上下移動的注意事項
在css 的內容中有 2D 結果，也就是圖片移動的 結果，這里小編分享若何做出經由過程節制 2D結果實現動態圖片上下移動（沿 Y 軸移動）和注重事項；
東西/原料
- 電腦
- 英雄聯盟
方式/步調
- 1
起首我們 寫一個頁面的 hetml 架構，兩個 div 存放不異的圖片，以此 兩個 div 作為對比，查看結果；
- 2
先寫出兩個 div 的樣式，其實兩個div都是一樣了，為了便利對比，只是邊框顏色分歧（別的，若是想讓 兩個div 如許的塊級元素在統一行，需要用 display：inli-block，讓他們變為行內塊元素)；結果如 圖二；
- 3
然后我們起頭，經由過程 transform：translateY（ px）節制上下移動，注重這里值是負的時，div 上標的目的上移動 的；結果如圖二；
- 4
若是是為了節制標的目的下的話，就需要 transform:translate（px）;這個是正值；Y軸的偏向如圖二所示；
- 5
然后我們將 d2 的節制上下的屬性注釋失落，寫一個 .d2：hover 這個偽類屬性，節制鼠標移上觸發結果；
- 6
可是上面的屬性如許看著一頓一頓的，不敷光滑；這時我們在 d2 ，中加上過渡屬性 transition：0.1s linear；然后實現這個 圖二的結果；
注重事項
- 小我進修經驗僅作分享；
- 發表于 2018-05-27 00:00
- 閱讀 ( 1113 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章