css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果

發(fā)布時(shí)間：2020-10-19 14:45:10 來源：億速云閱讀：255 作者：小新欄目：web開發(fā)

這篇文章主要介紹css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

實(shí)現(xiàn)下圖的加號(hào)效果：

若想實(shí)現(xiàn)這個(gè)效果，只需一個(gè)p元素即可搞定。

需要用到css的為了before和after，以及border特性。

先設(shè)置一個(gè)div便簽

<div class="add"></div>

再設(shè)置一個(gè)邊框：

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

此時(shí)邊框是這樣的：

css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果

我們可以利用偽類before和其border-top來設(shè)置一個(gè)“橫”：

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}

注意我們使了絕對(duì)定位。此時(shí)變成了這樣：

css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果

參照上面，我們可以使用after偽類和border-bottom設(shè)置一個(gè)“豎”：

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

在加上hover偽類，設(shè)置鼠標(biāo)懸浮上去的顏色：

最終的樣式：

css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果

當(dāng)鼠標(biāo)懸浮上去是，會(huì)變色：

css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果

以上是css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css如何實(shí)現(xiàn)加號(hào)一個(gè)的效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽