Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
<script src="https://cdn.bootcdn.net/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <svg id="loader" class="animated" viewBox="-50 -50 100 100" style="max-width: 600px; z-index:999; width:100vw;"> <!-- <g id="grid" stroke="rgba(255,255,255,0.2)" stroke-width=".1"> <path d="M-50 -40 H50 M-50 -30 H50 M-50 -20 H50 M-50 -10 H50 M-50 10 H50 M-50 20 H50 M-50 30 H50 M-50 40 H50 M-40 -50 V50 M-30 -50 V50 M-20 -50 V50 M-10 -50 V50 M10 -50 V50 M20 -50 V50 M30 -50 V50 M40 -50 V50" /> <path d="M-50 0 H50" stroke-width="0.3" /> <path d="M0 -50 V50" stroke-width="0.3" /> </g> --> <g id="steps" stroke="rgba(255,255,255,0.2)" stroke-width="1" fill="none"> <path d="M-25,30 -15,30 -15,20" /> <path d="M-15,20 -5,20 -5,10" /> <path d="M-5,10 5,10 5,0" /> <path d="M5,0 15,0 15,-10" /> <path d="M15,-10 25,-10 25,-20" /> <path d="M25,-20 35,-20 35,-30" /> </g> <circle id="ball" fill="goldenrod" cx="0" cy="-12" r="4" /> <!-- <g id="points" fill="hsl(25,100%,50%)"> <circle cx="-20" cy="0" r="1" /> <circle cx="0" cy="0" r="1" /> <circle cx="20" cy="0" r="1" /> </g> --> <!-- <g id="arc" fill="none"> <path id="arc" d="M-20 0 A20 20, 0, 0 1, 20 0" stroke="rgba(255,255,255,0.4)" stroke-linecap="round" style="stroke-width:7;" /> <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="-360 0 0" begin="4s" dur="10s" repeatCount="indefinite" /> </g> --> <!-- <g id="dots" fill="whitesmoke"> <circle cx="-14" cy="-14" r="3.5" /> <circle cx="-14" cy="14" r="3.5" /> <circle cx="14" cy="-14" r="3.5" /> <circle cx="14" cy="14" r="3.5" /> <circle cx="0" cy="-20" r="3.5" /> <circle cx="0" cy="20" r="3.5" /> <circle cx="20" cy="0" r="3.5" fill="#fff" /> <circle cx="-20" cy="0" r="3.5" /> <rect x="-5" y="-5" width="10" height="10" fill="rgba(255,255,255,0.4)" stroke="whitesmoke" stroke-width="0.2" /> <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" begin="0s" dur="3s" repeatCount="indefinite" /> </g> --> <!-- <g id="animationpath"> <path id="wire" fill="none" stroke-miterlimit="10" stroke="whitesmoke" stroke-width="0.4" stroke-dasharray="5 5" opacity="0.3" d="M0-42.48c6.5-0.01,11.5-0.02,18.5,1.98s10,9,14,12s9,8,10,13s0,9,0,16s4,7,3,14s-5,9-10,13s-3.85,7-11.42,13 S5.5,43.92,0,43.92s-6.88,3.52-17.19,0.55S-32.5,37.5-37.5,27.5s-4-16-5-21s-5-11-3-16s8-10,10-16s2.47-11,11.24-14 S-7.5-42.47,0-42.48z" /> <polygon id="arrow" points="0,-5 -5,5 5,5" style="fill:rgba(255,255,255,0.3);stroke:whitesmoke;stroke-width:0.2; transform:rotateZ(90deg);"> </polygon> </g> <animateMotion xlink:href="#arrow" fill="freeze" begin="0s" dur="4.6s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#wire"></mpath> </animateMotion> --> </svg>
css
body { background: #1e1f26; display: grid; align-content: center; justify-content: center; width: 100%; height: 100vh; } svg #steps path:last-child { opacity: 0; }
JavaScript
let fullframe = 0.7; let tl = gsap.timeline({ repeat: -1, yoyo: false, paused: false }); tl.to("#steps path", { duration: fullframe, xPercent: -100, yPercent: 100, ease: Linear.easeNone }); tl.to( "#steps path:first-child", { duration: fullframe, opacity: 0, ease: Linear.easeNone }, "<" ); tl.to( "#steps path:last-child", { duration: fullframe, opacity: 1, ease: Linear.easeNone }, "<" ); let btl = gsap.timeline({ repeat: -1, paused: false }); btl.to("#ball", fullframe * 0.48, { y: -25, x: 0, ease: Sine.easeOut }, "<"); btl.to("#ball", fullframe * 0.48, { y: 20, x: 0, ease: Sine.easeIn }); btl.to("#ball", fullframe * 0.04, { y: 5, x: 0, ease: Linear.easeNone });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载，需支付20jQ币
开通后，在线代码模块中所有代码可终身免费下！
您已开通在线代码永久免费下载,关闭提示框后，点下载代码可直接下载！
您已经开通过在线代码永久免费下载
对不起，您的jQ币不足！可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>svg弹跳动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号