Question

我已经制作了这种倾斜移动的圆点的动画。

div {
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 100px 100px;
}

@keyframes animation1 {
  from {
    background-position: 0 0, 50px 0, 25px 50px, 75px 50px;
  }
  to {
    background-position: -100px -100px, -50px -100px, -75px -50px, -25px -50px;
  }
}

<div></div>

我想将其更改为每个圆点都从屏幕中心移出的动画。

但是，由于background-image属性不是可动画的，因此我不知道如何实现它。

我怎么能意识到这一点？

Answer 1

您可以为background-size和/或background-position设置动画以获得所需的效果：

body {
  margin:0;
  height: 100vh;
  background-image: radial-gradient(#85c79f 7px, transparent 7px), radial-gradient(#fc536c 7px, transparent 7px), radial-gradient(#e99377 7px, transparent 7px), radial-gradient(#ebe49a 7px, transparent 7px);
  animation: animation1 5s infinite linear;
  background-size: 20px 20px;
  background-position: 50% calc(50% + 20px), calc(50% - 20px) 50%, calc(50% + 20px) 50%, 50% calc(50% - 20px);
}

@keyframes animation1 {
  from {
    background-size: 20px 20px;
    background-position: calc(50% - 10px) calc(50% + 20px), calc(50% - 20px) calc(50% + 10px), calc(50% + 20px) calc(50% - 10px), calc(50% + 10px) calc(50% - 20px);
  }
  to {
    background-size: 300px 300px;
    background-position: calc(50% - 10px) calc(50% + 100px), calc(50% - 100px) calc(50% + 10px), calc(50% + 100px) calc(50% - 10px), calc(50% + 10px) calc(50% - 100px);
  }
}

如何使动画从中心传播？

1 个答案: