0
我想在用戶點擊它時「填充」一個圓。主要問題是,當動畫結束時,它會稍微偏移一點。我試圖添加一個margin-top: -1px
它,但它的底部然後偏移!背景顏色填充動畫結束偏移
我接受任何讓動畫更平滑的建議,但我的主要問題是:爲什麼最終結果偏離頂端一小點,我該如何解決它?
#searchOptions label {
display: inline-block;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
color: #000;
font-weight: 400;
margin-right: 40px;
}
#searchOptions label .circle {
display: inline-block;
position: relative;
border: 2px solid #000;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 12px;
}
#searchOptions label .circle:before {
display: none;
position: absolute;
content: '';
background-color: #000;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 2px;
height: 2px;
}
#searchOptions label .txt {
position: relative;
top: -3px;
}
#searchOptions input[type=radio] {
height: 0;
width: 0;
opacity: 0;
}
#searchOptions input[type=radio]:checked + label .circle:before {
display: block;
width: 100%;
height: 100%;
animation: fillRadio ease-in 1s;
}
@-webkit-keyframes fillRadio {
0% {
top: 50%;
transform: translateY(-50%);
width: 1%;
height: 1%;
}
100% {
top: 0%;
transform: translateY(0%);
width: 100%;
height: 100%;
}
}
<div id="searchOptions">
<input type="radio" name="searchType" value="option1" id="option1" />
<label for="option1"><span class="circle"></span> <span class="txt">Option 1</span>
</label>
<input type="radio" name="searchType" value="option2" id="option2" />
<label for="option2"><span class="circle"></span> <span class="txt">Option 2</span>
</label>
</div>
<!-- id="searchOptions" -->
Here's a JSFiddle如果有人寧願使用。
就是這樣!感謝您指出了這一點 –