类型：动效 · 分类：Anime.js 动效 · 收录：2026-09-19 · 源码：会员可见
[hidecontent type="vip1"]源码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;background:#0d0d0f;overflow:hidden}body>*{max-width:100%}@media(prefers-color-scheme:light){html,body{background:#f6f7f8}}</style></head><body><!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;
background:#0d0d0f;overflow:hidden;font-family:system-ui,-apple-system,'PingFang SC',sans-serif;color:#f5f5f5}
.wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;max-width:92%}
.box{width:74px;height:74px;border-radius:18px;background:linear-gradient(135deg,#e5a34a,#c88038)}
.blue{background:linear-gradient(135deg,#60a5fa,#3b6ef5)}
.dim{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.tip{position:fixed;left:0;right:0;bottom:10px;text-align:center;font-size:11px;color:#6a707a;letter-spacing:.04em}
@media(prefers-color-scheme:light){html,body{background:#f6f7f8;color:#272b33}.dim{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}}
</style></head><body><div class="wrap" style="flex-direction:column;gap:9px"><div style="display:flex;align-items:center;gap:10px"><span style="width:92px;font-size:11px;color:#898989;text-align:right">linear</span><div class="box" id="e0" style="width:44px;height:26px;border-radius:9px"></div></div><div style="display:flex;align-items:center;gap:10px"><span style="width:92px;font-size:11px;color:#898989;text-align:right">easeInOutQuad</span><div class="box" id="e1" style="width:44px;height:26px;border-radius:9px"></div></div><div style="display:flex;align-items:center;gap:10px"><span style="width:92px;font-size:11px;color:#898989;text-align:right">easeOutBack</span><div class="box" id="e2" style="width:44px;height:26px;border-radius:9px"></div></div><div style="display:flex;align-items:center;gap:10px"><span style="width:92px;font-size:11px;color:#898989;text-align:right">easeOutElastic</span><div class="box" id="e3" style="width:44px;height:26px;border-radius:9px"></div></div><div style="display:flex;align-items:center;gap:10px"><span style="width:92px;font-size:11px;color:#898989;text-align:right">easeInOutBounce</span><div class="box" id="e4" style="width:44px;height:26px;border-radius:9px"></div></div></div><script src="https://skillx.work/wp-content/uploads/yunjing/media/lib/anime.min.js"></script><script>anime({targets:'#e0',translateX:[0,150],duration:1500,easing:'linear',loop:true,direction:'alternate',endDelay:200});anime({targets:'#e1',translateX:[0,150],duration:1500,easing:'easeInOutQuad',loop:true,direction:'alternate',endDelay:200});anime({targets:'#e2',translateX:[0,150],duration:1500,easing:'easeOutBack',loop:true,direction:'alternate',endDelay:200});anime({targets:'#e3',translateX:[0,150],duration:1500,easing:'easeOutElastic',loop:true,direction:'alternate',endDelay:200});anime({targets:'#e4',translateX:[0,150],duration:1500,easing:'easeInOutBounce',loop:true,direction:'alternate',endDelay:200});</script></body></html></body></html>