html中加号实体,纯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伪类，设置鼠标悬浮上去的颜色：

最终的样式：

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

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全

更多相关教程请访问 CSS3最新版参考手册

html中加号实体,纯css实现加号“+”效果（代码示例）相关推荐

Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
快递信息css3手风琴代码_用纯CSS实现手风琴效果的示例代码
昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求.需要把一组图片形成手风琴的展示效果.认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求.今天趁着空闲时间稍微梳理了一下 ...
HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
近来研究了一下镂空效果. background-clip: text 背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都 ...
html 点击加号展开代码,纯css实现加号一个的效果（代码示例）
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
php立方体相册源码,纯CSS实现3D的代码（正方体、动态立体图片册、平面的星空）...
本篇文章所说的内容是纯CSS实现3D的代码(正方体.动态立体图片册.平面的星空),代码都非常详细,有需要的朋友可以看一下. 一.正方体我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面 ...
纯CSS实现弹幕效果
纯CSS实现弹幕效果动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果--弹幕- 当你在阅读.看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复 ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
css3波浪纹路_纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

html中加号实体,纯css实现加号“+”效果（代码示例）

html中加号实体,纯css实现加号“+”效果（代码示例）相关推荐

最新文章

热门文章