Question

我正在寻找使用css3动画存档效果的简洁方法：

我有div，它有css风格：

background-image:url('image.png');
background-size:cover;
/* Just to note this page has 100% width and 100% height */
width:100%;
height:100;

这两条规则，使图像全屏显示。现在，我正在寻找一种方法，创造变焦效果，让我们说5秒钟。所以用户在页面加载时看到整页背景，它越来越小，但是所有时间都是100％的宽度和高度。

我找到了一些例子，但大多数都使用了：悬停效果，我希望在页面加载时有动画。

感谢您的建议。

Answer 1

将图像背景大小设置为大于100％，然后使用关键帧动画将其“缩放”为100％作为结束值。

对于循环，请使用animation-direction: alternate;

body {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-size: 110% 110%;
  background-position: center center;
  animation: shrink 5s infinite alternate;
}
@keyframes shrink {
  0% {
    background-size: 110% 110%;
  }
  100% {
    background-size: 100% 100%;
  }
}

Css - 动画背景图像 - 缩放效果与循环

1 个答案: