使用 CSS 线性渐变创建无缝动画

Question

div {
  border-radius: 2rem;
  width: 10rem;
  height: 10rem;
  background-color: #0dd;
  background-image: 
    linear-gradient( 
      -45deg, 
      rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent
    );  
}

div {
  animation-name: diagonal_move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes diagonal_move {
  0% {
    background-position: 0rem 0rem;
  }
  100% {
    background-position: 10rem 10rem;
  }
}

<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>
</html>

由于上面的线性渐变动画可以清楚地看到渐变的边缘 - 与周围环境无缝融合相反。

试图隐藏边缘的解决方案是在顶部叠加额外的渐变：

div {
  border-radius: 2rem;
  width: 10rem;
  height: 10rem;
  background-color: #0dd;
  background-image: 
    linear-gradient( #0dd, transparent, transparent, transparent, #0dd ),
    linear-gradient( 90deg, #0dd, transparent, transparent, transparent, #0dd ),
    linear-gradient( 
      -45deg, 
      rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent
    ); 
}

div {
  animation-name: diagonal_move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes diagonal_move {
  0% {
    background-position: 0rem 0rem;
  }
  100% {
    background-position: 10rem 10rem;
  }
}

<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>
</html>

这种方法的问题是它隐藏了大部分原始渐变和接缝。它还会在接缝所在的位置创建亮线。

那么有没有办法在渐变结束时翻转或镜像渐变以创建无缝图案？或者也许原始渐变可以更大并缩小以产生无缝图案的错觉。如何实现？

Answer 1

您的渐变由 3 个部分组成（在 4 个参考 points/color 定义之间），这会创建一种“不对称”结构，因为末尾的颜色与开头的颜色不同。如果你添加另一个参考点/颜色（与第一个相同），渐变在开始和结束以及正方形的其他两个角处具有相同的颜色，因此动画工作流畅：

div {
  border-radius: 2rem;
  width: 10rem;
  height: 10rem;
  background-color: #0dd;
  background-image: 
    linear-gradient( 
      -45deg, 
      rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 )
    );  
}

div {
  animation-name: diagonal_move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes diagonal_move {
  0% {
    background-position: 0rem 0rem;
  }
  100% {
    background-position: 10rem 10rem;
  }
}

<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>
</html>

Answer 2

在这种情况下，最好考虑一个比元素大两倍的重复渐变，这样您就不必为 background-position:

中的特定值而烦恼

.box {
  border-radius: 2rem;
  width: 10rem;
  height: 10rem;
  background-color:;
  background: 
    repeating-linear-gradient( 
      -45deg, 
      rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ) 25%
    ) bottom right/200% 200%
     #0dd;  
  animation: diagonal_move 6s linear infinite;
}

@keyframes diagonal_move {
  100% {
    background-position: top left;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin:0;
}

<div class="box"></div>

有关值和计算的更多详细信息：Using percentage values with background-position on a linear-gradient

使用 CSS 线性渐变创建无缝动画

Creating seamless animation with CSS linear gradient

css

linear-gradients

css-animations

css-gradients

repeating-linear-gradient