css3 渐变 圆形进度条

CSS3是一种用于网页设计的语言，通过它可以实现许多动态和漂亮的效果，其中就包括渐变和圆形进度条。下面我们通过pre标签来展示这些代码：

/* 创建一个渐变背景 */background: linear-gradient(to right, red , orange);
    /* 创建一个圆形进度条 */border-radius: 50%;
    position: relative;
    width: 80px;
    height: 80px;
    background: linear-gradient(to right, /* 完成进度部分颜色 */green 50%, /* 未完成进度部分颜色 */ grey 50%),/* 中间覆盖部分颜色 */white;
    overflow: hidden;
    /*创建一个圆环*/&
    :before, &
:after {
    content: "";
    position: absolute;
    background-color: white;
}
    &
:before {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border-radius: 100% 0 0 100%;
    transform-origin: right center;
    animation: spin-left 2s linear infinite;
}
    &
:after {
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0;
    transform-origin: left center;
    animation: spin-right 2s linear infinite;
}
/*动画效果*/@keyframes spin-left {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(-180deg);
}
}
@keyframes spin-right {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(180deg);
}
}
    

使用这些CSS3代码，我们就可以轻松地创建出一个漂亮的渐变和圆形进度条效果。通过调整颜色和尺寸，还可以用于不同场景和需求。快来试试吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！