海阔天空

手机扫码查看

linear-gradient：线性渐变
background-image: linear-gradient(to right,red, yellow, blue);

radial-gradient：径向渐变
background-image: radial-gradient(red, yellow, blue);

css进度条
<style>
.progress{width: 300px;height: 30px;border: 1px solid;background-size: 30px 30px;margin: 100px auto;
background-image: linear-gradient(to right top,#999 25%,#080 25%,#080 50%,#999 50%,#999 75%,#080 75%);
animation: moves infinite 3s linear;
}
@keyframes moves{
0%{background-position: 0 0;}
100%{background-position: 300px 0;}
}
</style>
<div class=”progress”></div>