背景颜色填充动画结束偏移
问题描述:
我想在用户点击它时“填充”一个圆。主要问题是,当动画结束时,它会稍微偏移一点。我试图添加一个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如果有人宁愿使用。
答
我认为,问题来自15px的50%顶部的dimensiion - >给出一个分数大小
我已经改变了大小16px的,那就是即便:
#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: 16px;
height: 16px;
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" -->
就是这样!感谢您指出了这一点 –