css两个图片移动

CSS中有许多有趣的动画效果，今天我们来学习两个图片移动的效果。

首先，我们需要将两张图片放在可视区域内。我们可以使用绝对定位将图片固定在页面上。

img {
  position: absolute;
}

接下来，我们将第一张图片向右移动，第二张图片向左移动。这可以通过设置left属性来实现。我们可以设置一个定时器来改变两张图片的位置，以达到运动的效果。代码如下：

var img1 = document.querySelector('#img1');
var img2 = document.querySelector('#img2');
var left1 = 0;
var left2 = 0;
setInterval(function() {
  left1 += 1;
  left2 -= 1;
  img1.style.left = left1 + 'px';
  img2.style.left = left2 + 'px';
},10);

这样就可以实现两张图片向相反方向移动了。如果想让图片回到原来的位置，我们可以在移动到一定距离后，将left属性设置为0。代码如下：

var img1 = document.querySelector('#img1');
var img2 = document.querySelector('#img2');
var left1 = 0;
var left2 = 0;
setInterval(function() {
  left1 += 1;
  left2 -= 1;
  img1.style.left = left1 + 'px';
  img2.style.left = left2 + 'px';
  
  if (left1 === 100) {
    img1.style.left = 0;
    left1 = 0;
  }
  
  if (left2 === -100) {
    img2.style.left = 0;
    left2 = 0;
  }
},10);

这样两张图片就可以一直来回移动了。