目前图标:加号、减号、对号、向下箭头、实心三角箭头
前两个图标都加了hover状态和禁用状态效果
1、加号
通过定位以及::before和::after相结合实现
效果:
.addBtn{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #D4D7D7;
position: relative;
cursor: pointer;
&:hover{ // hover状态
background-color: #00C8C8;
}
&.disabledBtn{ // 禁用状态
background-color: #E4E4E4;
cursor: not-allowed;
}
}
.addBtn::before{ // 加号的横线
content: '';
width: 8px;
height: 2px;
background-color: #fff;
position: absolute;
top: 7px;
left: 4px;
}
.addBtn::after{ // 加号的竖线
content: '';
width: 2px;
height: 8px;
background-color: #fff;
position: absolute;
top: 4px;
left: 7px;
}
2、减号
通过定位以及::before实现
效果:
.subBtn{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #D4D7D7;
position: relative;
cursor: pointer;
&:hover{
background-color: #00C8C8;
}
&.disabledBtn{
background-color: #E4E4E4;
cursor: not-allowed;
}
}
.subBtn::before{
content: '';
width: 8px;
height: 2px;
background-color: #fff;
position: absolute;
top: 7px;
left: 4px;
}
3、对号
对号用到了transform和定位
效果:
.checkMark{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #D4D7D7;
position: relative;
cursor: pointer;
&:hover{ // hover状态
background-color: #00C8C8;
}
&.disabledBtn{ // 禁用状态
background-color: #E4E4E4;
cursor: not-allowed;
}
}
.checkMark::before{
content: '';
width: 6px;
height: 1px;
background-color: #fff;
position: absolute;
top: 10px;
left: 2px;
transform: rotate(45deg);
}
.checkMark::after{
content: '';
width: 11px;
height: 1px;
background-color: #fff;
position: absolute;
top: 8px;
left: 5px;
transform: rotate(-45deg);
}
4、向下箭头
效果
.arrow{
width: 26px;
height: 26px;
// 空心三角
&::before{
content: '';
display: inline-block;
border-top: 2px solid;
border-right: 2px solid;
width: 12px;
height: 12px;
border-color: #97A2B6;
transform: rotate(-225deg);
// margin: 5px auto auto 10px
}
}
5、实心三角箭头
效果:
.arrow{
width: 26px;
height: 26px;
// 实心三角
&::before, &::after{
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #97A2B6;
}
&::before{
border-bottom-color: white;
}
}