css怎么将图片往上移?

在css的内容中有 2D 效果,也就是图片移动的效果,下面本篇文章分享如何做出通过控制 2D效果实现动态图片上下移动(沿 Y 轴移动)和注意事项。

首先我们写一个页面的 html 架构,两个 div 存放相同的图片,以此 两个 div 作为对比,查看效果;

1.png

先写出两个 div 的样式,其实两个div都是一样了,为了方便对比,只是边框颜色不同(另外,如果想让 两个div 这样的块级元素在同一行,需要用 display:inli-block,让他们变为行内块元素);效果如 图二;

2.png

3.png

然后我们开始,通过 transform:translateY( px)控制上下移动,注意这里值是负的时,div 上向上移动 的;效果如图二;

4.png

5.png

如果是为了控制向下的话,就需要 transform:translate(px);这个是正值;Y轴的方向如图二所示;

7.png

6.png

然后我们将 d2 的控制上下的属性注释掉,写一个 .d2:hover 这个伪类属性,控制鼠标移上触发效果;

8.png

1.gif

但是上面的属性这样看着一顿一顿的,不够平滑;这时我们在 d2 ,中加上过渡属性 transition:0.1s linear;然后实现这个 图二的效果;

9.png

2.gif

更多web前端知识,请查阅 HTML中文网 !!

以上就是css怎么将图片往上移?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏