[分享]css中img上下移动

CSS是前端开发必不可少的重要技术，其中图片的展示和美化也是我们常见到的需求。那么如何实现图片上下移动呢？下面我们来介绍一下相关的CSS知识。首先，我们需要在HTML文件中加入图片，代码如下： 然后...

CSS是前端开发必不可少的重要技术，其中图片的展示和美化也是我们常见到的需求。那么如何实现图片上下移动呢？下面我们来介绍一下相关的CSS知识。

首先，我们需要在HTML文件中加入图片，代码如下：

 <img src="picture.jpg" alt="picture"> 

然后我们在CSS中定义这张图片的样式：

 img {
        position: relative; /*设为相对定位*/
        top: 20px; /*将图片向下移动20个像素*/
    } 

其中，position属性指定元素的定位方式为相对定位，top属性指定元素相对于其正常位置向下移动20个像素。这样我们就实现了图片的上下移动效果。

当然，我们也可以通过JS来实现图片的动态移动，代码如下：

 var img = document.getElementsByTagName('img')[0]; /*获取第一个img元素*/
    img.style.position = 'relative'; /*设为相对定位*/
    var top = 0;
    setInterval(function() {
        top += 5; /*每隔10毫秒向下移动5个像素*/
        img.style.top = top + 'px';
    }, 10); 

利用setInterval函数每隔10毫秒执行一次移动操作，top属性每次加5（也可根据需求自行调整），并通过style.top来实现元素位置的变化。通过JS实现图片的动态移动效果也是不错的选择。

总之，以上是关于CSS中图片上下移动的实现方法，希望能对大家有所帮助。