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
- 阅读 ( 1112 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章