這篇文章帶給大家的內容是關於純css實現加號一個的效果(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
實作下圖的加號效果:
# 若想實現這個效果, 只要一個p元素即可搞定。
需要用到css的為了before和after, 以及border特性。
先設定一個div便條
<div></div>
再設定一個邊框:
.add { border: 1px solid; width: 100px; height: 100px; color: #ccc; transition: color .25s; position: relative; }
此時邊框是這樣的:
我們可以利用偽類before和其border-top來設定一個「橫」:
.add::before{ content: ''; position: absolute; left: 50%; top: 50%; width: 80px; margin-left: -40px; margin-top: -5px; border-top: 10px solid; }
注意我們使了絕對定位。此時變成了這樣:
參考上面, 我們可以使用after偽類別和border-bottom設定一個「豎」:
.add::after { content: ''; position: absolute; left: 50%; top: 50%; height: 80px; margin-left: -5px; margin-top: -40px; border-left: 10px solid; }
在加上hover偽類,設定滑鼠懸浮上去的顏色:
最終的樣式:
##當滑鼠懸浮上去是, 會變色:
#
以上是純css實現加號一個的效果(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!