纯css实现加号“+”效果（代码示例）(2)-木庄网络博客

2022-03-25 14:50:14 PHP中文网 JavaScript 百度已收录

注意我们使了绝对定位。此时变成了这样：

参照上面，我们可以使用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最新版参考手册

以上就是纯css实现加号“+”效果（代码示例）的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

svg和css3实现环形渐变进度条的代码示例

css该如何隐藏文本框

深入了解css中的will-change属性

css如何使用:indeterminate选择器

css如何设置滚动条颜色

css nav 是什么意思

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 纯css实现加号“+”效果（代码示例）

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

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论