马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
效果演示
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>斑马线进度条</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
:root{--col-primary:#d0e8fb;--col-secondary:#1b2342;--col-bg:#9055ff;--height:3rem;--stripes:4;--radius:2rem;--position:116px;--velocity:6s;--shadow-color:210deg 41% 12%;--shadow-elevation-high:0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34)}html,body{box-sizing:border-box;min-height:100vh;display:flex;align-content:center;justify-content:center;align-items:center;background-color:var(--col-bg)}.container{height:100%;display:flex;justify-content:center;align-items:center}.container .progress{min-height:var(--height);border-radius:var(--radius);width:calc(var(--position) * var(--stripes));box-shadow:var(--shadow-elevation-high);background-color:var(--col-secondary);background-image:repeating-linear-gradient(45deg,transparent,transparent 36px,var(--col-primary) 32px,var(--col-primary) 65px);-webkit-animation:progress var(--velocity) linear infinite;animation:progress var(--velocity) linear infinite}@-webkit-keyframes progress{from{background-position-x:0}to{background-position-x:calc(var(--position) * var(--stripes))}}@keyframes progress{from{background-position-x:0}to{background-position-x:calc(var(--position) * var(--stripes))}}
</style>
</head>
<body>
<div class='container'>
<div class='progress'> </div>
</div>
</body>
</html>
| 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
