[分享]css中如何让图片垂直移动

CSS是网页设计中非常重要的一部分，它可以帮助我们实现各种效果。在网页中，图片是一个常见的元素，如何让图片垂直移动？我们可以使用CSS来实现。img{ : absolute; top: 0; anim...

CSS是网页设计中非常重要的一部分，它可以帮助我们实现各种效果。在网页中，图片是一个常见的元素，如何让图片垂直移动？我们可以使用CSS来实现。

img{
    position: absolute;
    top: 0;
    animation: move-y 2s ease-in-out  infinite;
}

@keyframes move-y{
    0%{
        top: 0;
    }
    100%{
        top: 100px;
    }
} 

以上代码是如何让图片垂直移动的，下面我们逐个解释一下。

1、首先我们要选择图片元素，这里使用了img选择器。

2、然后我们将其定位到其容器中

position: absolute;
top: 0; 

3、接着我们定义了一个动画，名为"move-y"，2秒内循环播放，动画的过程是在元素的垂直方向上发生。

animation: move-y 2s ease-in-out  infinite; 

4、最后我们定义了“move-y”动画的两个关键帧，分别是0%和100%的状态，0%状态下图片的位置为顶部，100%状态下图片向下移动100px。

@keyframes move-y{
    0%{
        top: 0;
    }
    100%{
        top: 100px;
    }
} 

通过以上代码，我们就可以让图片在网页上垂直移动了。