本篇文章来给大家通过代码示例介绍一下使用纯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伪类，设置鼠标悬浮上去的颜色：
最终的样式：
当鼠标悬浮上去是， 会变色：
更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全
更多相关教程请访问 CSS3最新版参考手册
以上就是纯css实现加号“+”效果（代码示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1615358.html
微信扫一扫 
支付宝扫一扫 
