Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Gooey Effect
css
body { height: 100vh; display: flex; align-items: center; justify-content: center; background: #000000; } .svg { width: 400px; } @media (max-height: 400px) { .svg { width: 250px; } } .svg .paths { display: none; } .svg .circle { fill: #ffffff; } .svg.gooey .circles { filter: url("#filter"); } .controller { position: fixed; top: 20px; right: 20px; color: #000; font-family: sans-serif; font-size: 10px; text-transform: uppercase; padding: 15px 20px 12px 15px; background: #fff; border-radius: 20px; } @media (max-height: 400px) { .controller { top: 10px; right: 10px; } } .controller span { display: inline-block; position: relative; z-index: 1; } .controller span:before { content: ""; position: absolute; top: -3px; left: -22px; width: 16px; height: 16px; background: red; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .controller span:after { content: ""; background: #fff; position: absolute; z-index: 1; top: 1px; left: -18px; width: 8px; height: 8px; border-radius: 2px; opacity: 0; transition: opacity 0.2s ease-out; } .controller input { opacity: 0.01; height: 0; } .controller input:checked + span:after { opacity: 1; }
JavaScript
const $svg = document.querySelector('.svg'); const $gooey = document.querySelector('#gooey'); $gooey.addEventListener('change', () => { $svg.classList.toggle('gooey'); }); const opts = { num: 31, radius: 20 }; const init = () => { const circles = document.querySelector('.circles'); const namespace = 'http://www.w3.org/2000/svg'; for (let i = 0; i < opts.num; i++) { const circle = document.createElementNS(namespace, 'circle'); circle.classList.add('circle'); circle.setAttribute('r', opts.radius); circle.setAttribute('cx', 128); circle.setAttribute('cy', 128); circles.appendChild(circle); } let n = 10; setInterval(() => { n = n - 1; animate(n); if (n === 0) n = 10; }, 1200); }; init(); const animate = n => { const paths = document.querySelectorAll('.path'); const circles = document.querySelectorAll('.circle'); if (!paths[n]) return; const length = paths[n].getTotalLength(); const step = length / opts.num; for (let i = 0; i < opts.num; i++) { const { x, y } = paths[n].getPointAtLength(i * step); gsap.to(circles[i], { cx: x, cy: y, ease: 'power3.out', fill: i % 2 === 0 ? 'red' : 'white', delay: i * 0.024 }); } }; 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号