悬停时带有动画箭头的线条答案

【问题标题】：Line with arrow animated on hover悬停时带有动画箭头的线条
【发布时间】：2016-04-18 07:04:42
【问题描述】：

我怎样才能使鼠标悬停时的线条效果与箭头对齐？

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

我在这张图片的顶部有一条线，我需要在这张图片的底部使用鼠标悬停时的箭头和箭头：

这是我的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>

【问题讨论】：

如果使用边框线的概念有效，那么您可以简单地在图像顶部放置一个具有适当边距的元素，然后在 CSS 中使用边框线？边框线动画是否满足您的需求？
请上传你的演示代码，这样我们就可以理解实际问题了。
我更新了我的问题描述。我想在线上产生效果，就像悬停在图像底部一样。

标签： html css css-animations css-shapes

【解决方案1】：

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

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

*{
  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 了解更多信息）

【讨论】：