html - 悬停时带动画箭头的线

Question

如何制作一个悬停时与箭头对齐的线效果动画？

我试着用边框来做这个，但是这个箭头和线必须在具有透明背景的图像上。

我有一条线，就像这张图片的顶部一样，我需要像这张图片的底部一样在鼠标悬停时制作一条线和箭头:

这是我的 code :

* {
  box-sizing: border-box;
}
.bg {
  margin: 0 auto;
  background: url('http://i.imgur.com/RECDV24.jpg') center no-repeat;
  background-size: cover;
  width: 100vh;
  height: 100vh;
  position: relative;
  padding: 1em;
}
.line {
  height: 2px;
  position: absolute;
  top: 50%;
  left: 1em;
  right: 1em;
  background: #fff;
}
.bg:hover .line:after {
  height: 10px;
  width: 10px;
  position: absolute;
  content: '';
  background: transparent;
  border: 2px solid #fff;
  border-top-width: 0px;
  border-left-width: 0px;
  transform: rotate(45deg);
  bottom: -6px;
  left: calc(50% - 4px);
}

<div class="bg">
  <div class="line"></div>
</div>

Answer 1

要制作透明三 Angular 形，您可以使用 Border with a transparent or same color centred arrow on a div 中描述的方法之一。 .

在下面的示例中，我使用了 2 个伪元素来制作边框并倾斜它们以在 .bg 元素悬停时制作透明三 Angular 形:

*{
  box-sizing:border-box;
}
.bg{
  margin:0 auto;
  background: url('http://i.imgur.com/RECDV24.jpg') center no-repeat;
  background-size: cover;
  width:100vh;
  height:100vh;
  position:relative;
  padding:1em;
}
.line{
  margin-top:50vh;
  overflow:hidden;
}
.line:before, .line:after{
  content:'';
  float:left;
  display:block;
  width:50%;
  border-top:2px solid #fff;
  box-sizing:border-box;
  transform-origin:0 100%;
}
.bg:hover .line:before{
  transform: skewX(45deg);
  border-right:3px solid #fff;
  height:20px;
}
.bg:hover .line:after{
  transform: skewX(-45deg);
  border-left:3px solid #fff;
  margin-left:-3px;
  height:20px;
}

<div class="bg">
  <div class="line"></div>
</div>

请注意，您需要为浏览器支持添加供应商前缀(有关详细信息，请参阅 canIuse)