Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html,body { font-family:sans-serif; width:100vw; height:100vh; margin:0; padding:0; background:hsla(60,27%,98%,1); } path { stroke-width:7px; stroke:#999; fill:none; } body { display:flex; align-items:center; justify-content:center; } svg { width:50vw; height:50vh; } .app { margin-top:-10%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; } input { width:400px; } h1 { font-weight:100; }
JavaScript
const options = { duration: 200, type: "oneByOne", dashGap: 1, reverseStack: false, progress: 0, direction: 1, speed: 1, frame: 0, pause: 1200 }; const vivus = new Vivus(document.querySelector("svg"), { ...options }); vivus.reset(); vivus.stop(); const progress = document.querySelector('[type="range"]'); function animate() { let pause = 0; if (options.frame === options.speed) { options.progress += options.direction; if (options.progress < 0 || options.progress > 100) { options.direction = -options.direction; options.progress += options.direction; pause = options.progress === 0 ? options.pause / 10 : options.pause; } vivus.setFrameProgress(options.progress / 100); options.frame = 0; } progress.value = options.progress / 100; options.frame++; setTimeout(() => { requestAnimationFrame(animate); }, pause); } requestAnimationFrame(animate);
粒子
时间
文字
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号