带有箭头的Jquery magicline

我试图改变一个带底部边框的菜单，使其有一个底部箭头。带有箭头的Jquery magicline

例如为：http://i.imgur.com/3onjcjV.png

https://css-tricks.com/jquery-magicline-navigation/¨

#magic-line { 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    background: #fe4902; 
}

试过以下，但它不工作。

#magic-line { 
    position: relative; 
    background: #fff; 
    border: 1px solid #999; 
} 

#magic-line:after, #magic-line:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

#magic-line:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #fff; 
    border-width: 10px; 
    margin-left: -10px; 
} 

#magic-line:before { 
    border-color: rgba(153, 153, 153, 0); 
    border-bottom-color: #999; 
    border-width: 11px; 
    margin-left: -11px; 
}

https://jsfiddle.net/0shrxyee/

来源

2017-01-02 John

我们将需要看到一些比这更多的代码。你可以添加你的JS或更好，但把它放在plunker/jsbin/codepen（无论你喜欢哪种服务） –

https://jsfiddle.net/0shrxyee/ – John

谢谢。虽然这似乎工作。底部箭头是什么意思？ –

要添加像你正在寻找一个箭头，你可以添加以下到你的CSS文件：

#magic-line { 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    background: #fe4902; 
    overflow:visible !important; 
} 
#magic-line:after, #magic-line:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

#magic-line:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5; 
    border-width: 5px; 
    margin-left: -5px; 
} 
#magic-line:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 5px; 
    margin-left: -5px; 
}

本质上讲这确实是增加了一个“元素“，并给出它们的边界，从而在物品上创建箭头的外观。

您可以创建适合你在这里箭头：http://www.cssarrowplease.com/

试着去了解这是如何工作的CSS，你可以使箭头看起来确实希望它的方式。

如果在动画过程中没有出现箭头，这似乎发生在浏览器中，这些浏览器使用伪元素对css动画进行硬件加速。修复方法是将overflow: visible !important添加到包含伪元素的元素。

即：

#magic-line { 
    overflow:visible !important; 
}

来源

2017-01-02 15:52:41

但是我怎么能这样做箭头也滑动？ – John

看这里：https://jsfiddle.net/0shrxyee/4/ – John

这是一个奇怪的错误，但解决的办法是在＃magic-line css中添加这行：overflow：visible！important; –

带有箭头的Jquery magicline

回答

相关问题