html - 箭头动画移动侧问题

Question

我尝试改变这个箭头效果，向左移动，但它对我不起作用，任何人都知道如何正确地做到这一点

我用了这个教程

#arrowAnim {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  width: 34px;
  height: 34px;
  border: 0.5vw solid;
  border-color: #3f97cd transparent transparent #428ac7;
  -webkit-transform: rotate(45deg);
  transform: rotate(135deg);
}

.arrowSliding {
  position: absolute;
  -webkit-animation: slide 4s linear infinite;
  animation: slide 4s linear infinite;
}

.delay1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.delay2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.delay3 {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@-webkit-keyframes slide {
  20% {
    opacity: 1;
    transform: translateX(9vw);
  }
  80% {
    opacity: 1;
    transform: translateX(-9vw);
  }
  100% {
    opacity: 0;
    transform: translateX(-15vw);
  }
}

@keyframes slide {
  20% {
    opacity: 1;
    transform: translateX(9vw);
  }
  80% {
    opacity: 1;
    transform: translateX(-9vw);
  }
  100% {
    opacity: 0;
    transform: translateX(-15vw);
  }
}

<div id="arrowAnim">
  <div class="arrowSliding">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay1">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay2">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay3">
    <div class="arrow"></div>
  </div>
</div>

标签： htmlcss

Answer 1

这是另一个代码更少且更易于处理的想法：

.arrow {
  width:200px;
  height:80px;
  overflow:hidden;
  margin:5px auto;
  position:relative;
  -webkit-mask:linear-gradient(to right,transparent,#fff 20% 80%,transparent);
  mask:linear-gradient(to right,transparent, #fff 20% 80%,transparent);
}
.arrow:before,
.arrow:after {
  content:"";
  position:absolute;
  width:200%;
  left:0;
  top:0;
  height:50%;
  background:linear-gradient(to right,blue 8px,transparent 0) left/calc(100%/8) 100%;
  transform:var(--s,scaleY(1)) skew(45deg);
  transform-origin:bottom;
  animation:move 2s infinite linear;
}
.arrow.right:before,
.arrow.right:after {
  animation-direction:reverse
}
.arrow:after {
  --s:scaleY(-1);
}

@keyframes move{
  to {
    transform:translateX(-25%) var(--s,scaleY(1)) skew(45deg);
  }
}

<div class="arrow">
</div>

<div class="arrow right">
</div>