css3加号图标_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;

}

最终的样式：

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

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

总结

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

css3加号图标_css实现“加号”效果的实例代码相关推荐

html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
php柱状图html代码,html5生成柱状图(条形图)效果的实例代码
下面小编就为大家分享一篇html5生成柱状图(条形图)效果的实例代码.小编觉得挺不错的,现在分享给大家,也给大家一个参考.一起跟随小编过来看看吧 XML/HTML Code复制内容到剪贴板 (func ...
android 仿ios动画效果代码,Android仿IOS上拉下拉弹性效果的实例代码
用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还 ...
css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
python下雪的实例_javascript实现下雪效果【实例代码】
原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 ...
html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
720 全景 css3源码,CSS3如何实现全景图的动画效果（附代码）
本篇文章给大家带来的内容是关于CSS3如何实现全景图的动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 基本代码 html代码: 首先定义一些基本的样式和动画:.pa ...
html动态散花代码,IOS实现签到特效(散花效果)的实例代码
本文讲述了IOS实现签到特效(散花效果)实例代码.分享给大家供大家参考,具体如下: 散花特效 #import /// 领取奖励成功 @interface RewardSuccess : NSObjec ...
html实现文字隐藏展开特效代码,js实现点击展开隐藏效果（实例代码）
js实现点击展开隐藏效果(实例代码) 发布时间:2020-09-20 10:47:49 来源:脚本之家阅读:69 作者:laozhang 本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码 ...

css3加号图标_css实现“加号”效果的实例代码

css3加号图标_css实现“加号”效果的实例代码相关推荐

最新文章

热门文章