Как правильно реализовать анимированную нижнюю границу? - PullRequest
Новая
       98

Как правильно реализовать анимированную нижнюю границу?

2 голосов
/ 04 августа 2020

Должен ли быть отдельный div? Я не могу понять, как применить это к div, у которого уже есть некоторый контент. 

.dashed-line {
  height: 3px;
  width: 700px;
  background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, transparent 50%);
  background-size: 0px 0px, 15px 4px, 4px 0px, 4px 0px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  margin-left: 15px;
  animation: border-dance 7s infinite linear;

}
@keyframes border-dance {
  0% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
  100% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
}
<div class="dashed-line"></div>

Ответы [ 2 ]

2 голосов
/ 04 августа 2020

Это та ситуация, для которой особенно подходят псевдоэлементы ::before и ::after.

По сути, они позволяют добавлять на вашу страницу элементы, которые не Не актуальное "содержание". Это может быть текстовое оформление с помощью свойства content css. Или вы можете оставить это свойство как пустую строку '' и просто воспользоваться тем фактом, что к вашему узлу добавлен «псевдо-div». 

span {
  position: relative;
}
span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, transparent 50%);
  background-size: 0px 0px, 15px 4px, 4px 0px, 4px 0px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  animation: border-dance 7s infinite linear;

}
@keyframes border-dance {
  0% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
  100% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
}
<span> hello i have some content </span>
1 голос
/ 04 августа 2020

Вы можете сделать это с помощью более простого синтаксиса: 

.box {
  --p:10px; /* width of the pattern */
  --w:4px;  /* width of the gap inside the pattern */
  --h:3px;  /* height of line */

  padding: 8px;
  font-size:20px;
  display: inline-block;
  background: 
    linear-gradient(90deg, red calc(100% - var(--w)), transparent 0)
    0 100% / var(--p) var(--h) repeat-x;
  animation: move 0.3s linear infinite;
}

@keyframes move {
  to {
    background-position: var(--p) 100%;
  }
}
<div class="box">
  some text
</div>
...