时间戳

首页 > 解决方案 > 如何在 CSS 中使用背景图像平滑地无限放大和缩小

css - 如何在 CSS 中使用背景图像平滑地无限放大和缩小

问题描述

背景图像在制作动画时不平滑（某种闪烁），我无法使其从图像中心缩放。

这是我正在尝试制作的个人网站。

    *{margin: 0;padding: 0;}

    body
    {
        background-color: #0C090A;
        background-image: url(../abstract-bg.png);
        animation: zoom 30s infinite;
            -webkit-animation: zoom 30s infinite;
    }

    @keyframes zoom {
        0% {
          background-size: 100%;
        }
        50% {
          background-size: 105%;
        }
        100% {
         background-size: 100%;
        }
      }

我想让背景图像（1920*1080）慢慢缩放到原始大小的 105%（或类似的大小），然后回到 100%。另外，如果可能的话，让它从中心缩放，而不是左上角。感谢那些可以提供帮助的人。

标签： css

解决方案

是的，当然你可以:) 只需添加

  background-position:center center;
  background-repeat:no-repeat;

在正文 css 中并添加

html{
  height: 100%;
}

完整的CSS代码：

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  background-color: #0C090A;
  background-image: url(https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg);
  animation: zoom 30s infinite;
  -webkit-animation: zoom 30s infinite;

  background-position: center center;
  background-repeat: no-repeat;

}

@keyframes zoom {
  0% {
    background-size: 100%;

  }
  50% {
    background-size: 150%;
  }
  100% {
    background-size: 100%;
  }
}

您可以测试代码： https ://playcode.io/358401

推荐阅读