Question

我正在创建一个CSS3加载图标效果，而不是使用GIF。我已经创建了加载图标效果，但我无法使其成为圆圈。它在正方形而不是圆形旋转。 Border-radius不能使用border-image属性？

HTML

<div id="progress">
    <span class="spinner-icon"></span>
</div>

CSS

#progress {
  pointer-events: none;
}

#progress .spinner-icon {
  width: 30px;
  height: 30px;
  display:block;
  border: solid 2px transparent;
  border-radius:50%;
  -webkit-animation: progress-spinner 600ms linear infinite;
          animation: progress-spinner 600ms linear infinite;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1; 
}

#progress  {
  position: absolute;
}


@-webkit-keyframes progress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes progress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

http://jsfiddle.net/44athund/3/

Answer 1

这不利于边界图像。半径将应用于对象，但不会遵循具有渐变的边框图像。

根据你的具体情况，我在这里创造了一个小提琴https://jsfiddle.net/a9dpg582/1/我认为这就是你所追求的。

#progress {
    pointer-events: none;
    position: relative;
}
#progress .spinner-icon::after {
    content: '';
    border-radius: 50%;
    background-color: #FFF;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
}
#progress .spinner-icon {
    width: 30px;
    height: 30px;
    display: block;
    background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-radius: 50%;
    -webkit-animation: progress-spinner 600ms linear infinite;
    animation: progress-spinner 600ms linear infinite;
}
#progress {
    position: absolute;
    border-radius: 50%;
}
@-webkit-keyframes progress-spinner {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes progress-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

border-radius不使用border-image输出

1 个答案: