怎么使用纯 CSS 来实现一个加号效果? 下面本篇文章就来给大家介绍一下使用纯 CSS 实现加号效果的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
实现下图的加号效果:
若想实现这个效果, 只需一个 div 元素即可搞定.
需要用到 CSS 的为了 before 和 after, 以及 border 特性.
先设置一个 div 便签
<div class="add"></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 伪类, 设置鼠标悬浮上去的颜色:
最终的样式:
当鼠标悬浮上去是, 会变色:
本文转载自: https://segmentfault.com/a/1190000017030676
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/16143.html