使用純CSS繪製箭頭周圍的箭頭

在鼠標懸停按鈕上，箭頭從上到下進行動畫處理。我想在箭頭外面創建一個圓。所以圓應該包含箭頭。

我不確定它是否可行。我做了一些谷歌研究，但沒有找到合適的東西。

<a href="#" class="button"> 
    <span>Hover Me</span> 
</a>

的小提琴是here

來源

2013-10-24 Prithviraj Mitra

宜整個時間都在那裏？ –

您是否嘗試過「border-radius：500px」？ –

埃德是邊界應該在那裏整個時間。 –

如果我理解你，這樣的事情：

.button span:before { 
    content:' '; 
    position: absolute; 
    top: 0px; 
    right: -18px; 
    opacity: 0; 
    width: 30px; 
    height: 30px; 
    margin-top: -19px; 
    border-radius: 50%; 
    background: #000; 
    transition: opacity 0.2s, top 0.2s, right 0.2s; 
}

演示：http://jsfiddle.net/DFNn9/4/

來源

2013-10-24 16:42:52 Prisoner

@prisoner ....感謝您的解決方案。這正是我想要的。我只需要做幾個變化。圓的bgcolor應該是白色的，圓的邊界顏色應該是橙色的。讓我試試。 –

完成....非常感謝你soooo。你是一個明星，一切...：p –

@PrithvirajMitra很高興我可以幫助:) – Prisoner

jsFiddle DEMO

.button:hover span:after, .button:active span:after { 
    transition: opacity 0.2s, top 0.2s, right 0.2s; 
    opacity: 1; 
    border-color: #e24500; 
    right: 0; 
    top: 62%; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background-color: blue 
}

來源

2013-10-24 16:50:55

使用純CSS繪製箭頭周圍的箭頭

回答

相關問題