2

Как сделать анимацию обводки, чтобы при наведении она плавно отрисовывалась справа налево ?

.data-box{
background-color: #222;
}
nav{
  display: flex;
}
a{
    margin-right: 10px;
    color: #fff;
    padding: 5px 15px;
    border: 2px solid transparent;
    border-radius: 15px;
    position: relative;
}
a:hover,a.active{
border-color: #009245;
}
<div class="data-box">
  <nav>
      <a href="">Услуги</a>
      <a href="">Цены</a>
      <a href="" class="active">Портфолио</a>
      <a href="">Отзывы</a>
      <a href="">О компании</a>
      <a href="">Блог</a>
      <a href="">Контакты</a>
  </nav>
</div>

2
  • 1
    Так у вас при наведении отрисовка обводки появляется, в чем суть вопроса? 25 янв 2019 в 11:11
  • не так вопрос задал, чтобы при наведении плавно отрисовывалась справа на лево
    – murfuc
    25 янв 2019 в 11:13

1 ответ 1

5

Как вы просили, но это большой костыль и ради такого эффекта не нужно так парится.

.data-box{
background-color: #222;
}
nav{
  display: flex;
}
a{
    margin-right: 10px;
    color: #fff;
    padding: 5px 15px;
    border: 2px solid transparent;
    border-radius: 15px;
    position: relative;
    background-color:#222222;
    display: inline-flex;
    align-items: center;
    justify-content: center;
        z-index: 1;
        overflow: hidden;
}
a::after {
content:"";
display: block;
position: absolute;
border-radius: 14px;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background-color:#222222;
height: calc(100% - 4px);
width: calc(100% - 4px);
transition: all .4s ease;
z-index: -1;
}
a::before {
content:"";
display: block;
position: absolute;
border-radius: 15px;
top: 0;
right: 0;
right: 0;
background-color: #009245;
height: 100%;
width: 0;
transition: all .4s ease;
    z-index: -2;
}
a:hover::before,
a.active::before{
width: 100%;
transition: all .4s ease;
}
<div class="data-box">
  <nav>
      <a href="">Услуги</a>
      <a href="">Цены</a>
      <a href="" class="active">Портфолио</a>
      <a href="">Отзывы</a>
      <a href="">О компании</a>
      <a href="">Блог</a>
      <a href="">Контакты</a>
  </nav>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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