时间戳

首页 > 解决方案 > 如何在缩放线性渐变动画时将其居中？

html - 如何在缩放线性渐变动画时将其居中？

问题描述

我正在学习如何通过更改它们的背景定位和元素的大小来为径向渐变设置动画。我尝试使用 flexbox 在 .animcontain 内垂直和水平对齐 .anim2，以及设置填充和边距，但似乎没有任何效果。如何在不挤压径向渐变背景的中心进行放大？

body {
  background-color: black;
  color: white;
  margin: 0;
}

.align {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 20vmin));
  grid-auto-rows: minmax(80px, 20vmin);
  grid-gap: 10px;
}

.container > div {
  border: 2px solid white;
}

@keyframes anim1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.anim1 {
  animation: anim1 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  background-size: 100% 3000%;
  background-image: linear-gradient(
    to bottom,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  border-radius: 10px;
}

@keyframes anim2 {
  0% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 1000%;
    height: 1000%;
  }
}

.animcontain {
  overflow: hidden;
  border-radius: 50%;
}

.anim2 {
  background-image: radial-gradient(
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  animation: anim2 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div class="align">
    <div class="container">
      <div class="anim1"></div>
      <div class="animcontain">
        <div class="anim2"></div>
      </div>
      <div class="anim3"></div>
    </div>
  </div>
</body>

</html>

标签： htmlcss

解决方案

不要为宽度/高度设置动画，为background-size

body {
  background-color: black;
  color: white;
  margin: 0;
}

.align {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 20vmin));
  grid-auto-rows: minmax(80px, 20vmin);
  grid-gap: 10px;
}

.container > div {
  border: 2px solid white;
}

@keyframes anim1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.anim1 {
  animation: anim1 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  background-size: 100% 3000%;
  background-image: linear-gradient(
    to bottom,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  border-radius: 10px;
}

@keyframes anim2 {
  100% {
    background-size: 1000% 1000%;
  }
}

.animcontain {
  overflow: hidden;
  border-radius: 50%;
  background-image: radial-gradient(
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  background-size: 100% 100%;
  background-position:center;
  animation: anim2 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
<div class="align">
    <div class="container">
      <div class="anim1"></div>
      <div class="animcontain">
      </div>
      <div class="anim3"></div>
    </div>
 </div>

推荐阅读