纯css3实现的圆形进度条

来源：互联网发布：淘宝客怎样推广店铺编辑：程序博客网时间：2024/04/28 00:05

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">.spinner{ /*半透明蓝色的圆弧，形成进度条的背景，透明的半圆弧和蓝色的半圆弧交替旋转构成进度条*/font-size: 20px;width: 1em;height: 1em;border-radius: 50%;box-shadow:inset 0 0 0 .1em rgba(58, 168, 237, .2);}.spinner i {  /*创造了一个透明矩形的一半*/position:absolute;width:1em;height:1em;clip: rect(0, 1em, 1em, .5em);animation: spinner-circle-clipper 1s ease-in-out infinite;}@keyframes spinner-circle-clipper {0% {transform: rotate(0deg);}100% {transform: rotate(180deg);}}.spinner i:after { /*l蓝色的半圆弧*/position:absolute;clip: rect(0, 1em, 1em, .5em);width:1em;height:1em;content: '';animation: spinner-circle 1s ease-in-out infinite;border-radius: 50%;box-shadow:inset 0 0 0 .1em #3aa8ed;}@keyframes spinner-circle {    0% {        transform: rotate(-180deg);    }    100% {        transform: rotate(180deg);    }}</style></head><body><div class="spinner"><i></i></div></body></html>

主要由三部分构成，半透明圆弧，透明矩形的一半，蓝色半圆弧。透明半圆弧和蓝色半圆弧交替旋转。

这里需要注意的是css3中的clip，用来实现剪裁。

0 0