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伪类，设置鼠标悬浮上去的颜色：

.add:hover {color: blue;
}

最终的样式：

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

大家可以在这里查看效果：
https://jsbin.com/quvidap/edit?html,css,output

css实现“加号”效果相关推荐

html 点击加号展开代码,纯css实现加号一个的效果（代码示例）
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
html css鼠标手型效果
html css鼠标手型效果 style="cursor:pointer" 转载于:https://blog.51cto.com/chengang/1288597
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html 星空效果,使用css实现星空效果！
css实现星空效果 html, body { height: 100%; overflow: hidden; } body { width: 100%; height:100%; background ...
《javaScript100例|03》自写javaScript+CSS轮显效果
目录效果图代码示例源码地址:自写Js+CSS轮显效果.rar-互联网文档类资源-CSDN下载https://download.csdn.net/download/weixin_41937552/ ...

css实现“加号”效果

css实现“加号”效果相关推荐

最新文章

热门文章