CSS渐变边框动画度数问题

Question

我想创建一个从左上角到右下角的渐变边框动画。动画将用于此 div 中的图像。我尝试了各种角度，但没有按照我想要的方向工作，它总是从右上角或右下角开始。

也用负度数试过。

.block {
    position: relative;
    margin: 30px auto 0;
    width: 250px;
    height: 250px;
    background: #272727;
}

.block:before, .block:after {
    content: '';
  position: absolute;
    left: -1px;
    top: -1px;
    background: linear-gradient(45deg, rgba(0,0,0,0)35%, rgba(0,204,255,1)50%, rgba(0,0,0,0)65%);
    background-size: 400%;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    z-index: -1;
    animation: shine 8s linear infinite;
}

@keyframes shine {
    to {
      background-position: 400% center;
    }
  }

.block:after {
    filter: blur(8px);
}

<div class="block"></div>

Answer 1

像下面这样更新您的代码：

.block {
  position: relative;
  margin: 30px auto 0;
  width: 250px;
  height: 250px;
  background: #272727;
}

.block:after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0)35%, rgba(0, 204, 255, 1)50%, rgba(0, 0, 0, 0)65%);
  background-size: 400% 400%;
  z-index: -1;
  animation: shine 3s linear infinite;
  filter: blur(8px);
}

@keyframes shine {
  from {
    background-position: 100% 100%
  }
  to {
    background-position: 0 0
  }
}

<div class="block"></div>

CSS渐变边框动画度数问题

CSS Gradient Border Animation Degree Problem

html

css

css-animations

border

linear-gradients