html – 悬停时动画的箭头线

概述如何在悬停到箭头线条时将一个线条效果设置为动画效果？ 我尝试使用边框执行此 *** 作,但此箭头和线条必须位于具有透明背景的图像上. 我在这张图片的顶部有一条线,我需要在该图像的底部悬停并使用箭头悬停： 这是我的code： * { box-sizing: border-box;}.bg { margin: 0 auto; background: url('http://i.imgur.co 如何在悬停到箭头线条时将一个线条效果设置为动画效果？

@H_403_8@

我尝试使用边框执行此 *** 作,但此箭头和线条必须位于具有透明背景的图像上.@H_403_8@

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

@H_403_8@

这是我的code：@H_403_8@

@H_403_8@

* {  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 >  <div ></div></div>

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

@H_403_8@

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

@H_403_8@

*{  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 >  <div ></div></div>

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

以上是内存溢出为你收集整理的html – 悬停时动画的箭头线全部内容，希望文章能够帮你解决html – 悬停时动画的箭头线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。