如何制作CSS图片反弹动画效果

发布时间：2023-05-12

一、选用图片

CSS图片反弹动画效果是一种非常有趣的动画效果，能够给用户留下深刻的印象。在制作这种动画效果之前，我们需要选用一张有趣的图片。这张图片需要满足如下要求：

  1. 具备一定的颜色饱和度和对比度，能够引起用户的注意。
  2. 图片像素不宜过大，一般300*300的大小足以满足需求。
  3. 图片越简洁越好，尽量不要选用过于复杂的图片。

二、利用CSS实现动画效果

在选好图片之后，我们需要利用CSS来实现动画效果。下面是代码示例：

/* 首先定义图片的样式 */
img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: bounce 2s infinite;
}
/* 定义反弹的动画 */
@keyframes bounce {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-50%, -60%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  75% {
    transform: translate(-50%, -40%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

上述代码中，我们首先定义了图片的样式，其中通过position:absolute;left:50%;top:50%来将图片定位到页面正中间，通过transform:translate(-50%,-50%)使其水平垂直居中。接下来，我们定义了一个名为bounce的动画，这个动画会让图片上下反弹。在动画中，我们使用了transform:translate(-50%,-60%)这样的语句来让图片在一定程度上上升，并通过transform:translate(-50%,-40%)将图片下降。

三、动态修改图片：

在动画的过程中，我们可以通过Javascript来动态修改图片，从而获得更为丰富的动画效果。下面是代码示例：

// 获取图片的DOM元素
const img = document.querySelector('img');
// 定义当前图片的位置
let current = 0;
// 定义图片的高度
let imgHeight = img.clientHeight;
// 定义图片上升还是下降的标记
let isRise = true;
// 定义动画的循环函数
function loop() {
  // 如果图片上升
  if (isRise) {
    // 修改图片的位置
    current--;
    // 如果图片位置小于等于顶部位置，则修改标记
    if (current <= -imgHeight / 2) {
      isRise = false;
    }
  } else {
    // 修改图片的位置
    current++;
    // 如果图片位置大于等于底部位置，则修改标记
    if (current >= 0) {
      isRise = true;
    }
  }
  // 将修改后的位置赋值给图片的样式
  img.style.transform = `translate(-50%, ${current}px)`;
  // 循环执行动画
  window.requestAnimationFrame(loop);
}
// 启动动画
loop();

在上述代码中，我们使用了requestAnimationFrame()方法来循环执行动画。在函数loop()中，我们定义了图片上升还是下降的标记isRise，通过判断图片的位置是否到达顶部或底部来决定该标记的取值。通过修改transform:translate()的第二个参数，我们能够实现图片的运动效果。

总结

通过CSS和Javascript的结合，我们能够轻松实现图片的反弹动画效果，并通过动态地修改图片的位置，从而获得更加丰富的动画效果。我们需要在选取图片时尽量选用简洁的图片，而在动画实现过程中，需要运用transform属性，并且设置合适的动画时长和动画效果从而获得更好的视觉效果。

推荐文章