关闭按钮效果的实现
.close{
display: inline-block;
width: 14px;
height: 1px;
background: #ccc;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.close:after {
content: '';
display: block;
width: 14px;
height: 1px;
background: #ccc;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
箭头的实现
arrow:after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-top: 1px solid #656565;
border-right: 1px solid #656565;
transform: rotate(-45deg);
-webkit-transform: rotate(-130deg);
}
在遇到要实现这样的效果
.box {
margin: 100px 0 0 100px;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
background-image: repeating-radial-gradient(skyblue 0px, skyblue 5px, #fff 5px, #fff 10px);
}
.box:hover {
}
