<div class="main-form-block-radio">
<label class="main-form-label">数据库配置</label>
<div class="main-form-block-radio">
<label class="main-step3-radio" for="main-step3-radio-local">
<input type="radio" class="main-form-radio" id="main-step3-radio-local" value="本地" name="sql" checked>
<span></span>
本地
</label>
<label class="main-step3-radio" for="main-step3-radio-distributed">
<input type="radio" class="main-form-radio" id="main-step3-radio-distributed" value="分布式" name="sql">
<span></span>分布式
</label>
</div>
</div>
.main-form-block-radio {
display: flex;
display: -webkit-flex;
flex-direction: row;
margin-bottom:10px;
}
.main-form-block-radio .main-form-label {
text-align:left;
}
.main-form-radio {
display:none;
}
.main-step3-radio {
position:relative;
height:38px;
padding:0 20px 0 30px;
line-height: 38px;
}
.main-form-radio[type="radio"]+span {
display:inline-block;
border-radius:50%;
width:20px;
height:20px;
border:1px solid #929292;
box-shadow: 1px 1px 1px #cac9c9;
color:#929292;
position:absolute;
top:8px;
left:0;
transform: scale(1);
}
.main-form-radio[type="radio"]:checked + span:after {
content:'';
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:#1e9fff;
left:5px;
top:5px;
}
.main-form-radio[type="radio"]:checked + span{
border:1px solid #1e9fff;
animation: mymove .5s 1
}
@keyframes mymove {
0% { transform: scale(0); }
25% { transform: scale(0.25) }
75% { transform: scale(1.25) }
100% { transform: scale(1) }
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2641bceea94bc8a42049b90de7dc3a8c.png)