Ken Burns使用CSS放大效果

Question

我在看这个网站 -

http://melaniedaveid.com/

它在某些图像上有一个非常好的放大（Ken Burns效果）。我喜欢动画的流畅度。

这是CSS divs的使用 -

.project .project__header .header__image {
background-position: center center;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: scale(1);
transition: transform 15s linear 0s;
width: 100%;
}

我尝试过做类似的事情，但这对我不起作用。我错过了什么？

Answer 1

您需要在悬停时进行转换。所以它看起来像这样： https://jsfiddle.net/kzam3Lo7/

img {
  background-position: center center;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(1);
  width: 100%;
}

img:hover {
  transform: scale(2);
  transition: transform 15s linear 0s;
}