Как сделать анимацию CSS с box-shadow - PullRequest
Новая
       25

Как сделать анимацию CSS с box-shadow

0 голосов
/ 05 июля 2018

Мне нужна анимация CSS, в которой часть линии (200 пикселей) заменяется другим цветом (например, градиентом). Как я могу это сделать?

Вот мой текущий код: 

* {
  margin: 0;
  padding: 0 20px;
}

h1 {
  text-align: center;
}

.lineHolder {
  margin-top: 50px;
}

.line {
  width: 100%;
  height: 200px;
  border: 1px solid black;
  background: darkslateblue;
  box-shadow: 200px 0px 200px -120px blueviolet inset;
  animation: background 5s infinite alternate-reverse linear, background2 8s infinite alternate-reverse linear;
}

@keyframes background {
  0% {
    background: darkslateblue;
    box-shadow: 0px 0px 200px -120px lightblue inset;
  }
  10% {
    background: darkslateblue;
    box-shadow: 200px 0px 200px -120px lightblue inset;
  }
  20% {
    background: darkslateblue;
    box-shadow: 400px 0px 200px -120px lightblue inset;
  }
  30% {
    background: darkslateblue;
    box-shadow: 600px 0px 200px -120px lightblue inset;
  }
  40% {
    background: darkslateblue;
    box-shadow: 800px 0px 200px -120px lightblue inset;
  }
  50% {
    background: darkslateblue;
    box-shadow: 1000px 0px 200px -120px lightblue inset;
  }
  60% {
    background: darkslateblue;
    box-shadow: 1200px 0px 200px -120px lightblue inset;
  }
  70% {
    background: darkslateblue;
    box-shadow: 1400px 0px 200px -120px lightblue inset;
  }
  80% {
    background: darkslateblue;
    box-shadow: 1600px 0px 200px -120px lightblue inset;
  }
  90% {
    background: darkslateblue;
    box-shadow: 1800px 0px 200px -120px lightblue inset;
  }
  100% {
    background: darkslateblue;
    box-shadow: 2000px 0px 200px -120px lightblue inset;
  }
}
<div class="holder">
  <h1>Run color line</h1>
  <div class="lineHolder">
    <div class="line"></div>
  </div>
</div>

Он работает правильно на этом сайте возле нижнего колонтитула

1 Ответ

0 голосов
/ 05 июля 2018

Сайт, на который вы ссылаетесь, не использует box-shadow для анимации, он использует background-image в паре с gradients.

Если вам по какой-то причине вам не нужна тень блока, вот рабочий код, который, как я понял, вам нужен: https://codepen.io/matteopieroni/pen/pKmVVy

Советом будет использовать разные цвета, я думаю, что те, которые вы пытаетесь использовать, слишком «близки», чтобы дать хороший эффект от сайта, на который вы ссылаетесь. На ручке вы можете раскомментировать вторую строку background-image, чтобы увидеть, как она выглядит с разными цветами.

...