css 渐变实现进度条动画
时间：2023-05-05 04:19:20 阅读：256012 作者：661
<!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 背景定位实现思路：先用渐变调出颜色背景，再用动画实现运动===================================== */.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>
版权声明：该文观点仅代表作者本人。处理文章：请发送邮件至 三1五14八八95#扣扣.com 举报，一经查实，本站将立刻删除。