如何用CSS實現加號樣式

一、基礎CSS樣式

首先我們來看一下如何基於基礎的CSS樣式實現加號樣式。

/*HTML*/
<div class="plus">加號</div>

/*CSS*/
.plus {
  border: 1px solid #ddd;
  display: inline-block;
  padding: 5px;
}

.plus::before {
  content: "+";
  margin-right: 5px;
}

這段代碼中，我們使用了偽元素::before，給加號添加了一個before偽元素，並設置了content屬性，將加號添加到before偽元素中。我們使用margin-right屬性，為content和加號之間添加了5px的距離。

二、CSS動畫

如果我們想要讓加號在hover時出現動態特效，可以使用CSS動畫來實現。

/*HTML*/
<div class="plus2">加號</div>

/*CSS*/
.plus2 {
  border: 1px solid #ddd;
  display: inline-block;
  padding: 5px;
}

.plus2::before {
  content: "+";
  margin-right: 5px;
  transition: all 0.2s ease-in-out;
}

.plus2:hover::before {
  transform: rotate(45deg) scale(1.5);
}

這段代碼中，我們給before偽元素添加了transition屬性，實現了在hover時平滑過渡的效果。我們使用:hover偽類，控制加號的旋轉和伸縮效果，並使用transform屬性，實現了這些效果。

三、利用多個元素實現更複雜的加號

我們也可以使用多個元素來實現更複雜的加號樣式，下面看一個例子。

/*HTML*/
<div class="plus3">
  <div class="plus3__left"></div>
  <div class="plus3__right"></div>
  <div class="plus3__top"></div>
  <div class="plus3__bottom"></div>
</div>

/*CSS*/
.plus3 {
  border: 1px solid #ddd;
  display: inline-block;
  padding: 5px;
  position: relative;
}

.plus3__left,
.plus3__right,
.plus3__top,
.plus3__bottom {
  background-color: #000;
  height: 1px;
  position: absolute;
  width: 40%;
}

.plus3__left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plus3__right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.plus3__top {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.plus3__bottom {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

這段代碼中，我們使用了四個div元素，分別代表加號的上下左右四個部分。我們將四個元素定位為絕對定位，並使用transform屬性，使它們水平和垂直居中對齊。

四、實現動態的加號

最後，我們來看一個實現動態加號的例子。

/*HTML*/
<div class="plus4"></div>

/*CSS*/
.plus4 {
  background-color: #000;
  height: 1px;
  width: 40%;
  position: relative;
}

.plus4::before,
.plus4::after {
  background-color: #000;
  content: "";
  height: 1px;
  position: absolute;
  width: 40%;
  top: 50%;
}

.plus4::before {
  left: 0;
  transform: translateY(-50%) rotate(45deg);
}

.plus4::after {
  right: 0;
  transform: translateY(-50%) rotate(-45deg);
}

.plus4:hover::before,
.plus4:hover::after {
  width: 60%;
}

這段代碼中，我們使用了:hover偽類，控制加號的動態效果。我們使用before和after偽元素，分別代表加號的左上和右下兩個部分。我們將before偽元素旋轉45度，並將after偽元素旋轉-45度，使它們組成加號的樣式。我們使用:hover偽類，為before和after偽元素添加了60%的長度，實現了加號伸展的效果。