css实现“加号”效果的实例代码

我来为您讲解一下使用CSS实现“加号”效果的攻略。

我来为您讲解一下使用CSS实现“加号”效果的攻略。

一、通过动态伪类实现

HTML结构：

<div class="box">
  <div class="plus"></div>
</div>

CSS样式：

.box {
  width: 50px;
  height: 50px;
  background-color: #f2f2f2;
  position: relative;
}

.plus {
  width: 15px;
  height: 2px;
  background-color: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 15px;
  background-color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.plus::before {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.plus:hover::before,
.plus:hover::after {
  height: 25px;
}

代码实现思路：

通过在伪类 ::before 和 ::after 上设置相应的样式，来实现鼠标悬浮时 + 变成 × 的效果。

二、通过CSS3动画实现

HTML结构同上。

CSS样式：

.box {
  width: 50px;
  height: 50px;
  background-color: #f2f2f2;
  position: relative;
}

.plus {
  width: 15px;
  height: 2px;
  background-color: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.plus:hover {
  transform: translate(-50%, -50%) rotate(45deg);
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 15px;
  background-color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
  cursor: pointer;
  transition: all .2s ease-in-out;
}

.plus:hover::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.plus:hover::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

代码实现思路：

通过设置 transform: translate(-50%, -50%) rotate(45deg)，使 + 变成斜着的 ×；通过设置 transform: translate(-50%, -50%) rotate(-45deg); 和 transform: translate(-50%, -50%) rotate(45deg);，使 × 旋转变成 +，从而实现加号、减号效果的切换。

以上就是通过CSS实现“加号”效果的完整攻略，希望能对您有所帮助。