圆形线形渐变 - CSS

by redky

HTML

<div class="box"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(90deg);
}
.box:before {
    content:'';
    display: block;
    height: 50px;
    width: 100px;
    padding:10px;
    /* 类 border 尺寸 */
    padding-bottom: 0;
    box-sizing: border-box;
    border-radius: 50px 50px 0 0;
    background: -webkit-linear-gradient(right, #fff 0%, #fff 100%), -webkit-linear-gradient(right, #74baff 0%, #079fff 100%);
    background-clip: content-box, padding-box;
}
.box:after {
    content:'';
    display: block;
    height: 50px;
    width: 100px;
    padding:10px;
    padding-top: 0;
    box-sizing: border-box;
    background: -webkit-linear-gradient(right, #fff 0%, #fff 100%), -webkit-linear-gradient(right, #74baff 0%, #fff 60%);
    background-clip: content-box, padding-box;
    border-radius: 0 0 50px 50px;
}
.box {
    -webkit-animation: rotate 1.7s cubic-bezier(.12, .55, .45, .93) infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(90deg);
    }
    100% {
        -webkit-transform: rotate(450deg);
    }
}