在悬停时动画的箭头线

Question

如何将一个线条效果设置为悬停至箭头上的动画？

我尝试使用边框执行此操作，但此箭头和线条必须位于具有透明背景的图像上。

我在这张图片的顶部有一条线，我需要在该图像的底部悬停并使用箭头悬停：

这是我的code：

＆＃13;

＆＃13;

* {
  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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

在下面的例子中，我使用2个伪元素来制作边框并将它们倾斜以在.bg元素的悬停上形成透明三角形：

＆＃13;

＆＃13;

*{
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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