最新消息: 新版網站上線了!!!

css樣式畫加號和減號(+和-)效果

若想實現這個效果, 只需一個div元素即可搞定。需要用到css的為了before和after, 以及border特性。

先設置一個div便簽

 <div class="add"></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偽類,設置鼠標懸浮上去的顏色:

.add:hover {

  color: blue;

}


轉載請注明:谷谷點程序 » css樣式畫加號和減號(+和-)效果

体彩25选5开奖号码