1

схема

  1. Как нарисовать такую линию?
  2. Как сделать чтобы она появлялась слева на право при наведении на кнопку?

1 ответ 1

5

Animation и @keyframes

body {
  background: url('https://i.stack.imgur.com/NH9hp.png');
}

.button {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 100px 5px 0;
  border-radius: 50%;
  background: #ffa60e;
}

.button:hover .line {
  animation: .8s linear forwards draw_line;
}

.line {
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 50%;
  left: 130%;
  border-bottom: 1px solid rgba(255, 255, 255);
  border-right: 1px solid rgba(255, 255, 255);
  opacity: 0.0;
  transition: opacity 2s ease;
}

.dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255);
}

.start {
  bottom: calc(0% - 4px);
  left: calc(0% - 3px);
}

.angle {
  bottom: calc(0% - 4px);
  left: calc(100% - 3px);
}

.final {
  bottom: calc(100% - 4px);
  left: calc(100% - 3px);
}

@keyframes draw_line {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.0;
  }
  1% {
    width: 0px;
    opacity: 0.5;
  }
  65% {
    width: 240px;
    height: 0px;
  }
  100% {
    width: 240px;
    height: 60px;
    opacity: 0.5;
  }
}
<div class="button">
  <div class="line"><b class="dot start"></b><b class="dot angle"></b><b class="dot final"></b></div>
</div>

Transition: delay и duration

body {
  background: url('https://i.stack.imgur.com/NH9hp.png');
}

.button {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 50px auto -40px;
  border-radius: 50%;
  background: #ffa60e;
}

.line_right {
  pointer-events: none;
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 50%;
  left: 130%;
  border-bottom: 1px solid rgba(255, 255, 255);
  border-right: 1px solid rgba(255, 255, 255);
  opacity: 0.0;
  transition-property: opacity, width, height;
  transition-duration: 0.5s, 0.0s, 0.0s;
  transition-delay: 0.0s, 0.3s, 0.3s;
  transform-origin: bottom left;
  /* раскомментировать для "вправо-и-вниз" */
  /* transform: scale(1, -1); */
}
.button:hover .line_right {
  width: 240px;
  height: 60px;
  opacity: 0.5;
  transition-property: opacity, width, height;
  transition-duration: 0.1s, 0.6s, 0.2s;
  transition-delay: 0.0s, 0.1s, 0.7s;
}

.line_bottom {
  pointer-events: none;
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 50%;
  left: 130%;
  border-bottom: 1px solid rgba(255, 255, 255);
  border-right: 1px solid rgba(255, 255, 255);
  opacity: 0.0;
  transition-property: opacity, width, height;
  transition-duration: 0.5s, 0.0s, 0.0s;
  transition-delay: 0.0s, 0.3s, 0.3s;
  transform-origin: bottom left;
  /* transform: rotate(90deg); "вниз-и-вправо" */
  transform: rotate(90deg) scale(1, -1);/* "вниз-и-влево" */
}
.button:hover .line_bottom {
  width: 60px;
  height: 240px;
  opacity: 0.5;
  transition-property: opacity, width, height;
  transition-duration: 0.1s, 0.2s, 0.6s;
  transition-delay: 0.0s, 0.1s, 0.3s;
}

.dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255);
}
.start {
  bottom: calc(0% - 4px);
  left: calc(0% - 3px);
}
.angle {
  bottom: calc(0% - 4px);
  left: calc(100% - 3px);
}
.final {
  bottom: calc(100% - 4px);
  left: calc(100% - 3px);
}
<div class="button">
  <div class="line_right"><b class="dot start"></b><b class="dot angle"></b><b class="dot final"></b></div>
</div>
<div class="button">
  <div class="line_bottom"><b class="dot start"></b><b class="dot angle"></b><b class="dot final"></b></div>
</div>

7
  • Спасибо за ответ, можешь подсказать, что бы ещё и плавно исчезала линия, где и что прописать? 4 ноя 2018 в 11:12
  • И почему у меня не получается привязать этот код к input? 4 ноя 2018 в 11:35
  • к input привязать удалось, а вот как добавить в js плавное исчезание не знаю. Можете на коде , который вы написали выше сделать плавное исчезание? 4 ноя 2018 в 12:24
  • Спасибо друг, учусь) 4 ноя 2018 в 14:07
  • 1
    @ВадимЯнущик дополнил.
    – UModeL
    7 ноя 2018 в 19:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.