欢迎光临
我们一直在努力

css 渐变实现进度条动画

<!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

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。