css 渐变实现进度条动画
来源:互联网 浏览:152次 时间:2023-04-08
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">/* =====================================运用知识:背景图渐变色 linear-gradient、animation动画、background-position 背景定位实现思路:先用渐变调出颜色背景,再用动画实现运动======香港vps=============================== */.box{width: 300px; height: 40px; border: 1px black solid; margin: 100px auto;background-image: linear-gradient(to right top,#999 25%,#080 25%,#080 50%,#999 50%,#999 75%,#080 75%);background-size: 30px 40px; animation: jindu 5s infinite linear;}@keyframes jindu{from{background-position: 0 0;}to{background-position: 300px 0;}}</style></head><body><div class="box"></div></body></html> 95373915