css完成“加号”实际效果的案例编码

日期：2021-03-01 类型：科技新闻 

关键词：网页设计，移动端网页设计，大一网页设计作业成品，网页编辑软件，网页在线编辑

完成下图的加号实际效果：

若想完成这个实际效果， 只需1个div元素便可搞定。

必须用到css的以便before和after， 和border特点。

先设定1个div便签

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

再设定1个边框：

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

此时边框是这样的：

大家能够运用伪类before和其border-top来设定1个“横”：

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

留意大家使了肯定精准定位。 此时变为了这样：

参考上面， 大家可使用after伪类和border-bottom设定1个“竖”：

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

在再加hover伪类，设定电脑鼠标飘浮上去的色调：

.add:hover {
  color: blue;
}

最后的款式：

当电脑鼠标飘浮上去是， 会变色：

大伙儿能够在这里查询实际效果：

https://jsbin.com/quvidap/edit?html,css,output
 

总结

以上所述是网编给大伙儿详细介绍的css完成“加号”实际效果的案例编码，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！

上一篇：css挑选器4大类：基础、组成、特性、伪类 返回下一篇：没有了