3

Как сделать анимацию линий, расходящихся в разные стороны из одной точки при :hover?
У меня есть одно решение, но здесь видно в центре, как линия находится над другой линией

https://jsfiddle.net/ws1nfmo6/

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::before,
.line::after{
    content:'';
    width: 0;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: .6;
    display: block;
    transition:1s;
}
.line:hover::after{
    width: 50%;
}
.line:hover::before{
    width: 50%;
    transform: translateX(-100%);
}
<div class="line"></div>

4 ответа 4

8

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line:after{
    content:'';
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 50%;
    opacity: .6;
    display: block;
    transition:.5s;
}
.line:hover:after{
    left: 0;
    right: 0;
}
<div class="line"></div>

6

Одним элементом:

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::after{
    content:'';
    width: 0;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: .6;
    display: block;
    transition:1s;
}
.line:hover::after{
    width: 50%;
    transform: translateX(-50%) scaleX(2);
}
<div class="line"></div>


Убрать прозрачность:

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::before,
.line::after{
    content:'';
    width: 0;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transition:1s;
}
.line:hover::after{
    width: 50%;
}
.line:hover::before{
    width: 50%;
    transform: translateX(-100%);
}
<div class="line"></div>

6

Чуть переделанный вариант от @Stranger in the Q, так скажем для перфекционистов.

Изменения:

  • Анимация начинается от центра.
  • Для "растягивания" используется width, а не scaleX

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::after{
    content:'';
    width: 0;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transition:1s;
    transform: translate(-50%,-50%);
}
.line:hover::after {
    width: 100%;
}
<div class="line"></div>


Вариант для тех, кто топит за оптимизацию, фпс и прочее (ps тут используется scaleX)

.line{
  display: inline-block;
  width: 200px;
  height: 10px;
  border:1px solid #000;
  position: relative;
  padding: 10px;
}
.line::after{
    content:'';
    width: 100%;
    height: 2px;
    background: #FA7268;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transition:1s;
    transform: translate(-50%,-50%) scaleX(0);
}
.line:hover::after {
    transform: translate(-50%,-50%) scaleX(1);
}
<div class="line"></div>


Ps. не претендую на галочку

6

Вариант SVG

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="200" height="24" viewBox="0 0 200 24" >  

<rect x="2" y="2" width="196" height="20" stroke="black" stroke-width="2" fill="none" /> 
<polyline points="2,11 196,11" fill="none" stroke="#FA7268" stroke-dasharray="0,194" >
  <animate attributeName="stroke-dasharray" begin="svg1.mouseover"  dur="0.5s" values="0,97 0,97;0,0,194,0" fill="freeze" restart="whenNotActive" />
</polyline>
</svg>	 

Ваш ответ

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

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