编辑图标css3
效果图
//React
import React, {Component} from "react";
import "./Feedback.component.css";
export default class Feedback extends Component {
render() {
return (
<React.Fragment>
<div className="blue-circle">
<div className="white-dialog">
<div className="blue-point"></div>
</div>
</div>
<p className="feedback-words">反馈</p>
</React.Fragment>
);
}
}
//css
.blue-circle{
display: inline-flex;
justify-content: center;
align-items: center;
transition: 1s;
width: 36px;
height: 36px;
background-color: #1890FF;
box-shadow: 0 2px 4px 0 rgba(24,144,255,0.50);
border-radius: 50%;
cursor: pointer;
}
.blue-circle:hover{
transform: scale(1.02);
box-shadow: 0 3px 6px 0 rgba(24,144,255,0.50);
}
.white-dialog{
position: relative;
width: 24px;
height: 20px;
background-color: #FFFFFF;
border-radius: 12px;
}
.white-dialog:after{
content:"";
position: absolute;
top:14px;
left:0px;
width: 0px;
height: 0px;
border-bottom: 8px solid white;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
transform: rotate(198deg);
}
.blue-point{
content: '';
position: absolute;
top:46%;
left: 46%;
z-index: 10;
width: 2px;
height:2px;
background: #1890FF;
border-radius: 50%;
}
.blue-point:before{
content: '';
position: absolute;
z-index: 10;
right: 5px;
width: 2px;
height: 2px;
background: #1890FF;
border-radius: 50%;
}
.blue-point:after{
content: '';
position: absolute;
z-index: 10;
left: 5px;
width: 2px;
height: 2px;
background: #1890FF;
border-radius: 50%;
}
.feedback-words{
display: block;
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(0,0,0,0.65);
margin-top:4px;
}
.feedback-container{
display: flex;
flex-wrap:wrap;
justify-content: center;
width: 40px;
}
.feedback{
display: inline-block;
width: 36px;
height: 36px;
background-image: url("/common/feedback.svg");
}
.feedback:hover{
transform: scale(1.02);
box-shadow: 0 3px 6px 0 rgba(24,144,255,0.50);
}