如何用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%的长度，实现了加号伸展的效果。