javascript - 如何在 Css 或 Javascript 中为其他图像制作动画？

Question

<分区>

Answer 1

首先使用 position: absolute; 将两张图片放在彼此上方。使用背景图片，您可以这样做:

<div class="container">
  <div class="image1"></div>
  <div class="image2" id="image_resize"></div>
</div>

CSS:

.container {
  position: relative;
  width: 300px;
  height:200px;
}

.image1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://images.freeimages.com/images/previews/cf6/bird-1394216.jpg);
  background-repeat: no-repeat;
}

.image2 {
  position: absolute;
  height: 100%;
  background-image: url(http://images.freeimages.com/images/previews/4f3/apple-1322812.jpg);
  background-repeat: no-repeat;
}

要为第二张图片设置动画，最简单的方法是使用 jquerys animate。使用纯 JavaScript，您可以执行以下操作:

var percent = 0; // this will count from 0 to 100, defining the with in percent

/* with setinterval you can call a function periodically, in this example every 50 milliseconds */
var myInterval = window.setInterval(function() {
    /* find the image that should get resized by id */
    var img = document.getElementById('image_resize');

    /* set the with of the image */
    img.style.width = percent+"%";

    /* increment by 1 percent */
    percent ++;

    if(percent > 100) {
      /* when 100% is reached, stop the interval */
      clearInterval(myInterval);
    }
}, 50);

这是一个有效的 jsfiddle:https://jsfiddle.net/c51u6r8t/