Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Click anywhere to replay
css
body { margin:0; padding:0; cursor:default; text-align:center; display:flex; justify-content:center; background-color:#b6c6d3; } svg { height:99vh; max-height:100vw; } .no-fill,.cactus-prickle { fill:none; } .replay-text { fill:#ffffff; font-size:24px; font-family:Helvetica,sans,monospace,sans-serif; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .back { fill:#b8c6d1; } .pot { fill:#e3e5e1; } .pot-lighter { fill:#edeeeb; } .pot-lightest { fill:#f6f6f4; } .pot-top-lightest { fill:#fff; } .pot-top-soil { fill:#afb4a6; } .pot-shadow { fill:#a1b4bd; } .haworthia { -webkit-clip-path:url(#haworthia-clip-path); clip-path:url(#haworthia-clip-path); fill:#7ea981; } .haworthia-strip { fill:#c7e5ce; } .haworthia-ouline { fill:#709c74; opacity:0.5; } .cactus { -webkit-clip-path:url(#cactus-clip-path); clip-path:url(#cactus-clip-path); fill:#5b9a7c; } .cactus-lighter { fill:#63a689; } .cactus-lightest { fill:#6fb293; } .cactus-prickle { stroke:#4c8165; stroke-linecap:round; stroke-miterlimit:10; stroke-width:3px; } .flower-root { fill:#71d1a8; } .flower-lighter { fill:#efad96; } .flower { fill:#e19680; } .flower-back { fill:#d38570; } .echeveria { -webkit-clip-path:url(#echeveria-clip-path); clip-path:url(#echeveria-clip-path); fill:#78b1b5; } .echeveria-darker { fill:#6ea8a8; } .echeveria-lighter { fill:#88bfbf; }
JavaScript
function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr);}}var POT_BOTTOM_Y = 585; var POTS_TIMES = [ { duration: 0.5 + Math.random() * 0.3, delay: 0 }, { duration: 0.5 + Math.random() * 0.3, delay: 0.5 }, { duration: 0.5 + Math.random() * 0.3, delay: 0.2 }]; var masterTimeline = new TimelineMax(); var potsTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.pot'))).map(function (pot, i) { var timeline = new TimelineMax(); timeline.from( pot, POTS_TIMES[i].duration, { delay: POTS_TIMES[i].delay, y: -POT_BOTTOM_Y }); return timeline; }); var shadowsTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.pot-shadow'))).map(function (shadow, i) { var timeline = new TimelineMax(); timeline.from( shadow, POTS_TIMES[i].duration, { ease: Power0.easeInOut, delay: POTS_TIMES[i].delay, scale: 0, transformOrigin: 'center center' }); return timeline; }); var leafsTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.leaf'))).map(function (leaf) { var isBack = leaf.classList.contains('leaf-back'); var timeline = new TimelineMax(); timeline.from( leaf, 0.5 + Math.random() * 0.8, { delay: isBack ? 0.5 : 0, ease: Back.easeOut.config(0.5 + Math.random()), scale: 0, yPercent: 10 * Math.random(), transformOrigin: 'center bottom' }); return timeline; }); var flowersTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.flower'))).map(function (flower) { var isLeft = flower.classList.contains('flower-left'); var timeline = new TimelineMax(); timeline.from( flower, 1 + Math.random() * 1, { ease: Circ.easeOut, scale: 0, transformOrigin: isLeft ? 'right bottom' : 'left bottom' }); return timeline; }); masterTimeline. to('.replay-text', 0, { opacity: 0 }). add(potsTimeline, 0). add(shadowsTimeline, 0). add(leafsTimeline). add(flowersTimeline). to('.replay-text', .5, { opacity: 1 }); document.body.addEventListener('click', function () { if (!masterTimeline.isActive()) { masterTimeline.restart(); } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>GSAP 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号