纯css实现加号效果
时间：2023-03-31 13:10:28
CSS
实现加号效果如下图所示：想要实现这种效果，只需要一个div元素即可。需要使用css进行前后和边框功能。先设置一个divnote
然后设置一个border:.add{border:1pxsolid;宽度：100px；高度：100px；颜色：#ccc；过渡：彩色.25s；position:relative;}这时候的border是这样的：我们可以利用伪类before和它的border-top设置一个“水平”：.add::before{content:'';位置：绝对；左：50%；顶部：50%；宽度：80px；左边距：-40px；边距顶部：-5px；border-top:10pxsolid;}注意我们使用了绝对定位。此时就变成了这样：参考上面，我们可以使用after伪类和border-bottom来设置一个“垂直”：.add::after{content:'';位置：绝对；左：50%；顶部：50%；高度：80px；左边距：-5px；边距顶部：-40px；border-left:10pxsolid;}添加hover伪类，设置鼠标悬停时的颜色：最终样式：鼠标悬停时，会改变颜色：web前端技术分享点击：加入
