css加号图标_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加号图标_css样式画加号和减号（+和-）效果相关推荐

css特效——纯css绘制图标：带框的加号（添加按钮）、三横（三道杠）、带圈点（双层圆点）
带框的加号(添加按钮) 鼠标悬浮时会高亮 <template><div style="padding: 20px"><div class=" ...
css文本换行_CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法 1)).首行缩进文本 <div style='text-indent:2em'& ...
css 不换行_CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法 1)).首行缩进文本 2)).文本对齐方式 3)).字间距 4)).文本间距 5)). ...
html+css基础笔记_CSS样式_part1_2
1.CSS背景样式属性: background-color:背景色 background-image:背景图 url背景地址,默认水平垂直铺满背景图写法:background-image: url ...
css 边缘闪光_CSS样式表完成可以控制的闪烁效果
一段文本或一张图片,它的周围有一圈光晕,这圈光晕每一秒钟闪烁一次,而当鼠标移到上面时,立即停止闪烁,当鼠标移开时又继续闪烁.这种效果用于那些需要特别引起别人注意的内容上(如:警示.报告新增内容等),能 ...
css如何调整红心样式_css3实现的红心跳动效果
[HTML] 纯文本查看复制代码蚂蚁部落 .box { width: 180px; height: 160px; margin: 200px auto; position: relative; a ...
CSS 滚动条: 自定义滚动条样式
CSS 滚动条: 自定义滚动条样式文章目录 CSS 滚动条: 自定义滚动条样式前言正文 overflow & ::-webkit-scrollbar 实际效果(自定义滚动条.隐藏滚动条) ...
css加号图标_一步步打造自己的纯CSS单标签图标库
原标题:一步步打造自己的纯CSS单标签图标库作者:深海鱼在掘金原文:https://juejin.im/post/5a1c21c1f265da430b7af6e5 图标作为网页设计中的一部分,其在 ...
css加号图标_一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
css加号图标_DIV，CSS如何实现“加减号”“显示隐藏”效果
展开全部 (1)1.js方法,这是一般网站常用的方法. 优点:兼容性好,易管理. 实现方式:按钮32313133353236313431303231363533e58685e5aeb931333337 ...

css加号图标_css样式画加号和减号（+和-）效果

css加号图标_css样式画加号和减号（+和-）效果相关推荐

最新文章

热门文章