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完成“加号”实际效果的案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!