Question

有人可以增强我的旋转器。我希望一端更厚，另一端要薄。我试了一下但是没用。

<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％，

http://plnkr.co/edit/UKJZzDsDyfHxknRu12ZP?p=preview

Answer 1

我从来没有在这里回答，但试着把你的border-left: 4px solid transparent。

将border-top设为4px solid #color。如果您想要更多厚度，请将10px放在border-left和border-top上。

Answer 2

如果您想要的效果是我认为您想要的效果，那么您就是如此，如此接近。

通过更改这三个数字，动画在开始时会变粗，并在结束时结束。

border-top:3px solid #7199C1; border-right:6px solid #7199C1; border-bottom:6px solid transparent;

CSS微调器样式

2 个答案: