您现在的位置是：网站首页> 编程资料编程资料

css实现“加号”效果的实例代码纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）CSS3 linear-gradient线性渐变生成加号和减号的方法

2023-10-19 310人已围观

简介这篇文章主要介绍了css实现“加号”效果的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

实现下图的加号效果：

若想实现这个效果，只需一个div元素即可搞定。

需要用到css的为了before和after，以及border特性。

先设置一个div便签

再设置一个边框：

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

此时边框是这样的：

初始图片

我们可以利用伪类before和其border-top来设置一个“横”：

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

注意我们使了绝对定位。此时变成了这样：

参照上面，我们可以使用after伪类和border-bottom设置一个“竖”：

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

在加上hover伪类，设置鼠标悬浮上去的颜色：

 .add:hover { color: blue; }

最终的样式：

finally-picture

当鼠标悬浮上去是，会变色：

change-color

大家可以在这里查看效果：

总结

以上所述是小编给大家介绍的css实现“加号”效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！