帶有箭頭的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

回答

相關問題