有人可以改进我的微调器吗?我想要一端粗一点,另一端细一点。我尝试了一些但没有用。
<div id="data-loader">
<div class="loader">
<div class="blue"></div>
</div>
</div>
#data-loader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#ffffff;
}
.loader {
left: 50%;
top: 50%;
position: fixed;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius:50%;
}
.loader .blue {
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
border-top:4px solid #7199C1;
border-right:3px solid #7199C1;
border-bottom:1px solid #7199C1;
border-radius:50%;
-webkit-animation: spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
animation: spin 1s linear infinite;
-webkit-animation-name: spinner;
-moz-animation-name: spinner;
}
@-webkit-keyframes spinner
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinner
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
我在 div 的顶部、右侧和底部设置了边框。边界半径为 50%,
最佳答案
我从来没有在这里回答过,但试着把你的border-left: 4px solid transparent
。
将你的border-top
设置为4px solid #color
。如果你想在末端增加厚度,将 10px
放在 border-left
和 border-top
上。
关于html - CSS 微调器样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35106641/