背景大小的动画变得生涩

编程问答 2022-05-02

问题描述


我只是想为背景设置动画，但它的移动很奇怪
有人遇到过类似的问题吗？

非常感谢你提前=） 

.bkg {
  width: 100vw;
  height: 600px;
  background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  animation: example 3s infinite;
}

@keyframes example {
  from {background-size: 100% auto;}
  to {background-size: 102% auto;}
}
<body>
<div class="bkg"></div>
</body>

解决方法

这是由于居中。最好考虑一个额外的层和动画 scale()

.bkg {
  height: 600px;
  position:relative;
  overflow:hidden;
}
.bkg:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  animation: example 3s infinite;
}

@keyframes example {
  to {transform:scale(1.02)}
}
<div class="bkg"></div>

animationanimationanimationbackground-size