css控制图片沿Y轴上下移动的注意事项

       在css 的内容中有 2D 结果，也就是图片移动的 结果，这里小编分享若何做出经由过程节制 2D结果实现动态图片上下移动（沿 Y 轴移动）和注重事项；

东西/原料

• 电脑
• 英雄联盟

方式/步调

1. 1

   起首我们 写一个页面的 hetml 架构，两个 div 存放不异的图片，以此 两个 div 作为对比，查看结果；

   
2. 2

   先写出两个 div 的样式，其实两个div都是一样了，为了便利对比，只是边框颜色分歧（别的，若是想让 两个div 如许的块级元素在统一行，需要用 display：inli-block，让他们变为行内块元素)；结果如 图二；

   
3. 3

   然后我们起头，经由过程 transform：translateY（  px）节制上下移动，注重这里值是负的时，div 上标的目的上移动 的；结果如图二；

   
4. 4

   若是是为了节制标的目的下的话，就需要 transform:translate（px）;这个是正值；Y轴的偏向如图二所示；

   
5. 5

   然后我们将 d2 的节制上下的属性注释失落，写一个 .d2：hover 这个伪类属性，节制鼠标移上触发结果；

   
6. 6

   可是上面的属性如许看着一顿一顿的，不敷光滑；这时我们在 d2 ，中加上过渡属性 transition：0.1s linear；然后实现这个 图二的结果；

   

注重事项

• 小我进修经验仅作分享；